vue- el与data 的两种写法

最新推荐文章于 2024-04-15 23:58:46 发布

Dn_wh

最新推荐文章于 2024-04-15 23:58:46 发布

阅读量180

点赞数

分类专栏： # vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/m0_51045721/article/details/123735714

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

el与data 的两种写法
el:

new Vue 时候配置el属性
先创建 Vue 实例，随后通过vm.$mount(’#root’) 指定 el 值

data 两种写法

对象式
函数式：
现在写那种都可以，以后学组件的时候，data 必须使用函数式，不然会报错

一个重要原则：
由 vue 管理的函数（比如这里写的 data），一定不要写箭头函数，一旦写了箭头函数， this就不再是 vue 实例了，它指向的将会是 window

<!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>Document</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器
     -->
    <div id="root">
        <h1>你好，{{name}}</h1>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时产生生产提示

    new Vue({
        el: '#root',
        data: {
            name: "hxb"
        }
    })

</script>

</html>

在这里插入图片描述

<!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>Document</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器
     -->
    <div id="root">
        <h1>你好，{{name}}</h1>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时产生生产提示

    const v = new Vue({
        // el: '#root',   第一种写法
        data: {
            name: "hxb"
        }
    })
    console.log(v);

    setTimeout(() => {  //定时器， ls 之后执行
        v.$mount('#root')  //第二种写法
    }, 1000);


</script>

</html>

解析过程
在这里插入图片描述
data的两种写法：

在实际开发过程中
第二种用的比较多
就是function这一种

// data 的两种写法
    new Vue({
        el: '#root',
        // 1. 对象式
        //     data:{
        //         name:'hxb'
        //     }
        // 


        // 2.函数式
        //data: function () {
//一般在对象中写函数都删掉 ：function
		data(){

		console.log(this);  // 此处的this 是vue实例对象
            return {
                name: 'hxb'
            }
        }
    })

在这里插入图片描述
箭头函数没有自己的this ，就只能往上一级找，最后只能找到window