vue-day03--el与data的二种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>el与data的二种写法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>你好{{name}}</h1></div>
</body>
<!--
el与 data的二种写法
1.el 有2种写法
1） new Vue 的时候配置el属性
2） 先创建Vue实例 随后在通过 vm.$mount('#root') 指定el的值
2.data 有2种写法
1）对象式
2）函数式 简写 data {}
如何选择 目前哪种写法都可以，以后组件的时候，data 必须函数式否则就会报错
3. 一个重要的原则
由vue 管理的对象 一定不要写成箭头函数，一旦写了箭头哈书，this就不是vue实例了而是window 对象
-->
<script type="text/javascript">
//el 的二种写法
// new Vue({
// el: "#root", 第一种写法
// data: {
// name: "史满意",
// },
// });
// const v = new Vue({
// data: {
// name: "smy",
// },
// });
// //console.log(v);
// setTimeout(() => {
// v.$mount("#root"); //第二种写法
// }, 1000);
//data 的二种写法
new Vue({
el: "#root",
//data 的第一种写法对象式
// data: {
// name: "smy",
// },
//data 的第二种写法 函数式
data: function () {
console.log(this); // 此处的this 是vue 实例对象
return {
name: "smy99",
};
},
});
</script>
</html>
