当前位置：首页 > article >正文

Vue基础(2)_el和data的两种写法

article 2024/11/19 21:55:21

举例：

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

el和data的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

        // 第一种写法：new Vue时候配置el属性。
        // 优点：简单、直接
        new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })

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

        // mount:挂载
        // 第二种写法：先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
        // 优点：灵活
        vm = new Vue({
            data: {
                name: '张三'
            }
        })
        vm.$mount('#root');

2.data有2种写法

(1).对象式

        new Vue({
            el: '#root',
            // 第一种写法：对象式
            data: {
                name: '张三'
            }
        })

(2).函数式

        new Vue({
            el: '#root',
            // 第二种写法：函数式
            data: function(){
                return{
                    name:'张三'
                }
            }
        })

        new Vue({
            el: '#root',
            // 第二种写法：函数式(简写)
            data(){
                return{
                    name:'张三'
                }
            }
        })

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

        new Vue({
            el: '#root',
            // 第二种写法：函数式(简写)
            data(){
                // 此处this是Vue实例对象
                console.log('@@@',this);
                return{
                    name:'张三'
                }
            }
        })

        new Vue({
            el: '#root',
            // 第二种写法：函数式(简写)
            data:() => {
                // 此处this是全局window对象
                console.log('@@@',this);
                return{
                    name:'张三'
                }
            }
        })