Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
详细可参考vue官方文档
1.template写法
此处省略html结构，参考下一步
<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.render函数的createElement()介绍
Render 函数通过 createElement 参数来创建 Virtual Dom ，createElement 构成了 Vue Virtual Dom 模板，它有3个参数：
- 第一个参数必选，可以是 HTML 标签，也可以是 个组件或函数；
- 第二个是数据对象，可选参数，在 template 中使用。
- 第三个是子节点，也是可选参数，用法一致。
下面是render函数的详细写法：
<!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>