vue的常用指令

1、v-text

设置标签的文本值

<div id='root'>
    <span v-text = 'message'> </span>
</div>
<script>
    const x = new Vue({
        el:'#root',
        data:{
            message:'你好！'
        }
    })
</script>

2、v-html

设置标签的innerHtml

<div id="root">
	<span v-html="message"></span >
</div>	
<script>
    const x=new Vue({
        el:"#root",
            data:{
                message:'<span>你好</span>'
            }
    })
</script>

3、v-on

为元素绑定事件；同时可以传递自定义参数

（1）为元素绑定事件

<div id="root">
    <button v-on:click='btn'>点击</button>
    <button @click='btn'>点击</button>
    <button @dblclick='btn'>双击事件</button>
</div>	
<script>
    const x=new Vue({
        el:"#root",
        methods:{
            btn:function(){
                console.log("你好")
            }
        }  
    })
</script>

（2）传递自定义参数

<div id="root">
    <input type="text" @keyup.enter="enter"> //键盘enter
</div>
<script>
   const x=new Vue({
       el:"#root",
       methods:{
           enter:function () {
               console.log('你好')
           }
       }
     })
</script>

4、v-show

根据表达值的要求（规则），切换元素的显示隐藏

5、v-if

根据表达值的要求，切换元素的显示隐藏，主要用于操作DOM元素

6、v-show和v-if的区别：

        （1）v-show：主要控制得css

        （2）v-if：动态得添加或者删除dom元素，适合频繁切换

7、v-bind

设置元素得属性

8、v-for

循环列表渲染

 <div id="root">
    <ul>
       <li v-for="(item,index) in arr">
           {{item}}
       </li>
    </ul>
 </div>
 <script>
    const x=new Vue({
       el:"#root",
       data:{
           arr:[1,2,3,4]
        }
    })
</script>

9、v-model

获取和设置元素的值，双向数据绑定

<div id="root">
    <input type="text" v-model="message" @click="get">
    <h2>{{message}}</h2>
</div>
<script>
    const x=new Vue({
        el:"#root",
        data:{
           message:""
        },
        methods:{
           get:function (){
              alert(this.message)
           }
       }
    })
</script>

10、v-cloak

当你的网速过慢时，将没有解析得模块显示在页面上

11、v-once

所在节点在初次动态渲染后，就视为静态内容了，数据改变不会引起v-once所在结构的更新，可以用于优化性能

12、v-pre

跳过其所在节点的编译过程，可利用它跳过没有使用指令语法，没有使用插值语法的节点，会加快编译