vue学习（5）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el和data的两种写法</title>
</head>

<body>
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.procuctionTip = false;
        const vm = new Vue({
            // el: '#root',第一种写法
            // data的第一种写法：对象式
            // data: {
            //     name: '小阿牛'
            // }
            //data的第二种写法：函数式
            data () {
                console.log(this);
                //该方法是vue调用，此处的this是vue实例对象，如果写成箭头函数，则this指向window.
                return { name: '小阿牛' }
            }
        });
        console.log(vm);
        vm.$mount('#root');//第二种写法
    </script>
</body>

</html>

知识点

el和data的两种写法：
1:el的两种写法：
（1）：可以在new Vue创建vue实例的时候，指定el属性的值。
（2）：可以在创建vue实例之后，通过vm.$mount('#root')指定el的值。
2：data的两种写法：
（1）：写成对象的形式；
（2）：写成函数的形式；使用组件的时候，需要写成函数形式。
注意：由vue管理的函数一定不要写成箭头函数，否则，this指向的就不是vue实例了。

打印一下vue的实例，以$开头的都是开发者可以使用的。

vue实例.png

vue学习（5）

知识点

推荐阅读更多精彩内容