Vue中el和data的两种写法

最新推荐文章于 2024-07-25 09:24:40 发布

吱吱呀呀呆

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量67

点赞数

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

本文链接：https://blog.csdn.net/weixin_45058750/article/details/130532315

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

el的两种写法

1、new Vue 的时候配置el属性。
2、先创建Vue实例，随后使用vm.$mount(‘#root’) 指定el的值，（）中的内容为值。

<body>
    <div id="app">
        <h1>你好，{{name}}</h1>
    </div>
</body>

<script>
    const v = new Vue({
    	// el的第一种写法，在创建Vue的时候就进行配置
        el: '#app',
        data: {
               name: '喜喜'
           } 
    })
    console.log(v)
    /* el的第二种写法，将上面创建的vue实例赋值给v变量，设置v变量的el属性。  mount有挂在的意思 */
   // v.$mount('#app')



</script>

</html>

data的两种写法

1、对象式
2、函数式

在基础vue学习中，可以使用对象式，但是到学习和使用组件的时候，data必须使用函数式，否则会报错。

<body>
    <div id="app">
        <h1>你好，{{name}}</h1>
    </div>
</body>

<script>
    const v = new Vue({
        el: '#app',
        //data 的第一种写法：对象式
        /*    data: {
               name: '喜喜'
           } */
        // data的第二种写法 ：函数式
        data: function () {
            console.log('@@@', this)
            return {
                name: "尚硅谷"
            }
        }
    })


</script>

</html>