Vue 两个版本的区别
完整版:
对应的文件名:vue.js ,vue.min.js
支持从html获取视图
支持template
有compiler编译器
非完整版:
对应的文件名:vue.runtime.js ,vue.runtime.min.js
不支持从html获取视图
不支持template,需要通过vue-loader 将组件中的template模板编译为render函数
没有compiler编译器,体积会比完整版小30%
template的用法
第一种方式:
new Vue({
el: "#app",
template: `
<div>
<div>文本1</div>
<div>文本2</div>
<div>文本3</div>
</div>
`
})
需注意的是,template中至少要有一个根元素,不能是纯文本,否则会报错
new Vue({
el: "#app",
template: '文本'
})
如果存在多个同级元素,没有根元素时,只会显示第一个元素
new Vue({
el: "#app",
template: `
<div>文本1</div>
<div>文本2</div>
<div>文本3</div>
`
})
第二种方式:
<template id="demo1">
<h2>标签模版2</h2>
</template>
new Vue({
el: "#app",
template: '#demo1'
})
第三种方式:
<script type="x-template" id="demo2">
<h2 style="color:red">标签模板3</h2>
</script>
new Vue({
el: "#app",
template: '#demo2'
})
render的用法
new Vue({
el: "#app",
render: function (h) {
return h(
'div',
{
class: { 'style1': true, 'style2': true },
style: { color: '#fff', background: 'red' },
on: {
click: function () {
console.log('render函数')
}
}
},
['元素文本', h('div', '子元素文本')]
)
}
})
render函数有一个回调函数
该函数有3个参数
第一个参数:可以是一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数,必填,类型:{String | Object | Function}
第二个参数:包含模板相关属性,用于设置模板元素的属性或者事件,可选,类型:{Object}
第三个参数:设置模板元素文本,或者创建子节点 类型:{String | Array}
用 codesandbox.io 写 Vue 代码
点击Create a Sandbox, it’s free按钮
选择vue即可