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 }}}
<img src="{{ photoURL }}" />

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 结构中删除；当使用 <template> 元素包装多个元素时，最终的渲染结果仅包含 <template> 元素的内容。

v-show 指令的初始性能消耗较高，v-show 指令会在初始编译时建立元素并插入 DOM 结构，同时根据条件决定该元素是否显示；v-show 指令不能使用 <template> 元素包装多个元素；v-if 和 v-show 指令后面均可以紧跟一个 v-else 指令表示当条件不知足时渲染/显示的内容。

• 多于一个元素的 v-if 须要使用 <template>

• v-show 不支持 <template>

• v-else 必须紧跟在 v-if/v-show 指令后面

• 组件条件下不能使用 <v-else>
  

过滤及排序

有两种方法能够实现列表内容的过滤和排序而不用修改原始数据：

• 使用内置的 limitBy、filterBy 和 orderBy 过滤器；

• 建立一个计算属性，返回过滤/排序过的数组。

一般使用过滤器较为方便，而计算属性有更好的控制力，也更灵活。基于知足灵活性和复杂性的考虑，推荐使用专业的第三方类库 lodash 建立计算属性来实现列表内容的过滤和排序。

track-by的使用

使用 track-by 能够增长复用，提高数据变更时的渲染性能；能够 track-by 数组中的惟一键值来指示当键值一致时复用使用域和 DOM 元素；若数组没有惟一键值，可使用 track-by="$index" 指示 v-for 指令进行原位更新模式，该模式也可用于处理数组中的重复值。

• 若是每一个对象都有一个惟一的ID属性，设置track-by该属性，能够最大化复用DOM元素，避免从新渲染。

• 容许重复值，设置track-by $index

Vue.js 包装的数组变异方法有：push、pop、shift、unshift、splice、sort、reverse，这些方法均对原始数组进行了修改。

类与样式绑定的加强

为了更灵活地进行类绑定，Vue.js 支持在数组语法中使用对象的混合绑定语法。对象语法支持驼峰式和短横分隔式的 CSS 属性名；对于须要厂商前缀的 CSS 属性名，Vue.js 并非粗暴地直接添加，而是自动侦测后添加相应的前缀，若无必要，不会添加；采用数组语法时，会对绑定的数组使用 reduce 方法执行从前到后的对象 extend 操做（相似于 jQuery.extend 方法），其结果是若不一样数组元素中有相同的 CSS 属性，后出现元素中的 CSS 属性值覆盖结果中的 CSS 属性值，所以是后出现的优先应用；对象语法经常结合返回对象的计算属性使用，实现数据响应式的效果。

类绑定的对象语法

<span class="switch" :class="{switched: gender}" @click="gender = Math.abs(~-gender)">
      <span class="switch-item-1" data-pseudo-content="男"></span>
      <span class="switch-item-2" data-pseudo-content="女"></span>
</span>
var vm = new Vue({
    el: '#app',
    data: {
      gender: 0,
      off: true,
      nameType: 'Eng'
    }
})

类绑定的数组语法

<table class="table" :class="tableClasses">
    <caption>
      Table Caption
    </caption>
    <thead>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
</table>
<script>
  var vm = new Vue({
    el: 'body',
    data: {
      tableClasses: ['table-striped', 'table-bordered']
    }
  })
</script>

样式绑定的对象语法

<div class="container">
  <h1>
    样式绑定对象与数组语法
  </h1>
  <div class="row">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
      颜色：红，字体：30px
    </div>
    <hr>
    <div :style="styleObject">
      颜色同样红，字体也是30px
    </div>
    <hr>
    <div :style="[styleObjectA, styleObjectB]">
      颜色继续红，字体保持30px，而且增长了阴影
    </div>
  </div>
</div>
<script src="../js/vue.js"></script>
<script>
  var vm = new Vue({
    el: 'body',
    data: {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        'font-size': '30px'
      },
      styleObjectA: {
        color: 'red',
      },
      styleObjectB: {
        fontSize: '30px',
        boxShadow: '10px 10px 5px #888888'
      }
    }
  })
</script>

样式绑定的数组语法

<div v-bind:style="[styleObjectA, styleObjectB]"></div>
styleObjectA: {
    color: red
},
styleObjectB: {
    fontSize: '30px',
    boxShadow: '10px 10px 5px #888'
}

---

++++++++++本人出售本人出售《Vue.js权威指南》，二手价20元！++++++++++