Vue recommends using templates to create your HTML in most cases. In some scenarios, however, you really need the full programming capabilities of JavaScript. At this point you can use render functions, which are closer to the compiler than templates.
For details, please refer to the official document of vue
1. Template writing method
The html structure is omitted here, refer to the next step
<script type="text/javascript">
vue.component('ele',{
template: '<div id="element" :class="{show:show}" @click="handleClick">标签内的文本内容</div>',
data() {
return {
show:true
}
},
methods: {
handleClick() {
console.log('clicked !');
}
}
})
var vm = new Vue({
// 管理边界->选取目标
el:'#app',
// data 存放数据
data:{
name:'测试',
}
})
</script>
1. Introduction to createElement() of the render function
The Render function creates a Virtual Dom through the createElement parameter, and createElement constitutes a Vue Virtual Dom template, which has 3 parameters:
- The first parameter is required, it can be an HTML tag, or a component or function;
- The second is a data object, an optional parameter, used in the template.
- The third is a child node, which is also an optional parameter, and its usage is consistent.
The following is the detailed writing of the render function:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ele></ele>
</div>
<script type="text/javascript">
Vue.component('ele',{
render: function(createElement) {
// console.log(createElement);
return createElement(
// 第一个参数 html标签 也可以是组件 或 函数
'div',
//第二个参数 数据对象
{
style: {
background: "#Ccc", width: "500px" },
attrs: {
// 普通html属性
id: 'element',
class: 'style'
},
on: {
// 给div绑定click事件
click: this.handleClick
},
class: {
// 动态绑定class
'show': this.show
},
// props: { // 组件props
// myprops: 'bar'
// }
},
'文本内容',
// 第三个参数 子节点 （需去掉父节点里面的文本内容）
// [
// createElement(
// "Button", {
// style: { background: "red" },
// on: {
// click: () => {}
// }
// }, "查看"
// ),
//]
)
},
data() {
return {
show:true
}
},
methods: {
handleClick() {
console.log('clicked !');
}
}
})
var vm = new Vue({
// 管理边界->选取目标
el:'#app',
// data 存放数据
data:{
name:'测试',
}
})
</script>
</body>
</html>