正文
Vue版本2.5.13
不要在选项属性或回调上使用箭头函数
比如
-
created: () => console.log(this.a)
-
vm.$watch('a', newValue => this.myMethod())
因为箭头函数是和
父级上下文
绑定在一起的，
this
不会是如你所预期的
Vue
实例，经常导致
Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function
之类的错误
具体见:
这里
v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用
v-html
指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
具体见:
这里
计算属性缓存 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是
计算属性是基于它们的依赖进行缓存的
。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这个 计算属性是基于它们的依赖进行缓存的 是什么意思呢？
computed: {
now: function () {
return Date.now()
}
}
这里虽然
Date.now()
的值一直在变，但是他没有被
watch
，因为他不是响应式依赖。
具体见:
这里
CSS样式自动添加前缀
当
v-bind:style
使用需要添加浏览器引擎前缀的 CSS 属性时，如
transform
，Vue.js 会自动侦测并添加相应的前缀。
具体见:
这里
在
<template>
元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含
<template>
元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
具体见:
这里
v-if
和
v-show
和
v-for
-
v-if 是对页面元素的添加和移除操作
-
v-show 是对页面元素的显示和隐藏操作
-
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
具体见:
这里
数组更改检测注意事项
Vue 不能检测一下方式变动的数组，从而将不会触发视图更新
-
当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue
-
当你修改数组的长度时，例如：
vm.items.length = newLength
具体见:
这里
对象更改检测注意事项
Vue 不能检测对象属性的添加或删除
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
但是我们可以通过
Vue.set(object, key, value)
方法向嵌套对象添加响应式属性。
另外还有这个常用的方法
Object.assign()
，当我们想要为某个对象赋予
多个新属性
的时候，你应该这么玩
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
具体见:
这里
在
v-for
中使用
methods
方法
<li v-for="n in even(numbers)">{{ n }}</li>
具体见:
这里
组件使用
v-for
在自定义组件里，你可以像任何普通元素一样用
v-for
。
<my-component v-for="item in items" :key="item.id"></my-component>
具体见:
这里
.once
事件修饰符(2.1.4 新增)
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
.once
也可以使用在
自定义组件
上。
具体见:
这里
is
特性
由于dom某些元素本身的一些限制，
<ul>
、
<ol>
、
<table>
、
<select>
这样的元素里允许包含的元素有限制。
<div id="app">
<table>
<money></money>
</table>
</div>
Vue.component('txt',{
template: '<div>I like money!</div>'
})
new Vue({
el:'#app'
})
将会解析成下面的dom
<div id="app">
<div>I like money!</div>
<table></table>
</div>
如果想要解析正确，需要使用
is
这个属性。
<div id="app">
<table>
<tr is="money"></tr>
</table>
</div>
这样dom就解析正确了。
<div id="app">
<table>
<tbody>
<div>I like money!</div>
</tbody>
</table>
</div>
具体见:
这里
将对象的所有属性作为
prop
进行传递
如果你想把一个对象的所有属性作为
prop
进行传递，可以使用不带任何参数的
v-bind
(即用
v-bind
而不是
v-bind:prop-name
)。例如，已知一个
todo
对象：
todo: {
text: 'Learn Vue',
isComplete: false
}
然后:
