进修笔记：
内置指令

内置指令

基础指令

v-cloak

v-cloak不须要表达式，它会在Vue实例完毕编译时从绑定的HTML元素上移除，常常和CSS的display: none;合营运用：

<div id="app" v-cloak>
    {{message}}
</div>

当网速较慢、Vue.js文件还没加载完时，在页面上会显现{{message}}的字样，直到Vue建立实例、编译模板时，DOM才会被替代，所以这个历程屏幕有闪。只需加一句CSS就能够处理这个题目：

[v-cloak] {
    display: none;
}

v-cloak是一个处理初始化慢致使页面闪烁的最好实践，关于简朴的项目很有用。

在工程化的项目中，项目的HTML构造只要一个空的div元素，剩下的内容都由路由挂载差别组件完成，这时候不再须要v-cloak。

v-once

v-once是一个不须要表达式的指令，作用是定义它的元素或许组件只衬着一次，包括元素或组件的一切子节点。初次衬着后，不再随数据的变化从新衬着，将被视为静态内容。

v-once在营业中很少运用，假如须要进一步优化机能时，能够会用到。

前提衬着指令

v-if、v-else-if、v-else

Vue.js的前提指令能够依据表达式的值在DOM中衬着或烧毁元素/组件。

v-else-if要紧跟v-if，v-else要紧跟v-else-if或v-if，表达式的值为真时，当前元素/组件及一切子节点将被衬着，为假时被移除。

假如一次推断的是多个元素，能够在Vue.js内置的<template>元素上运用前提指令，终究衬着的结果不会包括该元素。

Vue在衬着元素时，处于效力斟酌，会尽能够地复用已有的元素，而非从新衬着。

<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”KewYmd” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”前提衬着指令” class=”codepen”>See the Pen 前提衬着指令 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

示例中键入内容后，点击切换按钮，虽然DOM转变了，然则之前在输入框键入的内容并没有转变，只是替代了placeholder的内容，申明<input>元素被复用了。

运用Vue.js供应的key属性，能够让你本身决议是不是要复用元素，key的值必需是唯一的。

<input type="text" placeholder="输入用户名" key="name-input">

给两个<input>元素都增加了key后，就不会复用了。切换范例时键入的内容也会被删除，不过<label>元素依然会被复用，由于没有增加key属性。

v-show

v-show的用法与v-if基础一致，只不过v-show是转变元素的CSS属性display。

当v-show表达式的值为false时元素会隐蔽，DOM构造元素上加载了内联款式display:none;。

v-show不能在<template>上运用。

v-if与v-show的挑选

v-if和v-show具有相似的功用，不过v-if才是真正的前提衬着，它会依据表达式适当地烧毁或重修元素及绑定的事宜或子组件。

若表达式初始值为false，则一最先元素/组件并不会衬着，只要当前提第一次变成真时才最先编译。

而v-show只是简朴的CSS属性切换，不管前提真与否，都会被编译。

相比之下，v-if更适合前提不常常转变的场景，由于它的切换开支相对较大，而v-show适用于频仍切换前提。

列表衬着指令v-for

基础用法

当须要将一个数组遍历或罗列一个对象轮回显现时，就会用到列表衬着指令v-for。它的表达式需连系in来运用，相似item in items的情势。

列表衬着也支撑用of替代in作为分隔符，它更靠近JavaScript迭代器的语法：

<li v-for="book of books">{{book.name}}</li>

v-for的表达式支撑一个可选参数作为当前项的索引。

<li v-for="(book,index) of books">{{index}} - {{book.name}}</li>

分隔符in前的语句运用括号，第二项就是books当前项的索引。

与v-if一样，v-for也能够用在内置标签<template>上，将多个元素举行衬着。

除了数组外，对象的属性也是能够遍历的。

遍历对象属性时，有两个可选参数，分别是键名和索引：

<div id="app">
    <ul>
        <li v-for="(value,key,index) of users">
            {{index}} - {{key}} - {{value}}
        </li>
    </ul>
</div>

v-for还能够迭代整数：

<div id="app">
    <span v-for="n in 10">{{n}}</span>
</div>

数组更新

Vue的中心是数据与视图的双向绑定，包括了一组视察数组变化的要领，运用它们转变数组也会触发视图更新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

运用以上要领会转变被这些要领挪用的原始数组。

以下要领不会转变原数组：

• filter()
• concat()
• slice()

它们返回的是一个新数组，在运用这些非变异要领时，能够用新数组来替代元素组。

Vue在检测到数组变化时，并非直接从新衬着全部列表，而是最大化地复用DOM元素。替代的数组中，含有雷同元素的项不会被从新衬着，因而能够斗胆勇敢地用新数组来替代旧数组，不必忧郁机能题目。

须要注重的是，以下更改的数组中，Vue时不能检测到的，也不会触发视图更新：

• 经由过程索引直接设置项，app.books[3]={}
• 修正数组长度，app.books.length=1

处理第一个题目能够用两种要领完成一样的结果，第一种是运用Vue内置的set要领：

Vue.set(app.books, 3, {
    name: '《CSS隐秘花圃》',
    author: '无名氏'
});

假如是在webpack中运用组件化的体式格局，默许是没有导入Vue的，这时候能够运用this.$set。

另一种要领：app.books.splice(3,1,{})

过滤与排序

假如不愿望转变原数组，想经由过程一个数组的副原本做过滤或排序的显现时，能够运用盘算属性返回过滤或排序后的数组。