Vue2基础篇-05-el与data

最新推荐文章于 2024-03-15 23:51:30 发布

Alan0517

最新推荐文章于 2024-03-15 23:51:30 发布

阅读量472

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218479

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> el与data</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>

    <div id="root">
        <h1> hello,{{name}}</h1>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        const v = new Vue({

            //这是属于el的第一种简单写法
            el: '#root',

            // data这种写法属于对象式
            // data: {
            //  name: zhangsan
            // }

            //data的第二种写法是函数式写法
            // data: function () {     //data函数不能够写成()=> 函数,一旦写了箭头函数就代表全局实例了
            //     console.log(this)
            //     return { name: "zhangsan" }
            // }

            // data: () => {     //data函数不能够写成()=> 函数,一旦写了箭头函数就代表全局实例了
            //     console.log(this)
            //     return { name: "zhangsan" }
            // }


            //data函数也可以下面这样简写

            data() {
                console.log(this)
                return { name: "zhangsan" }
            }

        })

        //这是除了el的第二种写法: 先准备div容器，再准备vue实例，然后再关联  使用$mount关联
        v.$mount('#root')
    </script>
</body>

</html>