vue2.x之vue2.x的选项 / DOM
el
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
直接挂载
//挂载到页面中id为#app的dom上
new Vue({
el: '#app',
....
})
延迟挂载
new Vue({
//延迟挂载,效果同上
....
}).$mount('#app')
在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
template
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
三种写法
字符串模板
new Vue({
....,
template:`<div>字符串模板</div>`
}).$mount('#app')
template标签
//html
...
<template id="tem">
<div>模板</div>
</template>
...
//script
<script>
new Vue({
....,
template:`tem`
}).$mount('#app')
</script>
script中
//html
...
<script type="x-template" id="tem">
<div>模板</div>
</script>
...
//script
<script>
new Vue({
....,
template:`tem`
}).$mount('#app')
</script>
render
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
官方示例:
情景:动态生成标题 (heading) 的组件时
用模板
//html
...
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
......
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
...
//script
<script>
...
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
...
</script>
用render函数渲染
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
很明显,代码精简了很多
render函数的参数:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象,或者
// resolve 了上述任何一种的一个 async 函数。必填项。
‘div’,
// {Object}
// 一个与模板中属性对应的数据对象。可选。
{
// (详情见下一节)
//如
{
style: {
color: ‘#333’,
border: ‘1px solid #ccc’
}
},
// {String | Array}
// 子级虚拟节点 (VNodes),由createElement()
构建而成,
// 也可以使用字符串来生成“文本虚拟节点”。子元素数组,可选。
[
‘先写一些文字’,
createElement(‘h1’, ‘一则头条’),
createElement(MyComponent, {
props: {
someProp: ‘foobar’
}
})
]
)
renderError
当 render 函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。
官方示例:
new Vue({
render (h) {
//抛出错误
throw new Error('oops')
},
renderError (h, err) {
//接受渲染错误
return h('pre', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')