Vue - el和data的两种写法

已于 2022-10-11 14:13:14 修改
阅读量182 收藏
点赞数
分类专栏： 成长阶段 Vue 笔记 文章标签： vue.js 前端 javascript
于 2022-10-11 14:08:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/127261969
版权
笔记 同时被 3 个专栏收录
324 篇文章 9 订阅
订阅专栏
成长阶段
272 篇文章 4 订阅
订阅专栏
Vue
18 篇文章 0 订阅
订阅专栏

文章目录

el的两种写法

一般写法，在new vue里面
在这里插入图片描述

分析vue实例源码

在这里插入图片描述
在这里插入图片描述

$mount举例el的第二种写法

在这里插入图片描述

替代el，更加灵活
在这里插入图片描述

进化版

<!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="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const s = new Vue({
			// el: '#root',
			data: {
				name: '涛涛',
			},
		})

		console.log(s)

		setTimeout(() => {
			s.$mount('#root')
		}, 3000) //3秒后执行
	</script>
</html>

在这里插入图片描述

3秒后
在这里插入图片描述

data的两种写法

对象式

		new Vue({
			// el: '#root',
			data: {
				name: '涛涛',
			},
		})

函数式

		new Vue({
			data: function () {
				return {
					name: '涛涛',
				}
			},
		})

简写

		new Vue({
			data() {
				return {
					name: '涛涛',
				}
			},
		})

认识this

就是vue实例对象在这里插入图片描述

讲师笔记

在这里插入图片描述

鬼鬼骑士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue Data的两种写法
Tine Aine
11-29 399
对象式写法 data:{ name:"jack" } 函数式写法 data:function(){ return{ name:"tom" } } 函数式简略写法 data(){ return{ name:"tom" } }
Vue data的两种编写形式
m0_48546501的博客
03-30 262
Vue data的两种编写形式
Vue中 el与data的两种写法
k010107的博客
09-29 189
Vue的核心 el 与 data 的两种写法，里面写着很详细，需要了解的话里面请 ~ ~ ~
Vue 中el和data的两种写法
weixin_44141172的博客
11-15 481
Vue实例中el绑定的两种写法： 直接使用el标签去指定容器的id <body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> /* 开发环境提示关闭 */ Vue.config.productionTip = false /* new一个Vue */
Vue中el与data的两种写法
Web_South_Bay的博客
09-01 228
data与el的两种写法 1.el有两种写法 (1).newVue时配置el属性 例： newVue({ el:'#root', data:{ name:'尚硅谷' } }) (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el...
Vue2 模板template的四种写法总结
01-21
如下所示： 我是直接写在构造器里的模板1 </div> 我是选项模板3 </template> [removed] 我是script标签模板4 [removed] ... var vm=new Vue({ el:#app, data:{ ... //第2种模板 写在构造器
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： ... <el data=tableData xss=removed> <el prop=date label=日期 width=180> </el> <el prop=name label=姓名 width=180> </el> <el-table-
vue组件的写法汇总
08-27
Vue 组件的写法汇总 在 Vue.js 中，组件化是为了方便代码复用，提高开发效率。今天我们将分享常见的 Vue 组件...Vue 组件的写法有多种，每种写法都有其特点和适用场景，选择合适的写法可以提高开发效率和代码复用性。
data与el的2中写法：.md
07-20
data与el的2中写法：.md
Vue学习：el 与data的两种写法
weixin_47295886的博客
12-05 352
el的两种写法：直接配置、使用v.$mount()指定 data的两种写法：对象式、函数式 组件的时候必须用函数式 否则报错 vue管理的函数千万不要写成箭头函数，一旦写箭头函数，this就不是vue实例了，而是window 目前Vue管理的函数有data
Vue知识加深———el与data的写法，MVVM模型，数据代理
最新发布
KiCCZha的博客
03-15 355
eldatael。
vue中data的两种写法
热门推荐
brrby
10-27 4万+
vue中的data是写为对象好还是函数好data为对象的写法data为函数的写法组件中访问data组件的data属性是一个对象的情况会访问不到data中的数据组件的data属性必须是一个函数且返回一个对象为什么组件的data属性必须是一个函数且返回一个对象 data为对象的写法 data:{ message: '此时mustache表达式是通过data为对象来获取message的值' } data为函数的写法 data(){ return{ message: '此时mustac
Vue前端框架 —— Vue 实例中 el 和 data 的两种写法
weixin_45661229的博客
08-29 1636
在 Vue 2.0 中创建 Vue 实例时，通常情况下与这两个配置项都是按照一种固定的方式写的，像下面这样。除了上面那一种常用写法之外，el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活，data 的另一种写法在组件中使用较为频繁。在原来代码的基础上将创建的 Vue 实例赋值给一个变量，官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm（ Vue 实例 ）下图就是 vm 的输出结果，输出结果为一个实例对象。展开后会出现很多以美元符号 '..
vue中el和data的两种写法
见证自己学习,成长的记录
10-06 937
data和el的两种写法1 el有两种写法(1).new vue的时候配置el属性(2).先创建vue实例，随后再通过vm.$mount(‘#root’)指定el的值2 data有两种写法(1)对象式(2)函数式如何选择：目前哪种写法都可以，如果使用组件，data必须使用函数式，否则会报错3 一个重要的原则由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了。
【VueJS】实例中data属性的三种写法及区别
'Ablaze 的专栏
01-03 1万+
data属性的三种写法1、__<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ isLogin: false } }) </script>2、__<script type="text/javascript"> var a
vue2.0模板的三种写法
Lschange的博客
01-25 1万+
vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现 1. html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" c
vue.js支持js原生写法
weixin_34163553的博客
06-02 1439
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, i...
Vue2 实例中的 data 属性三种写法与作用
04-19 3万+
{{count}} + var app = new Vue({ // 1. // data () { // return {count: 0} // }, // 2. // data: { // count: 0 // }, // 3. data: function() { return { count: 0
Vue的data的两种写法
weixin_46724415的博客
11-16 583
data有2种写法，对象式和函数式初学vue可以先用对象式练习，用到组件时，data必须使用函数式，否则会报错。 对象式 new Vue({ el: '#demo', data: { name: 'xiaoming', address: '珠海' } }) 函数式 new Vue({ el: '#root', data() { return { name: 'xiaoming' } } }) ...
vue3写法 el-form自定义规则
10-11
在Vue 3中，您可以使用自定义规则来验证el-form中的输入。下面是一个示例： 首先，您需要创建一个名为`customRules`的对象，其中包含您的自定义规则函数。例如： ```javascript const customRules = { // 自定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值