Vue的常用指令详解

1、v-for

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string

<p v-for="(item,index) in items">
    {{index +':'+d}}
</p>

该指令之值，必须使用特定的语法。例如上文的代码：(item, index) in items
index是索引，可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字)

2、v-if

<p v-if="3>2">hello</p>

v-if后面的是一个表达式或者也可以是返回true或false的表达式。 且值为true和fasle。false的话就会被注释；true就正常显示。

3、v-else

<div id="app">
　　<p v-if="1.78> 1.7">高</p>
　　<p v-else>矮</p>
</div>

必须和v-if一起用才可以 不能单独用。 而且必须在v-if下面，中间有别的标签也会报错。

4、v-else-if

	<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: '#app',
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>

5、v-show

和v-if一样 区别是if是注释掉;而v-show是给一个 display：none 的属性让它不显示！
用法可参考v-if指令。

v-show和v-if的区别：
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

6、v-html

<div id="app" v-html="html"></div>
<script type="text/javascript">
　　new Vue({
        el:'#app',
        data:{
            html:'<p>Hello world！</p>'
            }
    })
</script>　

双大括号会将数据解释为普通文本，而非 HTML 代码。
为了输出真正的 HTML，就需要使用 v-html，而且给一个标签加了v-html 里面包含的标签都会被覆盖。

7、v-text

<div id="app">
    <p v-text="msg">world</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:'#app',
        　　data:{
        　　　　msg:'hello'
            }
        })
</script>

给一个便签加了v-text 会覆盖标签内部原先的内容。
以上代码中，world不会显示

8、v-bind

完整语法 v-bind:href=“url”
缩写（语法糖）:href="url"

<div id="app">
    <p v-text="msg">world</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:'#app',
        　　data:{
        　　　　msg:'hello'
            }
        })
</script>

class 属性绑定

<div id="app">
  <div v-bind:class="{active: isActive}">文字</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

9、v-on

用于绑定一个事件监听器

事件修饰符
stop 阻止冒泡
prevent 阻止默认事件
capture 使用事件捕获模式
self 只在当前元素本身触发
once 只触发一次
鼠标修饰符
left 左键
right 右键
middle 滚轮

<div id="demo">
        <button v-on:click="cl">{{message1}}</button>
        <button v-on:click.once="c2">{{message2}}</button>
        <a href="http://cnblogs.com" target="_blank">普通链接</a>
          <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
        
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message1: "hello",
                message2: "hello",
                counter:0,
            },
            methods:{
                cl(){
                    this.message1 = this.message1 + ' vue!';
                },
                c2(){
                    this.message2 = this.message2 + ' vue!';
                },
            }
        })
    </script>

注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。