el 与 data 的两种写法
el 的2种写法:
第一种:创建 Vue 实例对象的时候去配置 el 属性
第二种:先创建 Vue 实例,随后再通过 vm.$mount("#app") 指定 el 的值
data 的2种写法:
第一种:对象式:data:{ }
第二种:函数式:data() { return { } }
目前这些写法都可以,以后到组件时,data 就必须使用函数,否则会报错
注:Vue 管理的函数,一定不要写箭头函数,否则 this 就不是 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>
</head>
<body>
<div id="app">
<h1>你好,{{name}}</h1>
</div>
</body>
<!-- 引入Vue -->
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false; //阻止开发环境提示
// el的两种写法
// const vm = new Vue({
//第一种el方式绑定
// el:"#app",
// data:{
// name:"张三"
// }
// })
// console.log(vm);
// 第二种方式绑定原型上的$mount
// vm.$mount("#app");
// data的两种写法
new Vue({
el:"#app",
// data的第一种写法:对象式
// data:{
// name:"张三"
// }
// data的第二种写法:函数式
data(){
console.log(this); //此处的this是Vue实例对象
return{
name:"张三"
}
}
})
</script>
</html>
希望这些资料对你有所帮助
如有错误,请斧正!