<!DOCTYPE html>
<html>
<head>
<mata charset="UTF-8" />
<title>el与data的两种写法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
data与el的2种写法：
1.el有2种写法：
（1）new Vue时候配置el属性
（2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2.data有2种写法：
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{
{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//el的两种写法
/* const v = new Vue({
// el:'#root', //第一种写法
data:{
name:'尚硅谷'
}
})
console.log(v)
setTimeout(()=> {
v.$mount('#root') //第二种写法
},1000);
// v.$mount('#root')*/
//data的两种写法
new Vue({
el:'#root',
//data第一种写法：对象式
/*data:{
name:'尚硅谷'
}*/
//data的第二种写法：函数式
data:function(){
console.log('@@@', this)//此处的this是Vue的实例对象
return{
name:'尚硅谷'
}
}
})
</script>
</html>
Vue技术4.el与data的两种写法
猜你喜欢
转载自blog.csdn.net/qq_40713201/article/details/126140453
今日推荐
周排行