Vue框架——指令

指令

• 什么是指令
• v-cloak指令的用法
• 数据绑定指令
• 双向数据绑定

什么是指令

• 在了解指令之前，我们先了解什么是自定义属性？

  在html5中，我们可以通过data-开头来设置我们需要的自定义属性（比如data-index）

• 指令的本质就是自定义属性

• 指令的格式：以v- 开头（比如：v-cloak）

v-cloak指令的用法

• 作用

  保持在元素上直到关联实例结束编译，可以用于解决插值表达式存在的“闪动”问题。

• 原理

  先隐藏标签，替换好值之后再显示最终的值

• 用法

  • css文件

    [v-cloak] {
    	display: none;
    }
    

  • html文件

    <div v-cloak>
    	{{ message }}
    </div>
    

数据绑定指令

v-text指令——填充纯文本

相比插值表达式更加简洁，没有“闪动”的问题。

• 用法

  • html文件

    <div id="app">
            <div v-text='message'></div>
    </div>
    

  • JavaScript文件

    var vm = new Vue({
        el: '#app', 
        data: {
            message: 'Hello Vue',
        }
    });
    

v-html指令——填充HTML片段

• 缺陷
  ①存在安全问题
  ​ 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

  ②通过Ajax访问本网站的数据可以使用，来自第三方数据不可以使用。

• 用法

  • html文件

    <div id="app">
    	<div v-html='html'></div>
    </div>
    

  • JavaScript文件

    var vm = new Vue({
        el: '#app', 
        data: {
            html: '<h3>HTML</h3>',
        }
    });
    

v-pre指令——填充原始信息

显示原始信息，跳过编译过程

• 用法

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

v-once指令——只编译一次

显示内容之后不再具有响应式功能

• 如何理解响应式

  ① html5中的响应式（屏幕尺寸的变化导致样式的变化）

  ② 数据的响应式（数据的变化导致页面内容的变化）

• 什么是数据绑定

  将数据填充到标签中

• 用法

  • html文件

    <div id="app">
        <div v-once>{{info}}</div>
    </div>
    

  • JavaScript文件

    var vm = new Vue({
        el: '#app', 
        data: {
            info: 'once',
        }
    });
    

    当info属性值后续改变时，标签里的内容不会跟着改变

• 应用场景

  如果显示的信息后续不需要修改，则可以使用v-once，这样可以提高性能

双向数据绑定

• 什么是双向数据绑定

  假定有一个input标签绑定data里的属性info，当标签的值改变时，info的值也会随之改变，当info的值改变时，input标签的值也会改变。

• 用法

  使用v-model指令

  • html文件

    <div id="app">
        <div>{{info}}</div>
        <input type="text" v-model='info'>
    </div>
    

  • JavaScript文件

    var vm = new Vue({
        el: '#app', 
        data: {
            info: 'model',
        }
    });