方法1:视图定义在v1中
<div id="v1">
<h1>{{title}}</h1>
</div>
let vm1 = new Vue({
el:"#v1", //element 选择器 通过el指定vm1所管理的view的位置
data:{
title:"hello vue"
} //data 是用来在viewmodel中组织从页面上抽象出来的数据结构
})
注意:这种方法最简单,直接把data的数据渲染到页面中
方法2、使用模板template: 字符串的模式
<div id="v2"></div>
<template id="v2-view">
...
</template>
let vm2 = new Vue({
el:"#v2",
template:"#v2-view"
})
或者
template:"<div><h1>template view</h1></div>",
注意:这种方法是把数据放在template属性中,传到视图中进行渲染,而不用在从data中获取。
方法3、render vnode 的方式来创建 —vnode是从dom抽象出来的一个js对象
<div id="app"></div>
<script>
(function () {
new Vue({
el:"#app",
data:{},
methods:{},
render(createElement){
let tree= createElement("div",{},[
createElement("h1",{},"helloworld"),
createElement("p",{},"hello world vue vnode")
])
console.log(tree)
//<div>helloworld</div>
return tree;
}
})
})()
</script>
总体来说,这三种方法都学会了,视图定义基本就没问题了。。。
作者:@八度余温*
个人博客:https://mp.csdn.net/