el与data的两种写法
el的两种写法
1) 创建 Vue 实例对象的时候配置 el 属性
2) 先创建 Vue 实例，随后再通过 v.$mount('#root) 指定 el 的值
// el的两种写法
const v = new Vue({
// el 第一种写法
// el:"#root",
data:{
name:"马铃薯"
}
})
// el 第二种写法
// 先创建Vue实例对象，通过v.$mount("#root")指定el的值
v.$mount("#root")
data的两种写法
1) 对象式，data:{ }
2) 函数式，data(){ return{} }
// data的两种写法
const v = new Vue({
el:"#root",
// data 第一种写法：对象式
// data:{
// name:"马铃薯"
// }
// data 第二种写法：函数式
data(){
//此处的this是Vue实例对象
console.log("123",this)
return{
name:"马铃薯"
}
}
})
这里需要注意，如何选择目前哪种写法都可以，以后到组件时， data 必须使用函数，否则会报错
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
// // el的两种写法
// const v = new Vue({
// // el 第一种写法
// // el:"#root",
//
// data:{
// name:"马铃薯"
// }
// })
// // el 第二种写法
// // 先创建Vue实例对象，通过v.$mount("#root")指定el的值
// v.$mount("#root")
// data的两种写法
const v = new Vue({
el:"#root",
// data 第一种写法：对象式
// data:{
// name:"马铃薯"
// }
// data 第二种写法：函数式
data(){
//此处的this是Vue实例对象
console.log("123",this)
return{
name:"马铃薯"
}
}
})
// 向 Web 控制台输出一条信息
console.log(v)
</script>
</html>
标签：el,Vue,name,05,data,root,写法 From： https://www.cnblogs.com/REN-Murphy/p/17689103.html