vue @click 多个事件_前端框架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>
        </li>
</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"/>
监听回车键（回车键keycodes为13），用于常用的回车键提交。

6.V-text

V-text的作用于文本插值比较相似，接受的参数也是string类型，文本插值本身就会被编译成一个V-text指令，但与文本插值不同的是V-text需要绑定在一个元素上。

<span V-text="msg"></span>

7.v-HTML

与V-text作用大致相同，用于更新innerHTML，，参数类型也为string，接受的字符串不会进行编译，直接按照普通的HTML代码处理。文本插值{{{HTML}}}也会编译成v-HTML再进行处理。

<div v-HTML="html"/>
<div>{{{ html }}}</div>

8.v-el

简单地说v-el为DOM元素提供了一个索引，使得我们可以直接访问DOM元素。在语法上可以表示为被v-el绑定的元素可以被实例的$els属性调用；也可以在内部通过this调用。较为简单，不再细讲。

9.v-ref

v-ref是作用于子组件上的v-el，并且父组件可以通过实例内部的$refs来访问被v-ref绑定的子组件的DOM元素。

10.v-pre

v-pre命令相对简单，跳过被绑定的元素的编译，例

<div v-pre>{{ msg }}</div>

data:{
    msg: 'Hello'
}

则输出{{msg}}。

11.v-once

v-once是vue2.0之后的新增指令，用于标明元素或组件只渲染一次，即随后发生的数据的变化或更新，该元素都不会再进行编译和渲染。其作用是很大程度的提升了更新行为中页面的性能，可以略过一些不需要变化的步骤。

以上内容出自笔者假期的自我修炼，至于为什么学习vue框架。。。当然是因为他火，在没有开始深入之前感觉风平浪静，越深入感觉越吃力，果然基础不牢，地动山摇，这篇文章也是靠着个人浅显的理解总结的，如果有什么不对的地方还请大佬评论指出。