“Vue el与data的两种写法”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
第45行: 第45行:
 
         //data 的第二种写法:函数式
 
         //data 的第二种写法:函数式
 
         data: function (){
 
         data: function (){
 +
            console.log('@@@', this); //此处的 this 是 Vue 实例对象
 
             return {
 
             return {
 
                 name:'jay'
 
                 name:'jay'

2024年7月28日 (日) 07:02的版本

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 (){
            console.log('@@@', this); //此处的 this 是 Vue 实例对象
            return {
                name:'jay'
            }
        }
    })
</script>