“Vue el与data的两种写法”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
第36行: | 第36行: | ||
}) | }) | ||
</script> | </script> | ||
− | </syntaxhighlight> | + | </syntaxhighlight> |
− | 函数式 | + | === data 的第二种写法 === |
+ | 函数式<syntaxhighlight lang="html"> | ||
+ | <script type="text/javascript"> | ||
+ | new Vue({ | ||
+ | el:'#root', | ||
+ | //data 的第二种写法:函数式 | ||
+ | data: function (){ | ||
+ | return { | ||
+ | name:'jay' | ||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
+ | </syntaxhighlight> |
2024年7月28日 (日) 07:00的版本
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=9
el 的第一种写法
第一种:new 的时候就传入 el 对应的容器
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'jay'
}
})
</script>
el 的第二种写法
<script type="text/javascript">
const v = new Vue({
data:{
name:'jay'
}
})
console.log(v);
v.$mount('#root')
</script>
data 的第一种写法
对象式
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'jay'
}
})
</script>
data 的第二种写法
函数式
<script type="text/javascript">
new Vue({
el:'#root',
//data 的第二种写法:函数式
data: function (){
return {
name:'jay'
}
}
})
</script>