想必大家对Vue中的el与data并不陌生,接下来,让我为大家介绍一下el与data的两种写法吧!
一、el的两种写法
1.new Vue时候配置e1属性。
2.先创建Vue实例,随后再通过vm.$mount('#root)指定el的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root">
<div>我的名字叫{{name}}</div></div>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
Vue.config.productionTip = false
// el的两种方法
const vm = new Vue({
// el的第一种写法
// el:"#root",
data:{
name:"张三"
}
})
// el的第二种写法
// 使用$mount mount有挂载的意思
vm.$mount("#root")
</script>
</html>
二、data的两种写法
1.对象式
2.函数式
const vm = new Vue({
el: "#root",
// 第一种 对象式
// data:{
// name:"张三"
// }
// 第二种 函数式
data() {
return {
name: "张三"
}
}
})
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!