Vue.js常用开发知识简要入门(二)

字数 1880阅读 403
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 }}}
![]({{ 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>
    ![图片描述][1]

过滤及排序

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

  • 使用内置的 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元!++++++++++

1.png

[1]: http://img.mukewang.com/586a499a00015efa07730297.jpg

推荐阅读更多精彩内容