05-el与data的两种写法-526互联

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>Title</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <h1>你好，{{name}}</h1>
        </div>
    </body>
    <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>
</html>