(原网址:http://blog.csdn.net/stronger_lxs/article/details/51321470)
1、响应式属性和方法
每个 Vue 实例都会代理其 data 对象里所有的属性。
var data={ a:1}
var vm=new Vue({data:data})
vm.a===data.a // -> true
//设置属性也会影响到原始数据
vm.a=2
data.a // -> 2
// ... 反之亦然
data.a=3
vm.a // -> 3
即:都可以使vm.xxx这种方式获取和修改实例属性。
注意:
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。
那么这种情况的话,可以使用VueJs的vm.$xxx的方式来修改实例属性,这同样会触发视图更新,响应式的改变。
2.生命周期钩子
生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
钩子的 this 指向调用它的 Vue 实例
我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念,组件的自定义逻辑可以分割在这些钩子里面。
3.插值
单词插值,只有在第一次渲染时候渲染值,之后不会随实例属性值的变化而改变,如:
<span>单词插值:{{*msg}}</span>
插入原始HTML,这种方式内容以 HTML 字符串插入,数据绑定将被忽略,如:
<div>{{{raw_html}}}</div>
如果需要复用模板片断,应当使用partials
注意:
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。记住,只对可信内容使用 HTML 插值,永不用于用户提交的内容。
4.v-show 和 v-if的选择
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
5.使用track-by,优化列表循环
因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM
元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用 track-by 特性给 Vue.js
一个提示,Vue.js 因而能尽可能地复用已有实例。
例如,假定数据为:
{ items: [ { _uid:'88f869d',...}, { _uid:'7496c10',...} ]}
然后可以这样给出提示:
<div v-for="item in items" track-by="_uid">
</div>
然后在替换数组 items 时,如果 Vue.js 遇到一个包含 _uid: ‘88f869d’ 的新对象,它知道它可以复用这个已有对象的作用域与 DOM 元素。
6.prop数据绑定)=
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
解决办法: 使用.sync或.once绑定修饰符显式地强制双向或单次绑定
1.默认为单向绑定
<child :msg="parentMsg"></child>
2.双向绑定
<child :msg.sync="parentMsg"></child>
3.单次绑定
<child :msg.once="parentMsg"></child>
7、组件的父链
子组件可以用this.$parent访问它的父组件。根实例的后代可以用this.$root访问它。父组件有一个数组this.$children,包含它所有的子元素。