伟大的人，是不断学习的人
第一部分： v-model的实现原理
v-model 是我们使用非常多的指令，那么我们有没有想过如何去实现它呢
vnode:Vue 编译生成的虚拟节点.
vnode.context,应用上下文,指的是调用指令的实例.如本案例中指#app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input v-if="flag" type="text" v-josson="age">
<h1>{{age}}</h1>
</div>
</body>
<script>
Vue.directive("josson",{
inserted:function(el,binding,vnode){
el.value=binding.value;
console.log(vnode)
el.addEventListener("input",function(){
vnode.context[binding.expression]=this.value;
})
},
update:function(el,binding){
el.value=binding.value
}
})
var app=new Vue({
el:"#app",
data:{
age:"josson",
flag:true
}
})
</script>
</html>
第二部分：数据通信之解耦及实现原理.sync
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<josson :count.sync="num"></josson>//.sync
<josson :count="num" @update:count="num=arguments[0]"></josson>//自定义的
</div>
</body>
<script>
Vue.component("josson",{
props:["count"],
template:"<h1 @click='change'>{{count}}</h1>",
methods:{
change:function(){
this.$emit('update:count',50)
}
}
})
var app=new Vue({
el:"#app",
data:{
num:10
}
})
//1.给需要双向绑定的属性加上.sync修饰符
//2.当子组件触发更改的时候，需要显式触发update:+props属性;
</script>
</html>
第三部分：内容分发及其作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<jos>
<span slot-scope="props">
{{props.v}}
</span>
</jos>
</div>
</body>
<script>
Vue.component("c",{
props:["name"],
template:"<button>{{name}}</button>"
})
Vue.component("jos",{
data:function(){
return{
name:"jos"
}
},
template:"<h1>hello <slot :v='name'></slot></h1>"
})
var app=new Vue({
el:"#app",
data:{
name:"son"
}
})
</script>
</html>
