04_Vue中el与data的两种写法-尚硅谷笔记

最新推荐文章于 2024-08-07 19:03:55 发布

我要学前端！

最新推荐文章于 2024-08-07 19:03:55 发布

阅读量66

点赞数

分类专栏： Vue2笔记文章标签： vue vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/min0320/article/details/129555572

版权

Vue2笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

data与el的2种写法：

1.el的2种写法

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

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

2.data的2种写法

(1) 对象式。

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

3.一个重要的原则

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

<!DOCTYPE html>

<head>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>拜见 {{name}}</h1>
    </div>
    <script>
        //el 的两种写法
        const vm = new Vue({
            // el: "#root",    //第一种写法
            data: {
                name: '朱雀大人'
            }
        })
        console.log(vm);
        //定时器 1秒后执行
        setTimeout(() => {
            vm.$mount('#root')  //第二种写法
        }, 1000)
    </script>
</body>

</html>

<!DOCTYPE html>

<head>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>拜见 {{name}}</h1>
    </div>
    <script>
        //data的两种写法
        let vm = new Vue({
            el: '#root',
       // data的第一种写法：对象式
           data:{
               name:'朱雀大人'
            }
       // data 的第二种写法：函数式
            //data: function(){}可以省去:function简写为data(){}
            data() {
                console.log(this) //此处的this是Vue实例对象
                return {
                    name: '朱雀大人'
                }
            }
        })
    </script>
</body>

</html>