<!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">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<!--
data与el的两种写法
1.el的两种写法
（1）.new Vue()配置el属性 {el:'#root'}
（2）.先创建Vue实例化对象，利用 对象.$mount('#root')指定el值。
2.data的两种写法
（1）.对象式
（2）.函数式
如何选择：目前皆可，组件必须用函数式，否则报错。
3.重要原则：
由Vue管理的函数，一定不要写箭头函数，this指向问题。
-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false;
// 两种绑定数据的方式
// 1.方式一：用$mount绑定
// const v = new Vue({
// data: {
// name: '无业游民',
// }
// })
// console.log(this);
// v.$mount('#root');
// 2.方式二：用el绑定
// data()是data: function()的简写
// 由vue管理的函数，不能用箭头函数来代替data: function()，否则this指向的就是外层的window而不是Vue实例了
const v = new Vue({
el: "#root",
data(){
console.log("@@@",this);
return {
name: '无业游民'
}
}
})
</script>
</body>
</html>
