VUE的JS指令

表达式

在HTML中直接嵌入JavaScript代码，需要使用表达式

{{ }}

{{ 10 + 20 }}
{{ Math.random() > 0.5 }}
{{ 'hello vue'.toUpperCase() }}
{{ 0 > 1 ? 'true' : 'false' }}

和AngularJS中使用规则一致

注意：放置的代码，一定要具有返回值

常用指令

v-text

绑定内容值

{{ a }}

和AngularJS中ng-bind功能一致

v-model

双向绑定

{{ username }}

和AngularJS中ng-model功能一致

v-model是语法糖，不使用v-model也可实现（v-bind / v-on）

注意：使用变量username的时候，一定需要在控制器中进行过定义

v-for

渲染列表

关键字使用of或in都可以

// 首先在数据中声明
let vm = new Vue({
    el: '#app',
    data: {
        people: [
            { name: 'xiaoming', age: 19 },
            { name: 'xiaohong', age: 20 },
            { name: 'xiaoli', age: 12 }
        ]
    }
});

    
{{ person.name + ' ' + person.age }}


    
{{ person.name + ' ' + person.age }}


    
{{ index + ' ' + person.name + ' ' + person.age }}


    
{{ index + ' ' + person.name + ' ' + person.age }}

v-on

事件绑定

和AngularJS不同，在Vue中，绑定任何事件都使用v-on这一个指令

// 在method中声明方法
let vm = new Vue({
    el: '#app',
    methods: {
        show() {
            console.log('show');
        }
    }
});

Show

简写形式，使用@代替了v-on指令

Show
mouseover

修饰符

执行事件的同时，另外去执行其它的任务

• stop：调用event.stopPropagation()
• prevent：调用event.preventDefault()
• enter：调用指定按键上触发的回调

李大泽
阻止事件冒泡

传递参数

$event参数

methods: {
    show(e) { // e代表传递进来的参数
        console.log(e);
    }
}

v-bind

绑定属性

{{ blogName }}
v-bind:class
v-bind:style
v-bind

简写形式，使用:来代替v-bind指令

{{ blogName }}
v-bind:class
v-bind:style

v-if v-else-if v-else

是否渲染

A
B
C
Not A/B/C

v-show

显示隐藏标签

v-show

v-cloak

这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

{{ msg }}

change () {
    this.msg += 'ggggggggg';
    console.log(this.msg);
}