vue 指令

指令:

指令是带有v-前缀的特殊attribute，一些指令能够接收一个参数，在指令名称之后以冒号表示。

v-html:可以解析html标签,更新覆盖元素中原有的元素内容

v-text:不能解析标签,更新覆盖元素中原来的文本内容

<h1 v-html='name'>qqq</h1><!-- 小明 -->
<h1 v-text='name'>qqq</h1><!-- <p>小明</p> -->

 var vm = new Vue({
            el:"#box",
            data:{
                name:'<p>小明</p>',
            }
         })

v-bind:单项数据绑定,简写为:

<input type="text" v-bind:value="msg">
简写:<input type="text" :value='msg'>

var vm = new Vue({
            el:"#box",
            data:{
                msg:'1111',
                name:'小明',
            }
         })

v-model:双向数据绑定

<input type="text" v-model='name'>
{{name}}   

var vm = new Vue({
            el:"#box",
            data:{
                msg:'1111',
                name:'小明',
            }
         })

v-on:绑定事件,简写为@

<button v-on:click='aa'>点击</button>
 简写:<button @click='bb'>点击</button>

var vm = new Vue({
            el:"#box",
            data:{
            },
            methods:{
                aa(){
                    console.log('aa')
                },
                bb(){
                    console.log('bb')
                }
            }
         })

v-if:指令取值为true/false,控制元素是否被渲染

v-else和v-if搭配使用,没有对应的值,当v-if为false时,v-else才能渲染

v-show:指令取值为true/false,分别代表显示/隐藏,和v-if的区别是v-show通过display属性来让元素显示隐藏

<p v-if='false'>1111</p>
        <p v-else>2222</p>

        <p v-show='false' >11</p>
        <p v-show='true' >22</p>

v-clock:防止闪烁

<div v-cloak>{{name}}</div>

[v-cloak]{
            display: none;
}

v-for:遍历data中存放的数组数据,实现列表的渲染

<ul>
    <li v-for='(i,index) in aa' :key='index'>{{i}}</li>
</ul>

var vm = new Vue({
            el:"#box",
            data:{
                aa:[1,2,3,4]
            }
    })