Vue.js常用指令

创建时间：2017-11-15

Vue.js常用指令

什么是指令

指令：用来扩展Html标签的功能

angular中常用的指令：

ng-model ng-repeat ng-click ng-show/ng-hide ng-if

vue中常用的指令

v-model

双向数据绑定，一般用户表单元素

<div id='app'>
    用户名：<input type="text" v-model='name'>
    <br/>
    {{name}}
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'#app',//vue2.0中不允许实例挂载到<html>或<body>元素，在vue1.0中是可以的
        data:{
            name:''
        }
    })
</script>

v-for

对数组或对象进行循环操作，angular使用的是 ng-repeat

2.0的v-for可以直接循环包含重复数据的集合，1.0不可以

注：在vue1.0中提供了隐式变量，如$index、$key

在vue2.0中去除了隐式变量，已被废除

<div id='app'>
    <!-- 数组循环 -->
    <ul>
        <li v-for='value in arr'>{{value}}</li>
    </ul>
    <!-- 对象循环 -->
    <ul>
        <li v-for='value in obj'>{{value}}</li>
    </ul>
    <!-- 键 值循环 之 数组-->
    <ul>
        <li v-for='(v,k) in arr'>{{k}}={{v}}</li>
    </ul>
    <!-- 键 值循环 之 对象-->
    <ul>
        <li v-for='(v,k) in obj'>{{k}}={{v}}</li>
    </ul>
    <!-- 可以通过指定:key属性绑定唯一key，当更新元素时可以重用元素，提高效率，类似vue1.0中track-by-->
    <ul>
        <li v-for='(v,k) in arr1' :key='k'>{{v}}</li>
    </ul>
    <!-- 遍历 数组对象集合 -->
    <ul>
        <li v-for='v in user'>
            {{v.id}},{{v.name}},{{v.age}}
        </li>
    </ul>
    <!-- 遍历 数组对象集合 键 值   index索引-->
    <ul>
        <li v-for='(v,index) in user'>
            {{index+1}},{{v.id}},{{v.name}},{{v.age}}
        </li>
    </ul>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[12,154,121,4,12,18],
            obj:{id:11,name:'陈',age:25},
            arr1: [12, 154, 121, 4, 12, 18],
            user:[
                {id:101,name:'唐僧',age:50},
                {id:102,name:'孙悟空',age:30},
                {id:103,name:'猪八戒',age:20},
            ]
        }
    })
</script>

v-on

用来绑定事件，用法：v-on：事件 = “函数”

标准写法 v-on:click="show()"

简写 @click="show()"

<div id='app'>
    <!-- 移动事件 -->
    <button v-on:click='show()'>鼠标经过</button>
    <!-- 移动事件 -->
    <button v-on:mousemove='show()'>鼠标经过</button>
    <br/>
    <!-- 点击事件 -->
    <button v-on:click='add()'>向数组中添加一个元素</button>
    <br/>
    {{arr}}
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'#app',
        //存储数据
        data:{
            arr:[12,154,121,4,12,18]
        },
        //存储方法
        methods:{
            show:function(){
                console.log('show方法');
            },
            add(){
                console.log(this);//this表示当前vue实例
                 this.arr.push(666);//使用this访问当前实例中的成员
                 this.show();     
            }
        }
    })
</script>

v-show/v-if

用来显示或隐藏元素，

v-show实际还在html当中，状态时display

v-if删除掉元素，再重新创建

<div id='app'>
    <button v-on:click="hide()">隐藏</button>
    <br/>
    <button v-on:click="change()">隐藏|显示</button>
    <div style="width:200px;height:100px;background:#c00;color:#fff" v-show="bool">欢迎光临小站</div>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'#app',
        //存储数据
        data:{
            bool:true
        },
        //存储方法
        methods:{
            hide(){
                this.bool=false
            },
            change(){
                this.bool = !this.bool
            }
        }
    })
</script>

综合案例

v-text/v-html

用于输出data数据,v-text输出的是纯文本，v-html可以输出标签

<div class='box'>
    <!-- 原样输出，结果： <h3>标题</h3>，知道语法即可，少用这种数据方式输出 -->
    <div>{{msg}}</div>

    <!-- 原样输出，结果： <h3>标题</h3> ，常用的数据输出方式-->
    <div v-text="msg"></div>

    <!-- 输出标签，结果： 标题 ，少用，会导致黑客攻击-->
    <div v-html="msg"></div>
</div>

<script src='/static/vendor/vue/vue.min.js'></script>
<script>
    new Vue({
        el:'.box',
        //存储数据
        data: {
            msg:'<h3>标题</h3>'
        },
        //存储方法
        methods: {

        }
    })
</script>

v-once

数据只绑定一次，就算数据发生改变，绑定的值也不会改变

<h3 v-once>{{msg}}</h3>

v-pre

不会编译，直接原样显示

<h3 v-pre>{{msg}}</h3><--结果：{{msg}}-->

上一篇：vue.js简介、vue.js基础使用

下一篇：vue事件绑定和属性