前端框架VUE.JS的“内置指令”基础总结

小不

在校大学生/女院男孩子/编程初学者/全栈爱好者

话不多说直接上干货

vue中的指令分为 内置指令 和 自定义指令 ，顾名思义内置指令是vue框架中带有的不需要用户去定义的指令；而vue自定义指令是由用户按照vue框架提供的方法自己编写的指令。

本文将介绍vue的内置指令以及指令在vue.js2.0中的变化2个方面。

正文：

1.V-bind：

V-bind主要用于动态绑定DOM元素属性，即元素属性值是由vue示例中的data决定

<img v-bind:src='img'/>
new vue({
    data:{
        img:'/img.jpg'
以上V-bind还可以简写为：
<img :src='img'/>

V-bind还有三种修饰符（.sync/.once/.camel）。

.sync用于组件props属性，即父组件传递子组件值的双向绑定，选择后，无论在那个组件中进行修改，其他组件中这个值也会随之更新。

.once同.sync一样用于props属性，但.once进行的是单次绑定，和双向绑定正好相反，单次绑定是父组件将绑定数据传递给子组件之后，子组件单独维护这份数据，被传递的数据从此和父组件再无关系，父组件的数据发生变化也不会影响子组件中的数据。

.camel是将绑定的组件转回驼峰命名。（注：只能用于普通的html属性绑定，通常会用svg标签下的属性。

在Vue2.0之后的版本中，修饰符.sync和.once将不再被使用，并且规定组件之间仅能单向传递，子组件和父组件之间的数据修改只能通过事件处理。

2.V-model：

V-model用于动态绑定表单控件之间的值和vue实例之间的数据

<input type = 'text' v-model = "msg"/>
new Vue({
    data:{
        msg:"data"
})

其中Vue.js还为表单提供了一些参数，有如下特征：

①.lazy：默认情况下V-model在input事件中同步输入框值与数据，加入lazy属性后会在change事件中同步。

<input type = 'text' v-model = "msg" lazy/>

②.number：会自动将用户输入转为number类型（如果转换结果为NaN则返回原值）

<input type = 'text' v-model = "msg" number/>

注意：在vue2.0之后的版本中取消了lazy和number作为参数，而改用修饰符modifier来代替

<input type = 'text' v-model.lazy="query"/> <input type = 'text' v-model.number="age"/>

并且新增加了trim修饰符，用于去掉输入值的首尾空格

<input type = 'text' v-model.trim="name"/>

3.V-if、V-else、V-show：

这三个指令主要用于根据条件来展示templete中的内容，其中重点是v-if和v-show的区别：

v-if在FALSE的情况下并不会对模板内容进行编译，而v-show则是编译好之后对模板内容进行隐藏。

因此v-if在切换值时的消耗要比v-show高，而在初始值为FALSE的情况下，v-if的初始渲染要稍快。

4.V-for：

v-for指令主要用于列表渲染，接受的数据形式为一个数组，v-for将重复渲染DOM元素及其内部的子元素，，并且可以通过设置别名的方式获取数组内部数据渲染到节点中。

<ul>
        <li v-for="item in items">
                 <div>{{item}}</div>
</ul>

值得注意的是，v-for除了可以遍历数组之外，还可以遍历对象：

在v-for作用于内可以访问内置变量key，也可以使用（key，value）形式自定义key变量

<li v-for="item in items"key="item">
    {{item}}
</li>

最后v-for还接受单个整数组，用作循环次数：

<li v-for="n in 5">
    {{n}}
</li>

5.V-on

v-on主要用于事件绑定，用法如下：

<button v-on:click="sayFrom('from param')">say</button>
method:{
     sayFrom:founction(from){
          alter(this.msg + ' ' + from);
}

同一元素也可以通过v-on绑定多个事件函数并顺序执行

<div v-on:click="sayFrom('first')"  v-on:click="sayFrom('second')">

Vue.js为v-on提供了多个修饰符，方便我们处理一些DOM事件细节：

① .stop等同于调用event.stopPropagation()。

② .prevent等同于调用event.preventDefault()。

③ .capture使用capture模式添加事件监听器。

④ .self只当事件是从监听事件本身触发时才触发回调

值得注意的是，除了事件修饰符之外，v-on还使用了按键修饰符，方便监听键盘的按键事件，例：

<input v-on:keyup.13="submit"/>