<!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>el和data的两种写法</title>
</head>
<body>
<div id="root">
<h1>你好,{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.procuctionTip = false;
const vm = new Vue({
// el: '#root',第一种写法
// data的第一种写法：对象式
// data: {
// name: '小阿牛'
// }
//data的第二种写法：函数式
data () {
console.log(this);
//该方法是vue调用，此处的this是vue实例对象，如果写成箭头函数，则this指向window.
return { name: '小阿牛' }
}
});
console.log(vm);
vm.$mount('#root');//第二种写法
</script>
</body>
</html>
知识点
el和data的两种写法：
1:el的两种写法：
（1）：可以在new Vue创建vue实例的时候，指定el属性的值。
（2）：可以在创建vue实例之后，通过vm.$mount('#root')指定el的值。
2：data的两种写法：
（1）：写成对象的形式；
（2）：写成函数的形式；使用组件的时候，需要写成函数形式。
注意：由vue管理的函数一定不要写成箭头函数，否则，this指向的就不是vue实例了。
打印一下vue的实例，以$开头的都是开发者可以使用的。
vue实例.png
