Vue中data与el的两种写法

最新推荐文章于 2024-07-24 08:30:00 发布

想要成为码农

最新推荐文章于 2024-07-24 08:30:00 发布

阅读量173

点赞数

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

本文链接：https://blog.csdn.net/weixin_45268202/article/details/122161070

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中el属性的不同配置方式，包括配置在new Vue时和后续$mount的方法，同时对比了data的两种写法——对象式和函数式，并强调了在组件中使用函数式data的重要性。此外，还提到了避免使用箭头函数来保持this指向Vue实例的原则。

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

data与el的两种写法
1、el有2种写法
- .new Vue时候配置el属性
- .先创建Vue实例，随后再通过vm.$mount("#root")指定el的值
2、data有2种写法
- 对象式
- 函数式
如何选择：
选择使用函数式写法，在用到组件时，data必须使用函数式，否则会报错
3、一个重要原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

  <div id="root">
        <h1>你好, {{name}}</h1>
    </div>

    <script>

        //el的两种写法
        // const v = new Vue({
        //     // el: "#root", 第一种写法
        //     data: {
        //         name: "尚硅谷"
        //     }
        // })
        // console.log(v)
        // v.$mount("#root")

        //data的两种写法
        new Vue({
            el: "#root",
            //data的第一种写法：对象式
            // data: {
            //     name: "尚硅谷"
            // }

            //data的第二种写法：函数式
            data() {
                console.log(this)//此处的this是Vue实例对象
                return {
                    name: "尚硅谷"
                }
            }
        })
    </script>