内置指令、自定义指令（详细）、全局指令与局部指令

内置指令、自定义指令（详细）、全局指令与局部指令
目录

一、v-on

二、v-bind、v-model

三、v-if、v-else、v-show、v-for

四、v-text、v-big

五、v-html

六、v-cloak

七、v-once

八、v-pre

九、自定义指令_函数式

十、自定义指令_对象式

十一、自定义指令_总结

     1.指令名的问题

2.directives配置中this指向

3.将指令变成全局指令

4.备注

一、v-on

绑定事件监听，可以简写为@

具体信息可参照链接：

z http://t.csdn.cn/tLu8B

二、v-bind、v-model

v-bind：单向绑定解析表达式：xxx

v-model：双向数据绑定

具体信息可参照链接：

http://t.csdn.cn/B03jQ

三、v-if、v-else、v-show、v-for

v-if、v-else:条件渲染，动态控制结点是否存在

v-for：遍历数组、对象、字符串

v-show:条件渲染（动态控制结点是否展示）

具体信息可参照链接：

http://t.csdn.cn/wpAm5

四、v-text、v-big

但是我们更经常使用插值语法，插值语法更灵活

   1.作用：向其所在的节点中渲染文本内容

   2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

   备注：v-text不支持结构的解析！



五、v-html

   支持结构的解析

作用：向指定节点中渲染包含html结构的内容

与插值语法的区别：

      v-html会替换掉节点中所有的内容，{{xx}}则不会

     v-html可以识别html结构

注意：

v-html有安全性问题！！！！

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

一定要在可信的内容上使用v-html，永远不要在用户提交的内容上
```
html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
    head>
    <body>
        <div id="root">
           <div>你好，{{name}}div>
           <div v-text="name">你好，div>
           <div v-html="str">div>
        div>
 
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷',
                    str:'你好啊！
'
                },
 
            })
 
        script>   
    body>
html>
```
六、v-cloak

     v-cloak指令（没有值）

       1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性

       2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

下面这个案例，我们把

一、v-on

二、v-bind、v-model

三、v-if、v-else、v-show、v-for

四、v-text、v-big

五、v-html

你好啊！

六、v-cloak