（五）Vue之data与el的两种写法

Vue学习目录

上一篇：（四）Vue之数据绑定

下一篇：（六）Vue之MVVC

容器：

	<div id="root">
        <h1>hello,{{name}}</h1>
    </div>
1
2
3

el的两种写法

• (1).new Vue时候配置el属性。

	new Vue({
            el:'#root',
            data:{
                name:'jack'
            }
        });
1
2
3
4
5
6

• (2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
  比较灵活，mount翻译为挂载，可以不在页面加载的时候绑定容器，想要过几秒再绑定容器就可以使用mount

经过3秒挂载：

	const v = new Vue({
            //el:'#root',
            data:{
                name:'jack'
            }
        });
        setTimeout(() => {
            v.$mount('#root')
        },3000)
1
2
3
4
5
6
7
8
9

效果：一开始没有挂载，页面显示{{name}}，经过三秒后，页面解析，显示jack
没有经过3秒：

经过3秒：

data的两种写法

• (1).对象式

	new Vue({
            el:'#root',
            data:{
                name:'jack'
            }
        });
1
2
3
4
5
6

• (2).函数式
  函数式写法，这个函数有要求，必须返回一个数据，这个数据就是data的数据。

	new Vue({
            el:'#root',
            data:function (){
                return{
                    name:'jack'
                }
            }
        });
1
2
3
4
5
6
7
8

这个函数式写法一般会简写：

	new Vue({
            el:'#root',
            data(){
                return{
                    name:'jack'
                }
            }
        });
1
2
3
4
5
6
7
8

注意1：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
注意2：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。这是因为在箭头函数里是没有this的，会向外寻找this
例如：data普通函数和箭头函数this比较
普通函数：

	 new Vue({
            el:'#root',
            data(){
                console.log(this)
                return{
                    name:'jack'
                }
            }
        });
1
2
3
4
5
6
7
8
9

箭头函数：

	new Vue({
            el:'#root',
            data:()=>{
                console.log(this)
                return{
                    name:'jack'
                }
            }
        });
1
2
3
4
5
6
7
8
9

普通函数效果：

箭头函数效果：