el与data的两种写法

想养一只萨摩耶～

于 2022-09-24 16:06:42 发布

阅读量431

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_50652600/article/details/127026293

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中创建实例与数据绑定的两种方法。对于`el`，可以分别在创建Vue实例时直接指定，或者在实例化后使用`$mount`方法绑定。对于`data`，可以采用对象式或函数式写法。函数式写法在组件中是必需的。强调在Vue中避免使用箭头函数以保持正确的`this`指向。

摘要由CSDN通过智能技术生成

1 el的两种写法

2 data的两种写法

3 总结

1 el的两种写法

之前创建一个容器对象和一个vue实例的时候，我们采用的是如下的方式。

<body>

    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
       data:{
       name:'老六'
       }
       })
        
    </script>
    
</body>

此时我们的容器和vue实例产生了联系。其实还有一种写法。

<body>

    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
     const v = new Vue({
    //    el:'#root',
       data:{
       name:'老六'
       }
       })
       console.log(v)
       v.$mount('#root')
        
    </script>
    
</body>

用$.mount去联系这个容器对象。这种容器与对象绑定的方式更加灵活。

2 data的两种写法

第一种写法：对象式

<body>

    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
       data:{  //data第一种写法，对象式
       name:'老六'
       }
       })
        
    </script>
    
</body>

第二种写法：函数式

<body>

    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时提示
       new Vue({
       el:'#root',
        data:function(){ //第二种写法，函数式
        return{
            name:'老六'
        }
    }

       })
        
    </script>
    
</body>

3 总结

1 el有两种写法

1）.new Vue()时配置el属性。

2）先创建Vue实例，随后在通过v.$mount('#root')指定el的值

2 data的写法

1）.对象式

2）.函数式

前期两种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，写了箭头函数之后，this就不是vue实例了

想养一只萨摩耶～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
el与data的两种写法

1 el有两种写法1）.new Vue()时配置el属性。2）先创建Vue实例，随后在通过v.$mount('#root')指定el的值2 data的写法1）.对象式2）.函数式前期两种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。3 一个重要的原则由Vue管理的函数，一定不要写箭头函数，写了箭头函数之后，this就不是vue实例了。
复制链接

扫一扫

专栏目录