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

文章目录


前文提要

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


Vue实例的el

第一种写法

html 复制代码
<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>

第二种写法

html 复制代码
<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

第一种写法,对象式

html 复制代码
<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>

效果图片

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

第二种写法,函数式

html 复制代码
<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>

效果图片

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

小结

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

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


至此,结束。

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

相关推荐
于小汐在咯1 小时前
词根学习笔记 | Agri系列
笔记·学习
霜绛1 小时前
Unity:Json笔记——Json文件格式、JsonUtlity序列化和反序列化
学习·unity·json·游戏引擎
摇滚侠2 小时前
Spring Boot 3零基础教程,Spring Intializer,笔记05
spring boot·笔记·spring
2301_768350232 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:2 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
聪明的笨猪猪3 小时前
Java Redis “高可用 — 主从复制”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
我命由我123453 小时前
Excel - Excel 列出一列中所有不重复数据
经验分享·学习·职场和发展·word·powerpoint·excel·职场发展
摇滚侠3 小时前
Spring Boot 3零基础教程,Demo小结,笔记04
java·spring boot·笔记
璞致电子3 小时前
fpga开发板ZYNQ 璞致 PZ7010/7020 邮票孔核心板简介-ZYNQ7000系列小系统学习板
linux·嵌入式硬件·学习·fpga开发·fpga·fpga开发板·xilinx开发板
做运维的阿瑞4 小时前
Docker 从入门到精通:完整通关笔记
笔记·docker·容器