指定模板
Vue实例的模板在Vue实例的选项·template·中定义,属性值的本质是一个字符串,如果组件的template过长难以阅读,可以将模板写在script标签中,或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。
下面的例子中,根实例没有指定模板,不指定模板的情况下挂载点内部的内容就是其模板
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('MyComponent', {
data () {
return { message: 'Hello Vue!' }
},
template: '<div><p>{{ message }}</p></div>'
})
new Vue({
el: '#app'
})
</script>
1、字符串模板
通过template选项指定字符串作为模板,见上
2、 template选项指定模板字符串
通过template选项指定ES6的模板字符串作为模板
template: `<div>
<p>{{ message }}</p>
</div>`
3、X-Templates
script标签中设置type为text/x-template,配置id属性;在template选项指定script标签的id。
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="template">
<div>
<p>{{message}}</p>
</div>
</script>
<script>
Vue.component('MyComponent', {
data () {
return { message: 'Hello Vue!' }
},
template: '#template'
})
new Vue({
el: '#app'
})
</script>
4、内联模板(Inline Templates)
在内联模板中添加inline-template属性来告诉Vue,里面的内容就是模板,这种方式无需显示的配置template选项
<div id="app">
<my-component inline-template>
<div>
<p>{{message}}</p>
</div>
</my-component>
</div>
<script>
Vue.component('MyComponent', {
data () {
return { message: 'Hello Vue!' }
}
})
new Vue({
el: '#app'
})
</script>
单文件组件
单文件组件是把组件写到单独的.vue 文件中,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件。
由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析,如在webpack构建的应用中,需要安装vue-loader 对.vue文件进行解析,webpack会解析生成对应的 javascript、html、css 。
MyComponent.vue
<template>
<div>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
data () {
return { message: 'Hello Vue!' }
}
}
</script>
<style>
</style>
Vue官方提供的一个脚手架工具vue-cli ,生成的项目模板,就是采用的单文件组件。
render函数
render函数直接用js语言来构建虚拟DOM( VNode)。它接收一个 createElement 函数作为参数,render函数的返回值是VNode,也就是我们要渲染的虚拟节点。
createElement函数有三个参数:
序号 | 类型 | 说明 |
---|---|---|
1 | {String / Object / Function} | 必填项,一个 HTML 标签名、组件选项对象,或者,resolve 了上述任何一种的一个 async 函数 |
2 | {Object} | 一个与模板中属性对应的数据对象,可选 |
3 | {Array / String} | 由 createElement()构建而成子级虚拟节点 (数组),或使用字符串来生成“文本虚拟节点”。可选 |
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('MyComponent', {
data () {
return { message: 'Hello Vue!' }
},
render: function (createElement) {
return createElement(
'div',
[
createElement('p', this.message)
]
)
}
})
new Vue({
el: '#app'
})
</script>
createElement可以简写为h,render函数可以用ES6语法进行简写
render: h => h(
//...
)
使用JSX语法
用render函数createElement() 构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法,浏览器不认识不能识别JSX语法,需要babel插件的帮助,如果使用的 Vue-cli 大于或等于 3.0 版本,安装了babel,会自动支持JSX语法。
下面是在Vue cli构建的应用中的一个单文件组件
<script>
export default {
data () {
return { message: 'Hello Vue!' }
},
render: function (h) {
return (
<div>
<p>{this.message}</p>
</div>
)
}
}
</script>
JSX是React发明的一种JavaScript的语法扩展,有其特定语法规则
在Vue 中使用 JSX 语法