vue中template的三种写法

第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.

第二种:直接写在template标签里,这种写法跟写html很像.

第三种:写在script标签里,这种写法官方推荐,vue官方推荐script中type属性加上”x-template”,即:

vue定义data的三种方式与区别

在vue中，定义data可以有三种写法。

1.第一种写法，对象。

1
2
3
4
5
6

var app = new Vue({
　　el: '#yanggb',
　　data: {
　　　　yanggb: 'yanggb'
　　}
})

2.第二种写法，函数。

1
2
3
4
5
6
7
8

var app = new Vue({
　　el: '#yanggb',
　　data: function() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

3.第三种写法，函数，是第二种写法的ES6写法。

1
2
3
4
5
6
7
8

var app = new Vue({
　　el: '#yanggb',
　　data() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

两种创建vue实例的区别

第一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    })
    app.msg=123;
    console.log(app) ;
</script>

第二个例子

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    })
    app.msg=123;
    console.log(app) ;
</script>

这两个例子在页面渲染上是没有差别的,但是在控制台输出的console.log(app)是有差别的

第一个是一个vue实例

1

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}

第二个仅仅是一个DOM对象

1

<div id="app'>Hello Vue</div>

如果dom元素的id没有和js内置对象重名，或者没有被重写，那么这个id的“变量”是指向这个dom元素的。即：不对app进行重新赋值，则app指向dom元素。由于第一种方法对app重新赋值，所以app指向了Vue对象。

另外，这样的也会有类似的效果