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

文章目录

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


前文提要

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


Vue实例的el

第一种写法

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

效果图片

在这里插入图片描述

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

第二种写法,函数式

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

效果图片

在这里插入图片描述

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

小结

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

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


至此,结束。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/211761.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring 是如何开启事务的, 核心原理是什么

文章目录 spring 是如何开启事务的核心原理1 基于注解开启事务2 基于代码来开启事务 spring 是如何开启事务的 核心原理 Spring事务管理的实现有许多细节&#xff0c;如果对整个接口框架有个大体了解会非常有利于我们理解事务&#xff0c;下面通过讲解Spring的事务接口来了解…

【CCF-PTA】第03届Scratch第04题 -- 数字加密

数字加密 【题目描述】 "狼群战术"是第二次世界大战中德军对大西洋上盟军商船所使用的潜艇战术&#xff0c;一度遏制住英国的海上贸易。直到艾伦图灵成功破译了德国的英格尔码密码&#xff0c;成为二战的一个重要转折点。时至今日&#xff0c;图灵仍然是计算机的一…

【数据结构/C++】线性表_顺序表的基本操作

#include <iostream> using namespace std; #define MaxSize 10 // 1. 顺序表 // 静态分配 typedef struct {int data[MaxSize];int length; // 当前长度 } SqList; // 静态分配初始化顺序表 void InitList(SqList &L) {for (int i 0; i < MaxSize; i){L.data[i]…

k8s-pod生命周期 4

容器环境初始化 pod 由pod 镜像来提供&#xff0c;在pod 生命周期里容器主要分为两种&#xff1a;初始化容器和主容器 初始化容器一定要成功运行并退出&#xff0c;当初始化容器运行退出完了之后主容器开始和运行 主容器开始运行的时候&#xff0c;有两个探针&#xff1a;存…

漏洞盒子公益SRC

漏洞盒子公益SRC&#xff0c;小小地记录一下第一个月的成果

MySQL的Redo Log跟Binlog

文章目录 概要Redo Log日志Redo Log的作用Redo Log的写入机制 Binlog日志Binlog的作用Binlog写入机制 两段提交 概要 Redo Log和Binlog是MySQL日志系统中非常重要的两种机制&#xff0c;也有很多相似之处&#xff0c;本文主要介绍两者细节和区别。 Redo Log日志 Redo Log的作…

Pikachu(二)

CSRF (跨站请求伪造)概述 Cross-site request forgery 简称为“CSRF”&#xff0c;在CSRF的攻击场景中攻击者会伪造一个请求&#xff08;这个请求一般是一个链接&#xff09;&#xff0c;然后欺骗目标用户进行点击&#xff0c;用户一旦点击了这个请求&#xff0c;整个攻击就完…

MySQL数据库约束你真的懂吗?

✏️✏️✏️今天给各位带来的是关于数据库约束方面的知识 清风的CSDN博客 &#x1f61b;&#x1f61b;&#x1f61b;希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xff0c;大家一起学习交流&#xff01; 动动你们发财的小手&#xff0c;点点关…

mybatis注解方式动态标签时有特殊符号,出现元素内容必须由格式正确的字符数据或标记组成

原始代码demo Select("SELECT COUNT(1) FROM AAAA WHERE name #{nage} AND age< 4") public Integer sumXxxxx(String nage, String age);现需求改为nage可以为空&#xff0c;因此使用了动态拼接 Select("<script> SELECT COUNT(1) FROM AAAA WHERE …

港口大型设备状态监测及预测性维护策略

在现代港口运营中&#xff0c;大型设备的正常运行对于保障港口作业的高效性至关重要。为了实现设备的可靠性和持续性&#xff0c;港口管理者需要采取一系列状态监测和预测性维护策略。 推进自动化和智能化是提高港口大型设备状态监测和维护管理效率的重要途径。通过应用先进的…

投资房产的理由与好处,投资买房的方法与技巧

一、教程描述 本套买房教程&#xff0c;大小2.15G&#xff0c;共有23个文件。 二、教程目录 00.她23岁北漂月薪600&#xff0c;7年后50万在京买了第一套房&#xff0c;如今身价上千万.mpg 01.这个游戏&#xff0c;有些人输了所有钱&#xff0c;一辈子也不明白这个道理.mpg …

Linux宝塔面板搭建Discuz论坛, 并内网穿透实现公网访问

Linux宝塔面板搭建Discuz论坛&#xff0c; 并内网穿透实现公网访问 文章目录 Linux宝塔面板搭建Discuz论坛&#xff0c; 并内网穿透实现公网访问前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 &#x1f4f7; 江池…