1. demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> el与data</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h1> hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const v = new Vue({
//这是属于el的第一种简单写法
el: '#root',
// data这种写法属于对象式
// data: {
// name: zhangsan
// }
//data的第二种写法是函数式写法
// data: function () { //data函数不能够写成()=> 函数,一旦写了箭头函数就代表全局实例了
// console.log(this)
// return { name: "zhangsan" }
// }
// data: () => { //data函数不能够写成()=> 函数,一旦写了箭头函数就代表全局实例了
// console.log(this)
// return { name: "zhangsan" }
// }
//data函数也可以下面这样简写
data() {
console.log(this)
return { name: "zhangsan" }
}
})
//这是除了el的第二种写法: 先准备div容器,再准备vue实例,然后再关联 使用$mount关联
v.$mount('#root')
</script>
</body>
</html>