05-Vue核心-el与data的两种写法

el与data的两种写法

el的两种写法

1) 创建 Vue 实例对象的时候配置 el 属性

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

// el的两种写法
const v = new Vue({
    // el 第一种写法
    // el:"#root",

    data:{
        name:"马铃薯"
    }
})
// el 第二种写法
// 先创建Vue实例对象，通过v.$mount("#root")指定el的值
v.$mount("#root")

data的两种写法

1) 对象式，data:{ }

2) 函数式，data(){ return{} }

// data的两种写法
const v = new Vue({
    el:"#root",

    // data 第一种写法：对象式
    // data:{
    //     name:"马铃薯"
    // }

    // data 第二种写法：函数式
    data(){
        //此处的this是Vue实例对象
        console.log("123",this)
        return{
            name:"马铃薯"
        }
    }
})

这里需要注意，如何选择目前哪种写法都可以，以后到组件时， data 必须使用函数，否则会报错
完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>el与data的两种写法</title>
      <!--  引入Vue  -->
      <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!--  准备好一个容器  -->
    <div id="root">
      <h1>你好，{{name}}</h1>
    </div>

    <script type="text/javascript">
        // 阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false;

        // // el的两种写法
        // const v = new Vue({
        //     // el 第一种写法
        //     // el:"#root",
        //
        //     data:{
        //         name:"马铃薯"
        //     }
        // })
        // // el 第二种写法
        // // 先创建Vue实例对象，通过v.$mount("#root")指定el的值
        // v.$mount("#root")

        // data的两种写法
        const v = new Vue({
            el:"#root",

            // data 第一种写法：对象式
            // data:{
            //     name:"马铃薯"
            // }

            // data 第二种写法：函数式
            data(){
                //此处的this是Vue实例对象
                console.log("123",this)
                return{
                    name:"马铃薯"
                }
            }
        })

        // 向 Web 控制台输出一条信息
        console.log(v)

    </script>
  </body>
</html>

 

 

posted @ 2023-09-09 11:25  马铃薯1  阅读(30)  评论(0)    收藏  举报