三.Vue.js实例属性选项-Dom操作

Vue创建实例参数对Dom进行操作的属性有 el、template、render、renderError

// template
var vm = new Vue({
    el: '#app',
    template: '<div>hello,我是小虫！</div>',
})；


// render
// 应用场景:
// 根据后端数据做输入类型标签填充，如radio，select，checkbox
// 渲染表格数据

// render的参数:
// 第一个参数：填充的标签；
// 第二个参数：{class: '',style:'',attrs:'',on:{click:()=>{}绑定事件};
// 第三个参数：内容，可以对元素的数据进行处理,那就是可以使用方法处理数据

var vm = new Vue({
    el: '#app',
    render: (h, item) => {
		return h("div", { 
		    class: "render-demo",
		    style: {
			    color: '#ff4d4d'
		    },
		    attrs: {
			    title: "render"
		    },
		    on: {
			    click: () => {}
		    }
		}, ['你好render！我是小虫！']);
	},
})；

1. el：Vue实例挂载的目标元素，简单理解为Vue实例在哪个内容块内起效

2. template：替换el元素dom，使用template模板dom

3. render：通过createElement参数来创建虚拟dom，作用跟template一样。简单理解为要使用javascript创建dom，应用场景为大量重复代码，如下：

4. renderError：当render创建出错时，执行该函数