VUE的JS指令

表达式

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

{{ }}

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

和AngularJS中使用规则一致

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

常用指令

v-text

绑定内容值

<h2>{{ a }}</h2>
<h2 v-text="a"></h2>

和AngularJS中ng-bind功能一致

v-model

双向绑定

<input type="text" v-model="username">
<h2>{{ username }}</h2>

和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 }
        ]
    }
});

<!-- 在HTML中的使用 -->
<ul>
    <li v-for="person in people">{{ person.name + ' ' + person.age }}</li>
</ul>
<ul>
    <li v-for="person of people">{{ person.name + ' ' + person.age }}</li>
</ul>
<ul>
    <li v-for="(person, index) in people">{{ index + ' ' + person.name + ' ' + person.age }}</li>
</ul>
<ul>
    <li v-for="(person, index) of people">{{ index + ' ' + person.name + ' ' + person.age }}</li>
</ul>

v-on

事件绑定

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

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

<!-- 在HTML中的调用 -->
<button type="button" v-on:click="show()">Show</button>

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

<button type="button" @click="show()">Show</button>
<h2 @mouseover="show()">mouseover</h2>

修饰符

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

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

<input type="text" @keyup.enter="show()">
<input type="text" @keyup.13="show()">
<a href="http://blog.lidaze.com" @click.prevent="show()">李大泽</a>
<div @click.stop="show()">阻止事件冒泡</div>

传递参数

<h2 @click="show($event)">$event参数</h2>

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

v-bind

绑定属性

<img v-bind:src="imgUrl">
<a v-bind:href="blogUrl">{{ blogName }}</a>
<div v-bind:class="{ 'active': flag }">v-bind:class</div>
<div v-bind:style="{ fontSize: '50px' }">v-bind:style</div>
<div v-bind="{ id: 'div1', title: 'i\'m div' }">v-bind</div>

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

<img :src="imgUrl">
<a :href="blogUrl">{{ blogName }}</a>
<div :class="{ 'active': flag }">v-bind:class</div>
<div :style="{ fontSize: '50px' }">v-bind:style</div>

v-if v-else-if v-else

是否渲染

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

v-show

显示隐藏标签

<h2 v-show="flag">v-show</h2>

v-cloak

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

<div id="app" v-cloak></div>

v-once

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

<h2 @click="change()" v-once>{{ msg }}</h2>

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