Vue指令和事件修饰符

vue指令

解释：指令是带有**v-**前缀的特殊属性
作用：当表达式的值改变时，将其产生的连带影响

• v-text
  解释：操作元素中的纯文本

栗子1：

栗子2：

注意：
用{{}}的弊端：当网速很慢或者下面的JavaScript写错时，会直接将{{message}}渲染到页面
而使用v-text="message" 如果出错是不显示的
所以在实际开发中用v-text比较多

• v-html
  作用：操作元素中的HTML标签
  v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出

栗子1：

结果：输出图片名称的字符串，而图片没有输出
原因：{{}}/v-text不能解析html元素，只会照样输出

栗子2：

结果:成功显示图片

注意：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

• v-bind
  作用：绑定标签属性，** ：**后面是标签属性名
  

• v-on
  作用：绑定事件

语法：
v-on:click="say"      or     v-on:click="say('参数',$event)"
简写：@click="say'

1、事件对应的方法不是定义在data里面，而是定义在vue实例的methods里面
2、v-on可以绑定多个事件
当绑定多个事件时，需要传入一个对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法，注意在vue实例中方法一定要有，不然就会报错。

• v-model 双向数据绑定
  作用： 在表单元素上创建双向数据绑定, 监听用户的输入事件以更新数据

modul层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新，实现了双向数据绑定更新。

• v-for
  作用：基于源数据多次渲染元素或模块
  

vue在渲染元素时，出于对效率的考虑，会尽可能复用已有的元素而非重新渲染，如果不希望这样，可以使用vue提供的key属性，可以让你自己决定是否要复用元素，key的值必须是唯一的；

• key属性
  1、使用v-for的时候提供key属性，可以获得性能提升
  2、使用key，vue会基于key的变化重新排列元素，并且会移除key不存在的元素
  
• v-if 和 v-show
  v-if：
  根据表达式的值的真假条件，销毁或重建元素；
  他也用于条件性的渲染内容，该块内容只有在指令的表达式返回值为true的时候被渲染；
  v-show: 根据表达式之真假值，切换元素的displsy CSS属性，

v-if和v-show的区别：
v-if 将比v-for  有更高的优先级，v-if将会分别重复运行于每个v-for循环中；
v-if：是真正的条件渲染，他会确保在切换过程中条件块内的时间和子组件被销毁和重建（组件被重建将会调用created）；
v-show：无论怎样，都会被渲染在DOM中，当条件为真值时，将会修改条件的css样式；
v-if 有更高的切换开销， v-show 有更高的初始渲染开销；

事件修饰符

• .stop

1、<a v-on:click.stop="doThis"></a>      阻止单击事件冒泡

• .prevent

<form v-on:submit.prevent="onSubmit"></form>   提交事件不再重载页面  

• .capture

<div v-on:click.capture="doThis">...</div>      添加事件侦听器使用事件捕获模式

• .self

div v-on:click.self="doThat">...</div>    只当事件在该元素本身（比如本身子元素）触发时触发回调     

• once

<a v-on:click.once="doThis"></a>      点击事件将只会触发一次

有不足之处，多多指教~！