vue 学习注意事项

一：插值方式：

1：数据绑定，最多见的形式就是使用 “Mustache” 语法（双大括号）的文本插值 <span>Message: {{ msg }}</span>  经过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

2：属性绑定，属性插值使用v-bind指令，Mustache {{}}不能在 HTML 属性中使用，应使用 v-bind 指令

3：全部的数据绑定， Vue.js 都提供了彻底的 JavaScript 表达式支持,仅限单个表达式。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

有个限制就是，每一个绑定都只能包含单个表达式，js语句及流控制不会生效：如

<!-- 这是语句，不是表达式 -->   {{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->   {{ if (ok) { return message } }}

4：指令

指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

<p v-if="seen">Now you see me</p>

v-if 指令将根据表达式  seen 的值的真假来移除/插入  <p> 元素，（有点相似于visible）

< a v-on:click="doSomething">

  v-on 指令，它用于监听 DOM 事件： 参数是监听的事件名

 

二：过滤器：filters

被用做一些常见的文本格式化。过滤器能够用在两个地方：mustache{{}} 插值和 v-bind 表达式

{{ message | capitalize }}

过滤器函数总接受表达式的值做为第一个参数。

new Vue({

// ...

filters: {

　　capitalize: function (value) {   //参数value是message的值

　　　　if (!value) return ''

　　　　value = value.toString()

　　　　return value.charAt(0).toUpperCase() + value.slice(1)

　　}

}

})

过滤器是 JavaScript 函数，所以能够接受参数：

{{ message | filterA('arg1', arg2) }}
这里，字符串 'arg1' 将传给过滤器做为第二个参数， arg2 表达式的值将被求值而后传给过滤器做为第三个参数，message是默认的第一个参数。

三：缩写：

v-bind 缩写 ：  

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on 缩写 @

<!-- 完整语法 -->

<a v-on:click="doSomething"></a> 

<!-- 缩写 -->

<a @click="doSomething"></a>

 

四： 计算属性 computed  

computed  之前的名字叫作ready是在dom加载后立刻执行的。

对于任何复杂逻辑，你都应当使用计算属性， 计算属性须要借助“缓存”。

发现，计算属性能够经过调用表达式中的 method 来达到一样的效果。若是你 不但愿有缓存，请用 method 替代。

区别：计算属性是基于它们的依赖 进行缓存的 。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要  message 尚未发生改变，屡次访问  reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数

计算属性默认只有 getter ，不过在须要时你也能够提供一个 setter

一般更好的想法是使用 computed 属性而不是命令式的 watch 回调

watch 属性：用来观察和响应 Vue 实例上的数据变更。 （检测data数据变更） 

想要在数据变化响应时，执行 异步操做或开销较大的操做，用watch是颇有用的.

 

五：Class 与 Style 绑定

绑定HTML的class

1 、能够传给  v-bind:class 一个 对象，以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div> 表示 class   active 的更新将取决于 数据属性 isActive 是否为真值 。

二、也能够在对象中传入更多属性用来动态切换多个 class ,         v-bind:class="{ active: isActive, 'text-danger': hasError }"

三、也能够直接绑定 数据里的一个对象   <div v-bind:class="classObject"></div>

data: { classObject: {

active: true,

'text-danger': false

}}

四、也可绑定返回对象的计算属性

data: { isActive: true, error: null},

computed: {

classObject: function () {

return {

　　active: this.isActive && !this.error,

　　'text-danger': this.error && this.error.type === 'fatal',

}}}

 

五、能够把一个数组传给  v-bind:class ，以应用一个 class 列表  < div v-bind:class="[activeClass, errorClass]">

 

v-bind:class用在组件上：

当你在一个定制的组件上用到  class 属性的时候，这些 类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。

绑定内联样式 v-bind:style

 CSS 属性名能够用驼峰式（camelCase）或短横分隔命名（kebab-case）： <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接绑定到一个样式对象一般更好

<div v-bind:style="styleObject"></div>

data: { styleObject: {

color: 'red',

fontSize: '13px'}}  一样的，对象语法经常结合返回对象的 计算属性使用。

v-bind:style 的数组语法能够将多个样式对象应用到一个元素上：< div v-bind:style="[baseStyles, overridingStyles]">

 

六：v-if vs v-show

v-if 是“真正的”条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建

v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

通常来讲， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不太可能改变，则使用 v-if 较好。

v-show 是简单地切换元素的 CSS 属性 display 。

v-if支持 <template> 语法

注意， v-show 不支持 <template> 语法，也不支持 v-else。

v-if 与 v-for 一块儿使用，当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。

七：列表渲染 v-for 

 v-for 块中，咱们拥有对父做用域属性的彻底访问权限。 v-for 还支持一个可选参数，最后一个参数为当前项的索引。

<ul id="example-2">
　　<li v-for="(item, index) in items">
　　　　{{ parentMessage }} - {{ index }} - {{ item.message }}
　　</li>
</ul>

var example2 = new Vue({

　　el: '#example-2',

　　data: {

　　　　parentMessage: 'Parent',

　　　　items: [

　　　　　　{ message: 'Foo' },

　　　　　　{ message: 'Bar' }

　　　　]

　　}

})

也能够用 of 替代 in 做为分隔符。 <div v-for="item of items"></div>

v-for 迭代模块：也能够用带有 v-for 的 <template> 标签来渲染多个元素块

v-for 迭代对象：

data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30}}

<li v-for="value in object">{{ value }} </li>    会列出 John  Doe   30

<div v-for="(value, key) in object">{{ key }} : {{ value }} </div>   会列出 :      FirstName: John             LastName: Doe              Age: 30

<div v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }} </div>  也可输出最后一个参数index

v-for 迭代整数：<span v-for="n in 10">{{ n }}</span>    输出：12345678910

数组更新检测

变异方法：执行这些方法它们也将会触发视图更新  push()pop()shift()unshift()splice()sort()reverse()

重塑数组：有些方法是非变异方法，不会触发视图更新，这时候须要重塑数组来触发视图更新，即从新给数组赋值。如： filter(), concat(), slice()

注意事项

Vue 不能检测如下变更的数组：

1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue  解决方法：能够用Vue.set(example1.items, indexOfItem, newValue)或example1.items.splice(indexOfItem, 1, newValue)替换
2. 当你修改数组的长度时，例如： vm.items.length = newLength  解决方法：也一样可使用 splice：example1.items.splice(newLength)替换

显示过滤/排序结果

想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种状况下，能够建立返回过滤或排序数组的计算属性。