vue onload传参 赋值_vue学习
51、v-model双向绑定的原理是什么?采用数据劫持结合发布者-订阅者的模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter,数据变动的时候发布消息给订阅者,触发相应的监听回调。(1)、需要Observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter、getter,这样给某个对象的值赋值,就会触发setter,监听到数据的变
51、v-model双向绑定的原理是什么?
采用数据劫持结合发布者-订阅者的模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter,数据变动的时候发布消息给订阅者,触发相应的监听回调。
(1)、需要Observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter、getter,这样给某个对象的值赋值,就会触发setter,监听到数据的变化。
(2)、Compile解析模板的指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定到更新函数中,添加监听数据的订阅者,一旦数据变动,收到通知,更新视图。
(3)、Watcher订阅者是Observer和Compile之间通信的桥梁
(4)、MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
2、vue生命周期的理解?
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
3、原文链接
vue extend 的基本使用www.cnblogs.com
vue extend创建的是一个组件构造器,而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用: new Vue({components: fuck})
最终还是要通过Vue.components注册才可以使用的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>
<script>
/**
* 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例。
* 所以他不能直接在new Vue中这样使用: new Vue({components: fuck})
* 最终还是要通过Vue.components注册才可以使用的。
*/
// 构建一个子组件
var todoItem = Vue.extend({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
})
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
})
// 注册到全局
Vue.component('todo', todoWarp)
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>
vue.extend 局部注册
请注意,在实例化extends组件构造器时,传入属性必须是propsData、而不是props哦
另外,无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象,如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧,如 new Vue({data: {}});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="todoItem"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>
<script>
// 局部注册组件
var todoItem = Vue.extend({
data: function () {
return {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
},
template: `
<ul>
<li v-for='(d, i) in todoData' :key="i">
{{ d.text }}
</li>
</ul>
`
});
// 请注意,在实例化extends组件构造器时,传入属性必须是propsData、而不是props哦
new todoItem({
propsData: {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
}).$mount('#todoItem')
</script>
</html>
4、路由传参 以及子路由的跳转
owen7201:(八)vue-router子路由、参数zhuanlan.zhihu.com5、事件修饰符
表单 lazy number trim
.stop
阻止单击事件继续传播.prevent
阻止事件默认行为.capture
元素自身触发的事件先在此处理,然后再交由内部元素处理.self
当前元素自身时触发处理函数.once
事件只执行一次.passive
滚动事件的默认行为就会立即触发
更多推荐
所有评论(0)