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 是否为真值 。

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

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

data: {classObject: {

active: true,

'text-danger': false

}}

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

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

computed: {

classObject: function () {

return {

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

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

}}}

 

5、可以把一个数组传给 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)替换

显示过滤/排序结果

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