Vue框架学习笔记——Vue实例中el和data的两种写法

迈不过友情╰ 2024-02-17 09:35 62阅读 0赞

#### 文章目录 ####

*  前文提要
 *  Vue实例的el
 *   *  第一种写法
     *  第二种写法
     *  小结
 *  Vue实例中data
 *   *  第一种写法，对象式
     *  效果图片
     *  第二种写法，函数式
     *  效果图片
     *  小结

--------------------

## 前文提要 ##

本文仅做自己的学习记录，如有错误，请多谅解

--------------------

## Vue实例的el ##

### 第一种写法 ###

<body>
      <div id="box">
        <h1>你好，{
       {name}}</h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值",
          }
        })
        // vm.$mount('#box')
      </script>
    </body>

### 第二种写法 ###

<body>
      <div id="box">
        <h1>你好，{
       {name}}</h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          // el: '#box',
          data: {
          
            name: "这里是name的值",
          }
        })
        vm.$mount('#box')
      </script>
    </body>

vm代表的是Vue实例，后面加上’$mount’，'mount’带有绑定的意思，再加上id选择器字符串

### 小结 ###

对于el来说，两种写法都行，但是第二种更常用。使用不变量记录Vue实例后，第二种写法可以更加自由地添加属性，将其塞入其他的函数中实现动态添加属性也行。

## Vue实例中data ##

### 第一种写法，对象式 ###

<body>
      <div id="box">
        <h1>你好，{
       {name}}</h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          data: {
          
            name: "对象式，这里是name的值",
          }
        })
        
      </script>
    </body>

### 效果图片 ###

![在这里插入图片描述][4ce3f1596ddb40dbae2ebacc65c4f0c2.png]

data使用大括号就是对象式的写法

### 第二种写法，函数式 ###

<body>
      <div id="box">
        <h1>你好，{
       {name}}</h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          // data: {
          
          //   name: "对象式，这里是name的值",
          // }
          data:function(){
          
          return {
          
            name:"函数式，这里是name的值",
          }
        }
        })
        
      </script>
    </body>

### 效果图片 ###

![在这里插入图片描述][6535d2b4a64f419eb5279ca06e0dfdee.png]

data后面不接大括号，而是接入一个函数，函数内的返回值中的数据就相当于之前对象式中写的数据，能够通过返回的name获取到它的数值。

### 小结 ###

由Vue管理的函数不能写成[箭头函数][Link 1]，也就是写成函数式的data的函数，一旦写成了箭头函数，函数中this指定的就不是Vue实例，而是全局的window。

之后学习Vue，学习到组件时候，data就必须使用函数式的写法。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[4ce3f1596ddb40dbae2ebacc65c4f0c2.png]: https://img-blog.csdnimg.cn/4ce3f1596ddb40dbae2ebacc65c4f0c2.png
[6535d2b4a64f419eb5279ca06e0dfdee.png]: https://img-blog.csdnimg.cn/6535d2b4a64f419eb5279ca06e0dfdee.png
[Link 1]: https://blog.csdn.net/ndkhbwh/article/details/103855858