5.vue2.x之vue2.x的选项 / DOM

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')