一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

内部指令

v-开头，值是单个js表达式，除了v-for和v-on，当表达式值改变，改变dom

指令接收参数，指令名称后:表示，如v-bind:href="xx", v-on:click=""

参数可以是js表达式，用[]括起来。不要用大写，因为会浏览器被转化为小写

表达式只能访问部分全局变量，不能访问用户自定义的全局变量

<!--

在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。

除非在实例中有一个名为“someattr”的 property，否则代码不会工作。

-->

<a v-bind:[someAttr]="value"> ... </a>

参数必须是字符串，null表示移除绑定

参数里不能用空格和引号，可以用计算属性

v-bind:[attributeName]="url"

一些指令的使用速记

<span v-bind:title="message">

message在vue对象的data()里返回，

message如何是null或undefined，不生效

<button v-on:click="reverseMessage">反转 Message</button>

reverseMessage在vue对象的methods属性里定义，是个方法

<input v-model="message" />

message在vue对象的data()里返回

<span v-if="seen">现在你看到我了</span>

senn在vue对象的data()里返回

<li v-for="todo in todos">

{{ todo.text }}

</li>

todos在vue对象的data()里返回，todos是返回对象的键，值是数组，数组元素类型是对象，对象有个键是text

data() {

    return {

        todos: [

                   { text: 'Learn JavaScript' },

                   { text: 'Learn Vue' },

                   { text: 'Build something awesome' }

                ]

            }

        }

<span v-once>这个将不会改变: {{ msg }}</span>

msg在vue对象的data()里返回，一次性插值，msg改变，节点值不变

v-html：显示原生html，如果有样式也会生效，而不是当纯文本输出

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

自定义指令

参考：

8个非常实用的Vue自定义指令 - a权 - 博客园

复制粘贴指令 v-copy

长按指令 v-longpress

输入框防抖指令 v-debounce

禁止表情及特殊字符 v-emoji

图片懒加载 v-LazyLoad

权限校验指令 v-premission

实现页面水印 v-waterMarker

拖拽指令 v-draggable

v-if和v-show比较

1.v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁

2.v-show是通过控制dom元素的css样式来实现显隐，不会销毁

3.频繁或者大数量显隐使用v-show，否则使用v-if

vue内部指令

内部指令

一些指令的使用速记

自定义指令

v-if和v-show比较