02vue视图的定义

方法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/