关于学习Vue.js的对于常用指令的分享

Vue.js的常用指令介绍。

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

 首先,在使用Vue.js前，要记得引入Vue.js的核心文件，否则无法执行。

1.v-text

        v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

<div id="app" v-text="msg"></div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"你好，这是v-text传来的数据。"
        }
})
</script>

"{{}}"插值表达式可以把Vue.js传递过来的数据和前台用户自己定义的数据结合在一起，但是v-text只能显示Vue实例传递过来的数据，回替换掉节点里已经有的内容。

2.v-html

         v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

<div id="app" v-html="msg"></div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"<h1>你好，这是v-html传来的数据。(可以带HTML结构显示)</h1> "
        }
})
</script>

 

v-text与v-html指令不同的是，v-html绑定的数据可以是HTML结构。 

3.v-bind (可以省略掉v-bind，简写为“：”)

         v-bind指令用于实现单向动态数据绑定。

        前面的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

<div id="app" >
    <input v-bind:value="msg">
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"你好，这是v-bind "
        }
})
</script>

上面的代码用v-bind指令把数据绑定到input控件的value值。因此，运行后文本框会把msg的数据显示上去。

5.v-on(可以用“@”简写)

        v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等),v-on表达式是一个方法名，这些方法一函数的形式定义在Vue实例的methods选项内。

<div id="app" >
    <p>{{msg}}</p>
    <!-- 监听点击事件，点击按钮修改文字 -->
    <button v-on:click="sayHi">点击此处</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"Hi"
        },
        methods:{
            sayHi:function(){
                this.msg="Hi~ o(*￣▽￣*)ブ,v-on!"
            }
        }
})
</script>

点击前:

点击后： 

6.v-cloak

        v-cloak指令可以隐藏未编译的Mustache标签直到关联实例结束编译。

<div id="app" v-cloak>
    {{msg}}
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"Hi,v-cloak"
        },      
})
</script>
<style>
   [v-cloak]{
    display: none;
   }
</style>

 上面的代码，v-cloak指令后不借表达式，为其设置css样式display:none，即可解决闪烁问题。

7.v-model 

        v-model指令主要用于实现表单元素的数据的双向绑定，通常用在表单类元素上（如:input、select、textarea等）。所谓的双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

<div id="app" >
    <input type="text" v-model="msg">
    <p>文本框的内容:{{msg}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{
            
        }
})
</script>

 

这次分享到此结束。