Vue成长之路——day1

最新推荐文章于 2025-12-08 11:36:54 发布

原创最新推荐文章于 2025-12-08 11:36:54 发布 · 679 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue学习专栏收录该内容

1 篇文章

订阅专栏

一、Vue基础

官网：Vue官网

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。具有易学易用、性能出色、灵活出众等特点，并且有强大的生态环境，提供了丰富的核心库和周边库。

初识Vue：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? 'a' : 'b'

2.js代码(语句)

(1). if(){}

(2). for(){}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'Vue',
					address:'北京'
				}
			})

		</script>
	</body>
</html>

vue的引入有两种，开发环境与生产环境

开发环境，包含了有帮助的命令行警告

<script type="text/javascript" src="../js/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>（通过CDN引入）

生产环境，优化了尺寸和速度

<script type="text/javascript" src="../js/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>（通过CDN引入）

data与el的2种写法

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1).对象式

(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

模板语法:

Vue模板语法有2大类：
        1.插值语法：
                功能：用于解析标签体内容。
               写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
         2.指令语法：
                 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
                 举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式,且可以直接读取到data中的所有属性。
                 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

数据绑定：

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!-- 普通写法 -->
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>

MVVM模型：

MVVM模型

1. M：模型(Model) ：data中的数据

2. V：视图(View) ：模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

1.data中所有的属性，最后都出现在了vm身上。

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理：

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

Object.defineProperty中getter和setter思想和形式贯穿在数据代理中

<script type="text/javascript" >
	let number = 18
	let person = {
		name:'张三',
		sex:'男',
	}
	Object.defineProperty(person,'age',{
		// value:18,
		// enumerable:true, //控制属性是否可以枚举，默认值是false
		// writable:true, //控制属性是否可以被修改，默认值是false
		// configurable:true //控制属性是否可以被删除，默认值是false
		//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
		get(){
			console.log('有人读取age属性了')
			return number
		},
		//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
		set(value){
			console.log('有人修改了age属性，且值是',value)
				number = value
		}
	})
	// console.log(Object.keys(person))
	console.log(person)
</script>

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

事件处理：

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'Vue',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<a href="http://vuejs.org" @click.prevent="showInfo">点我提示信息</a>
<button @click.stop="showInfo">点我提示信息</button>
<button @click.once="showInfo">点我提示信息</button>
<div class="box1" @click.capture="showMsg(1)">
<div class="demo1" @click.self="showInfo">
<ul @wheel.passive="demo" class="list">

1.Vue中@keyup/keydown常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

computed:{
	fullName:{
		//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
		//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
		get(){
			console.log('get被调用了')
			// console.log(this) //此处的this是vm
			return this.firstName + '-' + this.lastName
		},
		//set什么时候调用? 当fullName被修改时。
		set(value){
			console.log('set',value)
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	}
    //简写
	fullName(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}

监视属性：

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

//写在vue实例中做属性
watch:{
	isHot:{
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
    //简写
    isHot(newValue,oldValue){
	    console.log('isHot被修改了',newValue,oldValue,this)
}

//vue实例外
vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

绑定样式：

1. class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<style>
	.basic{
		width: 400px;
		height: 100px;
		border: 1px solid black;
	}	
	.happy{
		border: 4px solid red;
		background-color: rgba(255, 255, 0, 0.644);
		background: linear-gradient(30deg,yellow,pink,orange,yellow);
		}
	.sad{
		border: 4px dashed rgb(2, 197, 2);
		background-color: gray;
		}
    .normal{
	   	background-color: skyblue;
	}
    .style1{
		background-color: yellowgreen;
	}
	.style2{
		font-size: 30px;
		text-shadow:2px 2px 10px red;
	}
	.style3{
	border-radius: 20px;
	}
</style>
<div id="root">
	<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
	<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

	<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
	<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

	<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
	<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

	<!-- 绑定style样式--对象写法 -->
	<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
	<!-- 绑定style样式--数组写法 -->
	<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'Vue',
				mood:'normal',
				classArr:['style1','style2','style3'],
				classObj:{
					style1:false,
					style2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>

条件渲染：

1.v-if

写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<div id="root">
	<h2>当前的n值是:{{n}}</h2>
	<button @click="n++">点我n+1</button>
	<!-- 使用v-show做条件渲染 -->
	<h2 v-show="false">欢迎来到{{name}}</h2>
	<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

	<!-- 使用v-if做条件渲染 -->
	<h2 v-if="false">欢迎来到{{name}}</h2>
	<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

	<!-- v-else和v-else-if -->
	<div v-if="n === 1">Angular</div>
	<div v-else-if="n === 2">React</div>
	<div v-else-if="n === 3">Vue</div>
	<div v-else>哈哈</div>

	<!-- v-if与template的配合使用 -->
	<template v-if="n === 1">
		<h2>你好</h2>
		<h2>尚硅谷</h2>
		<h2>北京</h2>
	</template>

</div>

总结

第一天学习了vue实例，模板语法，数据绑定，MVVM模型，数据代理，事件处理，计算属性，监视属性，绑定样式，条件渲染这些知识点。

初识vue中，学习到如何创建vue实例以及一些基础知识；模板语法中了解到插值语法和指令语法；数据绑定中有单向绑定与双向绑定；MVVM模型让我们了解到vue渲染原理；数据代理中发现data中的数据都会代理在vue实例中，并且有两个重要的函数getter与setter；事件处理中主要讲了点击元素与获取键盘操作两个事件为例，包括一些事件修饰符等；计算属性讲的是当需要的数据需要计算得出时可以在用计算属性的方式操作；监视属性是用来监视页面元素变化；绑定样式有两种不同的样式绑定方法，class样式与style样式；条件渲染主要讲了v-if这种条件渲染方法。