Render函数与VDOM

一、x-template：这是一种组件模板的书写方式。

1. 在HTML文档中书写x-template模板内容：

	<script type="text/x-template" id="xyz">
	   <div></div>
	</script>

2. 在index.js文件中定义组件：

	Vue.component('my-com',{
	    template:"#xyz"
	})

二、利用Render函数书写组件模板：

1. 利用render函数书写组件模板，则组件中不再需要template选项。
2. 语法格式：

	Vue.component('my-com',{
	    render:function(createElement){
	      return createElement(参数1,参数2,参数3);
		}
	})

1. 参数1：必选项。
   格式：（1）HTML标记名称的字符串；（2）已有组件名称的字符串；（3）函数。

2. 参数2：选填项。
   格式：{object}
   键名：class、style、attrs、domProps、on、props。
   含义：类名、内置样式、HTML属性、JS属性、事件、向已有组件传递参数。

3. 参数3：选填项。设置参数1的主标记对内部的子节点。
   格式：（1）字符串；（2）数组。

三、createElement()函数的使用：

1. 例1：创建一个空<div>作为组件的模板。

	render:function(createElement){
	   return createElement('div');
	}

2. 例2：创建一个带有文本内容的<p>作为组件模板。

	return createElement('p','我是一个段落');

3. 例3：使用参数2创建带有属性的<div>作为组件模板。

	return createElement('div',{
        class:{ sty01:true },
        style:{ borderRadius:'20px'},
        attrs:{ id:'box',title:'红色'},
        domPorps:{ textContent:'文本内容',contentEditable:true }
        on:{
          mouseover:function(event){
             event.target.backgroundColor=‘#ff5857’;
		  }
		}
	})

四、使用JavaScript代替模板功能：

1. 起因：利用render函数实现的组件模板不能使用Vue指令。
2. v-if、v-else、v-for指令必须使用JavaScript的if-else、for、map()、for-in等代码实现。

例：当list数组中的元素>3个时，遍历出所有的内容并显示，否则提示内容不足。
	template:` 
		<div class="com">
			<div v-if="list.length>3">
				<ul>
					<li v-for="(item,index) in list">{{item}}</li>
				</ul>
			</div>
			<div v-else>
				<p>数据内容不足</p>
			</div>
		</div>
	   `
利用render函数完成上述模板：
	render:function(createElement){
		var obj;
		if(this.list.length>3){	
			obj=createElement('ul',this.list.map(function(item){
				return createElement('li',item);
			}))
		}else{
			obj=createElement('p','数据内容不足');
		}
		return createElement('div',{
			class:{
				com:true
			}
		},[obj])
	}
 3、v-model
	template:`<input type=“text” :value=“temp” @input=“txtInput” />`
	methods:{
	    txtInput:function(event){
	       this.$emit(“custom”,event.target.value)
		}
	},
	props:[‘temp’]
	
	render:function(createElement){
		var _this=this;
	    return createElement(‘input’,{
      		domProps:{ value:this.temp },
      		  on:{
		        input:function(event){
		          _this.$emit(‘custom’,event.target.value);
				}
			}
		})
	}

五、实例：制作一个可以排序的表格组件

1. 表格数据：学生(姓名,年龄,出生日期,家庭住址)，可排序字段：年龄、出生日期。
2. 组件的render函数格式：

	render:function(h){
	   var ths=[],trs=[];
	   //向ths和trs中填充数据
	   return h(‘table’,[
		   h('thead',[h('tr',ths)]),
		   h('tbody',trs)
		])
	}

3. 数据的来源：父组件。
   theadData:[]，包括表头文本、哪个字段可以排序
   tbodyData:[{},{},{},{}]

4. asc-升序 desc-降序