data与el的2种写法
el有两种写法
(1)new Vue时要配置el属性
(2)先创建vue实例,随后再通过vm.$mount('#root')指定el值
data有2种写法
(1)对象式
(2)函数式
如何选择:在组件当中,data必须使用函数式,否则会报错
一个重要原则:
由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好 {
{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false
// el的两种写法
// const x= new Vue({//x接收到vue实例
// // el:'#root', //第一种写法
// data:{
// name:'12345'
// }
// })
// console.log(x)//输出vue实例
// // 定时器
// setTimeout(()=>{
// x.$mount('#root')//第二种写法,挂载
// },1000);
new Vue({
el:'#root',
// data的第一种写法:对象式
// data:{
// name:'12345'
// }
// data的第二种写法:函数式
data(){
console.log('@@@',this)//此处的this是vue实例对象
return{
name:'12345'//必须有返回值
}
}
})
</script>
</body>
</html>