关于如何学习Vue，Vue的缔造者尤雨溪前辈曾经在知乎发表过一篇新手向：Vue 2.0 的建议学习顺序。
笔者推荐使用Vscode进行Vue项目开发，相比Webstorm，Vscode界面简单，运行时占用体积小。
篇幅二
篇幅三
篇幅四
1. 计算属性和观察者
- 计算属性：
computed
Vue推荐任何复杂的数据逻辑，都应当使用计算属性。
原因如下：
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 - 观察者：
watch
Vue 通过 watch 选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
2. Class和style绑定(:class 和 :style)
- 绑定内联样式时，属性名需要使用驼峰值，并且单位需要使用单引号，例如：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
个人觉得没有直接写内联样式方便，可能是还不习惯，但是绑定内联样式时，Vue会为属性自动添加前缀！！！
所以Vue推荐直接绑定一个样式对象通常更好，让模板更清晰。绑定Class也一样。
3. 条件渲染
- v-if、v-else、v-else-if
v-else，v-else-if必须紧跟在v-if或者v-else-if元素之后。
Vue 会尽可能高效地渲染元素，通常会复用。
当你不想复用元素时，只需添加一个具有唯一值的 key 属性即可已有元素而不是从头开始渲染。如：
<input placeholder="Enter your email address" key="email-input"> - v-if vs v-show
v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
4. 列表渲染
-
v-for
v-for遍历数组时，接受两个参数
<li v-for="(item, index) in items" :key="item.id">
v-for遍历对象时，接受三个参数
<li v-for="(value, key ,index) in objects :key="item.id""
注：使用v-for时，你需要为每项提供一个唯一key属性。
理想的 （尽可能的使用v-for提供id）key 值是每项都有的且唯一的 id(如上面)。key并不与v-for特别关联，key还具有其他用途。 - 数组检测跟新
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push(),pop(),shift(),unshift(),splice(),sort()和reverse()
相比之下，也有非变异方法，例如：filter(),concat()和slice()。
注意：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和vm.items[indexOfItem] = newValue相同的效果，同时也将触发状态更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用splice()：
example1.items.splice(newLength) - 对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set实例方法，它只是全局Vue.set的别名：this.$set(this.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性，比如用 Object.assign()
或_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
网友评论