<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Vue.2.6.10.js"></script>
</head>
<body>
<div id="app1">
<ele1 :show="show"></ele1>
<button @click="show = !show">切换show的值</button>
</div>
<div id="app2">
<ele2 :list='list'></ele2>
</div>
<div id="app3">
<ele3 :list='list'></ele3>
<button @click='handleClick'>显示列表</button>
</div>
<div id="app4">
<ele4></ele4>
</div>
<div id="app5">
<ele5></ele5>
</div>
<div id="app6">
<ele6>
<p>有我在，备用内容不会出现</p>
</ele6>
</div>
</body>
<script>
//在render函数中，不再需要也无法使用Vue的内置指令，如v-if、v-show，但均可通过原生js实现
//数据变化--render函数生成新的虚拟dom--更新
Vue.component('ele1',{
render(createElement) {
if(this.show){
return createElement('p','show的值为true');
}else{
return createElement('p','show的值为false');
}
},
props:{
show:{
type:Boolean,
default:false
}
}
});
var app1 = new Vue({
el:"#app1",
data:{
show:false
}
});
//使用for循环来实现v-for
Vue.component('ele2',{
render:function(createElement){
var nodes = [];
for(var i = 0;i<this.list.length;i++){
nodes.push(createElement('p',this.list[i]))
}
return createElement('div',nodes);
},
props:{
list:{
type:Array
}
}
});
var app2 = new Vue({
el:"#app2",
data:{
list:[
'book1',
'book2',
'book3'
]
}
});
//使用if、else、数组map方法配合来渲染一个列表
Vue.component('ele3',{
render:function(createElement){
if(this.list.length){
return createElement('ul',this.list.map(function(item){
return createElement('li',item);
}));
}else{
return createElement('p','列表当前为空')
}
},
props:{
list:{
type:Array,
default:function(){
return []
}
}
}
});
var app3 = new Vue({
el:"#app3",
data:{
list:[]
},
methods: {
handleClick:function(){
//点击后才会将项目添加到列表
this.list = [
'book11',
'book22',
'book33'
]
}
},
});
//实现v-model逻辑
Vue.component('ele4',{
render:function(createElement){
var _this = this;
return createElement('div',[
createElement('input',{
domProps:{
value:this.value
},
on:{
input:function(event){
_this.value = event.target.value;
}
}
}),
createElement('p','value: '+ this.value)
])
},
data() {
return {
value:''
}
},
});
var app4 = new Vue({
el:'#app4'
});
//所有的事件修饰符与按键修饰符同样需要自己实现
//.stop event.stopPropogation()
//.prevent event.preventDefault()
//.self if(e.target !== e.currentTarget)
//.enter .13 if(event.keyCode !== 13)
//.ctrl/.alt if(!e.ctrlKey/altKet)return
//.capture(!) .once(~)
//capture先执行父级事件再执行子级事件 self只执行子级事件
//模拟聊天发生内容场景
Vue.component('ele5',{
render:function(createElement){
var _this = this;
//渲染聊天内容列表
if(this.list.length){
var listNode = createElement('ul',this.list.map(function(item){
return createElement('li',item)
}));
}else{
var listNode = createElement('p','暂无内容');
}
return createElement('div',[
listNode,
createElement('input',{
attrs:{
placeholder:'回车发送'
},
style:{
width:'200px'
},
on:{
keyup:function(e){
if(e.keyCode != 13) return;
_this.list.push(e.target.value);
e.target.value = '';//发送成功清空输入框
}
}
})
])
},
data() {
return {
value:'',
list:[]
}
},
});
var app5 = new Vue({
el:"#app5"
});
Vue.component('ele6',{
render:function(createElement){
console.log(this.$slots.default);
if(this.$slots.default === undefined){
return createElement('div','备用内容')
} else {
return createElement('div',this.$slots.default);
}
}
});
var app6 = new Vue({
el:'#app6'
});
</script>
</html>
