Vue基础总结，前端小白必知必会

若年封尘
130 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

模板语法

1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

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

数据绑定

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

1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<div id="root">
	<!-- 普通写法 -->
	<!-- 单向数据绑定：<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/>

	<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
	<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>

收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组 备注：v-model的三个修饰符： lazy：失去焦点再收集数据 number：输入字符串转为有效的数字e.g.v-model.number="userInfo.age" trim：输入首尾空格过滤

el和data的两种写法

在这里插入图片描述

el的两种写法：

在这里插入图片描述

data的两种写法：

在这里插入图片描述

第二种方式可以删掉:function。

数据代理

Object.defineProperty

<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>

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。 在这里插入图片描述

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）。好处：更加方便的操作data中的数据。vm._data=data 基本原理： 通过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)" 效果一致，但后者可以传参；

<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:'尚硅谷',
		},
		methods:{
			showInfo1(event){
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！')
			},
			showInfo2(event,number){
				console.log(event,number)
				alert('同学你好！！')
			}
		}
	})
</script>

Vue中的事件修饰符

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

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

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

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

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

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

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<!-- 阻止默认事件（调用showInfo后不会跳转a链接） -->
	<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

	<!-- 阻止事件冒泡（常用） -->
	<div class="demo1" @click="showInfo">
		<button @click.stop="showInfo">点我提示信息</button>
		<!-- 修饰符可以连续写 -->
		<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
	</div>

	<!-- 事件触发一次后再点击就无效了（常用） -->
	<button @click.once="showInfo">点我提示信息</button>

	<!-- 使用事件的捕获模式，本应输出2 1，加了.capture后输出1 2 -->
	<div class="box1" @click.capture="showMsg(1)">
		div1
		<div class="box2" @click="showMsg(2)">
			div2
		</div>
	</div>

	<!-- 只有event.target是当前操作的元素时才触发事件，点按钮时不会触发冒泡到div； -->
	<div class="demo1" @click.self="showInfo">
		<button @click="showInfo">点我提示信息</button>
	</div>

	<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
	<ul @wheel.passive="demo" class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			name:'尚硅谷'
		},
		methods:{
			showInfo(e){
				alert('同学你好！')
				// console.log(e.target)
			},
			showMsg(msg){
				console.log(msg)
			},
			demo(){
				for (let i = 0; i < 100000; i++) {
					console.log('#')
				}
				console.log('累坏了')
			}
		}
	})
</script>

键盘事件

1.Vue中常用的按键别名：

回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名e.g.:caps-lock） 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修饰键的同时，再随意按下其他一个键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 4.也可以使用keyCode去指定具体的按键（不推荐） 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名.。

<div id="root">
	<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script type="text/javascript">
	Vue.config.keyCodes.huiche = 13 //定义了一个enter的别名按键

	new Vue({
		el:'#root',
		data:{
			name:'123'
		},
		methods: {
			showInfo(e){
				// console.log(e.key,e.keyCode)
				console.log(e.target.value)
			}
		}
	})
</script>

绑定样式

  1. class样式 写法：:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  2. style样式 对象写法：:style="{fontSize: xxx}"其中xxx是动态值。//e.g.:style="{fontSize: fsize+'px'},然后在vue的data中写fsize:40。 数组写法：: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;
	}

	.atguigu1{
		background-color: yellowgreen;
	}
	.atguigu2{
		font-size: 30px;
		text-shadow:2px 2px 10px red;
	}
	.atguigu3{
		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">
	const vm = new Vue({
		el:'#root',
		data:{
			name:'ZAG',
			mood:'normal',
			classArr:['atguigu1','atguigu2','atguigu3'],
			classObj:{//改成true会生效
				atguigu1:false,
				atguigu2: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>

箭头函数

注意：箭头函数没有自己的this

setTimeout(()=>{
	this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
},3000)
avatar
文章
阅读
粉丝