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、插值
单词插值,只有在第一次渲染时候渲染值,之后不会随实例属性值的变化而改变
插入原始HTML,这种方式内容以 HTML 字符串插入,数据绑定将被忽略
如果需要复用模板片断,应当使用partials
注意:
在网站上动态渲染任意HTML是非常危险的,因为容易导致XSS攻击
4、v-show 和 v-if的选择
v-if:
v-if是惰性的,如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)
v-show:
相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于css切换
6、prop数据绑定
prop默认是单向绑定
当父组件的属性变化时,将传导给子组件,但是反过来不会
这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解
解决办法:
使用.sync或.once绑定修饰符显式地强制双向或单次绑定
即:
1.单向绑定(prop数据默认为单向绑定)
<child :msg="parentMsg"></child>
2.双向绑定
<child :msg.sync="parentMsg"></child>
3.单次绑定
<child :msg.once="parentMsg"></child>
7、组件的父链
子组件可以用this.$parent访问它的父组件
根实例的后代可以用this.$root访问它
父组件有一个数组this.$children,包含它所有的子元素
|
|