data与el的2种写法：
1.el有两种写法
(1).new Vue的时候配置el属性
(2).先创建Vue实例，随后再通过v.$mount('#root')指定el的值
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件的时候，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
el的两种写法
我们先把el注释掉，然后打印出Vue返回的实例对象，看看有些啥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
const v = new Vue({
// el: '#root',
data: {
name:'hello'
}
})
console.log(v);
</script>
</html>
执行结果：
我们可以看到控制台输出了很多的属性和方法，但是有一类属性和方法很特殊，他们都是以$开头的。那么所有红框里的东西，都是Vue为程序员准备好的，而下面拿下不带$的都不是给程序员用的，而是Vue自身的底层在使用。
我们输出的是Vue的实例对象，红框里的所有东西，都是Vue实例对象自身的。而我们接下来
要用的在实例创造者的原型对象上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
const v = new Vue({
// el: '#root',
data: {
name:'hello'
}
})
console.log(v);
v.$mount('#root')
</script>
</html>
执行效果：
我们可以看到使用v.$mount('#root')也可以实现和el一样的效果。那么这两种方式我们使用哪种都可以，只不过第二种会更灵活一点。我们可以再对数据进行完一系列的处理之后，再将数据挂载到容器上，而不是一开始就直接使用el绑定好。
data的两种写法
我们之前写的data都是写成json对象的形式，那就是我们的第一种写法
其实还有一种写法叫函数式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;
// const v = new Vue({
// // el: '#root',
// data: {
// name:'hello'
// }
// })
// console.log(v);
// v.$mount('#root')
new Vue({
el: '#root',
//data的第一种写法，对象式
/* data: {
name:'hello'
} */
//data的第二种写法：函数式
data:function(){
return{
name:'hello'
}
}
})
</script>
</html>
我们看到第二种写法之后肯定会想，还是第一种简单，以后都用第一种好了
但是这里我们就得说一下，像上面el的两种写法真的是哪种都可以用，但是data的两种写法，我们这里要注意等以后我们学习到组件的时候，必须使用这种麻烦的函数式，而不能使用对象式。
接下来我们看一下第二种写法中的this对象是什么？我们打印一下
new Vue({
el: '#root',
//data的第一种写法，对象式
/* data: {
name:'hello'
} */
//data的第二种写法：函数式
data:function(){
console.log(this);
return{
name:'hello'
}
}
})
我们可以看到这里打印出的是Vue实例对象。
这里我们要注意，这个this对象是Vue实例对象的前提是建立在这个函数是普通函数。
如果我们使用箭头函数，我们可以看一下：
new Vue({
el: '#root',
//data的第一种写法，对象式
/* data: {
name:'hello'
} */
//data的第二种写法：函数式
data:()=>{
console.log(this);
return{
name:'hello'
}
}
})
我们可以看到this对象变成了全局的window,这是因为箭头函数没有自己的this就会往外找，从而找到了全局的window。
所以我们就要注意，我们在用data的第二种写法的时候，一定要用普通函数。
下面这样的写法也是普通函数：
new Vue({
el: '#root',
//data的第一种写法，对象式
/* data: {
name:'hello'
} */
//data的第二种写法：函数式
data(){
console.log(this);
return{
name:'hello'
}
}
})
