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创建出错时,执行该函数