代码编织梦想

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实例对象在这里插入图片描述

讲师笔记

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39123467/article/details/127261969

Vue入门 - 4 el和data的两种写法-爱代码爱编程

文章目录 一、el和data的两种写法?1 el有两种写法2 data有两种写法3 一个重要的原则二、代码 一、el和data的两种写法? 1 el有两种写法 (1) new Vue的时候设置属性 (2) 先创建vue实例,再通过vue.$mount.('#root') 指定vue的值 2 data有两种写法 (1) 对象

Vue 中el和data的两种写法-爱代码爱编程

Vue实例中el绑定的两种写法: 直接使用el标签去指定容器的id <body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> /* 开发

Vue中el和data的两种写法-爱代码爱编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

Vue:el与data的两种写法-爱代码爱编程

data与el的2种写法 1.el的两种写法 (1)new Vue时候配置el属性 (2)先创建Vue实例,随后再通过vm.$mount(’#root’)指定el的值【可以对其进行一些操作】 2.data的两种写法 (1)对象式 (2)函数式 如何选择:学到组件时,data必须使用函数式,否则会报错 3.一个重要原则: 由Vue管理的函数,一定

vue-el与data的两种写法-爱代码爱编程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

Vue -- el 与 data 的两种写法-爱代码爱编程

Vue – el 与 data 的两种写法 小结 data 与 el 的两种写法: 1、el 的两种写法: 1)new Vue 时候配置 el 属性 2)先创建 Vue 实例,随后再通过 vm.$mount('#root') 指定 el 的值 2、data 的两种写法: 1)对象式

vue- el与data 的两种写法-爱代码爱编程

el与data 的两种写法 el: new Vue 时候配置el属性先创建 Vue 实例,随后通过vm.$mount(’#root’) 指定 el 值data 两种写法 对象式函数式:现在写那种都可以,以后学组件的时候,data 必须使用函数式,不然会报错一个重要原则: 由 vue 管理的函数(比如这里写的 data),一定不要写箭头函数,一旦写了箭头

Vue ---- el 与 data 的两种写法-爱代码爱编程

文章目录 1. el 的写法1.1 写法11.2 写法21.32. data 的写法2.1 写法12.2 写法2 视频:【https://www.bilibili.com/video/BV1Zy4y1K7SH?p=9】 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 1. el 的写法 1.1 写法1 <

vue2基础-el与data的两种写法(html版)_chensw_陈的博客-爱代码爱编程

el和data的不同写法 一、el的2种写法 new Vue时候配置el属性。 <!-- 准备好一个容器--> <div id="root"> <h1>你好,{{name}}</h1> </div> <script type="text/javascript"> //

vue中el与data的两种写法和mvvm模型_浅q的博客-爱代码爱编程

一. data与el的2种写法     1. el有2种写法         (1).mew Vue时候配置el属性         (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值     2. data有两种写法         (1).对象式         (2).函数式         如何选择:

vue学习笔记4----el与data的两种写法_lazy91的博客-爱代码爱编程

el的两种写法 el 和 $mount,$mount 更灵活,用啥都行。 将容器与vue实例绑定起来。 <body> <div id="root"> <h1>hello,{{name}}</h1> </div> <script type="te

vue el和data的两种写法_baibai白-的博客-爱代码爱编程

1.5 el 与 data的两种写法 el 有两种写法 1.创建Vue实例对象的时候配置el属性 2.先创建Vue实例,随后再通过vm.$mount(‘#root’)指定 el 的值 data 有两种写法 1.对象式:da

vue--el和data的两种写法_richeneen .的博客-爱代码爱编程

Vue--el和data的两种写法 1. el的两种写法2. data的两种写法3. 为什么data在大型项目中和组件中要写成函数形式?(面试常问) 1. el的两种写法 在创建Vue实例时就配置好el属

数组常用去重方法总览_godlike-icy的博客-爱代码爱编程

// 实现数组去重 arry = [111, 111, 222, 222, 222, 333, 333, 333]; //去重之后的效果 newArry = [111,222,333] 方法一: 利用对象属性key

vue中el与data的两种写法_vue el data-爱代码爱编程

Vue中el与data的两种写法 el的两种写法 new Vue的时候配置el属性 new Vue({ el: '#app' }) 先创建Vue实例,然后通过vm.$mount(‘#app’)指定el的值

vue学习002-爱代码爱编程

1.分为单向和双向数据绑定           1.1单向数据绑定:只存在从Vue数据到实例这个方向,而当前端改变时,后台的Vue里的数据不变.如图          1.2双向绑定  一般有value值用于双向,如表单                               v-model:value 简写:v-model <di