Vue知识点笔记2

Vue指令之事件修饰符:
.stop 阻止冒泡(写在子元素中阻止其触发父元素事件)
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 仅当事件只在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次

v-model实现双向数据绑定:
Vue使用v-model实现表单元素数据的双向绑定,它会根据控件类型自动选择正确的方法来更新元素。v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">,其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input。
使用限制:input(radio, text, address, email...)、select、checkbox、textarea。

v-for指令迭代数字和数组:(迭代数字时基数从1开始而不是0)

    <div id="app">
        <p v-for="count in 4">迭代数字第 {{ count }} 次</p>
        <p v-for="(item, i) in list">数组第{{i+1}}个为{{ item }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [90, 75, 82, 69, 87]
            },
            method: {}
        })
    </script>

v-for指令迭代对象中的属性:

    <div id="app">
        <p v-for="(val, key) in user">value:{{ val }}........key:{{ key }}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user:{
                    id: 1001,
                    name: 'zhao',
                    age: '30'
                }
            },
            method: {}
        })
    </script>

v-if和v-show指令:
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。也可以用 v-else 添加一个“else 块”。v-show指令也可以控制元素显示/隐藏,v-show="true/false" 。它们的区别是,前者是直接移除元素内容,而后者通过display:none来隐藏元素。(故v-if切换性能消耗大;v-show初始渲染消耗大)

    <h1 v-show="flag">Hello Vue!</h1>
    <h1 v-if="flag">Hello Vue!</h1>
    <h1 v-else>else something</h1>

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,529评论 0 29
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 2,862评论 0 25
  • 1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实...
    王童孟阅读 502评论 0 2
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 6,304评论 0 25
  • vue学习笔记 安装 Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热...
    EL_PSY_CONGROO阅读 802评论 0 5
  • 你是否也曾遇到过这样一个人, 他总是喜欢看着你傻傻的笑, 在他不开心的时候, 只要见到你, 他就会变得很开心, 好...
    开森果阅读 181评论 0 1
  • 醒一重,梦一重。情在蓬山第几层?沉吟数不清。 忆难经,忘难经。望尽西风犹自零。落花君莫听。
    忘忧007阅读 1,813评论 40 112
  • 借由你,我所有流浪 都算安居,所有临阵脱逃 都算奋勇杀敌 借由你,我可以点亮 床头小灯,可以拧开 门的把手 有你这...
    一枝小草阅读 21评论 0 0