vue--render函数
2019-07-28 本文已影响0人
光头小青蛙
- 通常构建一个
vue
的项目,在开发环境搭建完成,开始写组件,大多数情况下构建每个组件的模板使用template
,但是vue
也推出了具有JavaScript
完全编程能力的渲染函数render
函数。
+使用render
函数,就不用在页面中写入template
,在js
文件中写入render
函数。
data() {
return {
text: "2222"
};
},
methods: {
clickFn(){
console.log("click")
}
},
render(h) {
return h("div", {
style: { backgroundColor: "#ccc", width: "200px", height: "200px" },//设置标签的样式
attrs: { id: "der", class: "ser" },//设置普通HTML的属性
props: {myprop: "bar"},//设置组件的属性
on:{//绑定事件
click:this.clickFn
},
ref:"tools"//设置ref
},[h("span",{})]);
}