dunizb
dunizb

Vue.js常用开发知识简要入门（二）

v-pre 指令

Vue.js 的指令是带有前缀 v- 的特殊 HTML 属性，其中的v-pre 指令用于指示 Vue 编译器跳过含有该指令的元素及其子元素，该指令主要有如下两个用途：

  • 显示原始插值标签

  • 跳过大量没有指令的节点以降低编译时间

编写较复杂的 Vue.js 模板时可以适当使用 v-pre 指令，提升编译效率。

数据绑定

插值

使用Mustache语法：

  • {{ msg }}

  • {{{ HTMLFragment }}}
    插值类型：

  • 文本

  • 原始HTML

  • HTML属性

指令

带有前缀 v- 的特殊属性v-if、v-text、v-html、v-bind、v-on....作用就是把某些特殊的行为应用到DOM上

v-bind和v-on的缩写形式
v-bind和v-on都必须带有参数才有意义

  • v-bind:src => :src

  • v-on:click => @click

绑定表达式

  • 支持全功能的JavaScript表达式

  • 表达式将在其所在Vue实例的作用域内进行计算

  • 不支持多于一个JavaScript表达式

  • 不支持语句及流程控制

双大括号插值和三大括号插值的区别


{{ message }}
{{{ htmlSegment }}}

Vue.js 的双大括号插值和三大括号插值其实是语法糖，双大括号会被编译成一个 textNode，然后使用 v-text 指令插入插值内容，而三大括号插值则被编译成一个锚节点，然后使用 v-html 指令替换为插值内容，上述过程比直接在 DOM 元素中使用 v-text 或 v-html 在性能上略有降低。

可以使用 Vue.config 全局配置对象的 delimiters 和 unsafeDelimiters 属性设置自定义的插值定界符，以避免与其他模板冲突，自定义插值定界符的语句应该写在 Vue 实例化之前。

例如：

// ES6 模板字符串
Vue.config.delimiters = ['${', '}']
// 使之看起来更危险
Vue.config.unsafeDelimiters = ['{!!', '!!}']

Vue.js 使用了将插值内容直接赋值给 textNode 元素的 data 属性或其他元素的 textContent 属性这样一种精巧的方式进行 HTML 转义，充分利用了浏览器自身的处理能力。这种方式也会产生无伤大雅的副作用，如对 textNode 元素的 data 属性赋值其实是调用了该属性的 setter() 方法，实际生成的 DOM 元素的代码与绑定表达式的值有可能不完全相同。

Vue.js 2.0 中移除所有内置过滤器

Vue.js 2.0 版中移除所有内置过滤器，过滤器的使用方式也将发生改变，在新版本中，过滤器后使用括号而非空格来添加参数，并只可应用于插值方式的数据绑定，其他使用过滤器的场景使用计算属性替代，并根据需要选择使用针对不同专业领域的第三方独立库，如针对日期时间处理使用 Moment.js，针对金融货币处理使用 Accounting.js，针对数组和对象处理使用 lodash。

修饰符

不同修饰符的作用互相独立，因此串联顺序不会影响使用效果；self 修饰符的作用是阻止响应由其他元素冒泡的事件，stop 修饰符用于停止冒泡，但这两者并不矛盾，可以应用于同一元素绑定事件；大部分 HTML 属性不区分大小写，使用 camel 修饰符时，对应的属性会被移除“-”号，但并不会呈现为驼峰样式，仅对类似于 SVG 元素的 viewBox 这样的特殊属性才会改为驼峰样式。

v-if和v-show

v-if 指令的切换性能消耗较高，当条件切换时，v-if 指令会根据条件创建或删除 DOM 元素，在条件满足时编译生成相应的元素并插入 DOM 结构，在条件不满足时将元素从 DOM 结构中删除；当使用