Vue——必知必会

文章目录

• 项目准备
• 1，初识Vue
• 2，模版语法
• 3，数据绑定
• 4，el与data的第二种写法
• 5，MVVM模型
• 6，事件处理
• • • 基本使用
    • 参数传递
    • 修饰符
• 7，计算属性与监听
• • • 计算属性
    • 监听属性
• 8，class与style
• • • class
    • style
• 9，条件渲染
• 10，列表渲染
• • • 列表过滤
    • 列表排序
    • 更新条件
• 11，过滤器
• 12，其他常用指令

项目准备

有两种方式：

1，单个html文件（推荐）
Vue——入门案例

2，Vue脚手架
Vue——使用脚手架

1，初识Vue

入门案例要牢记

<template>
	<div>
		{{msg}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: "你好，世界"
			}
		}
	}
</script>

效果：

2，模版语法

插值表达式：
在标签体中显示变量的值，可以是任意JS表达式。
{{msg}}

指令：
在标签属性中，以v-开头，有各自的功能。

:href：指定href属性。

<template>
	<div>
		<a :href="url">百度</a>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				url:"http://www.baidu.com"
			}
		}
	}
</script>

模版：放一个东西占地方，之后再填充特定的值。

3，数据绑定

单向：DOM值变data，或者data变DOM值。
双向：DOM和data同步变化。
v-model：将变量与表单value双向绑定。

<template>
	<div>
		<input type="text" v-model="uname">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: "1234"
			}
		}
	}
</script>

效果，改变data：

效果，改变DOM：

实现原理：JS杂技——手写双向绑定

4，el与data的第二种写法

el可以在创建实例之后绑定DOM。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

data可以指定为一个函数，创建的时候自动调用。

<template>
	<div>
		<input type="text" v-model="uname">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: "1234"
			}
		}
	}
</script>

5，MVVM模型

M：数据，变量，状态。
V：View视图，页面，DOM。
VM：Vue实例。

由Vue实例管理数据与DOM的关系。

比如：
由数据获得DOM值。
由视图的变化触发数据的变化。

数据代理：不直接操作数据，而是经过中间商赚差价，瓜子二手车。。。念顺口了。

6，事件处理

基本使用

@change：指定onchange事件

<template>
	<div>
		<input type="text" @change="sayInfo" v-model="uname">
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: "1234"
			}
		},
		methods: {
			sayInfo() {
				console.log(this.uname);
			}
		}
	}
</script>

效果：

参数传递

$event代表事件，其他随意。

<input type="text" @change="sayInfo($event,1,2,3,4)" />

sayInfo(event, a, b, c, d) {
	console.log(event.target.value + "," + a + "," + b + "," + c + "," + d);
}

效果：
输入123：

修饰符

@xxx后面可以跟一些东西，有特殊的效果。

.prevent	阻止默认
.stop	阻止冒泡
.once	只触发一次
.capture	捕获模式
.self	自身才能触发
.passive	立即执行默认行为

举例：
让链接不跳转（阻止默认行为）

<a href="https://www.baidu.com/" @click.prevent="">百度一下，也没有用</a>

此外，还有按键修饰符。

指定按键才会触发。

.enter
.delete
.esc
.space
.tab

举例：回车登陆

<template>
	<div>
		<input type="text" @keypress.enter="login" v-model="uname" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: ""
			}
		},
		methods: {
			login() {
				console.log("登陆了，用户名:" + this.uname);
			}
		}
	}
</script>

7，计算属性与监听

计算属性

可以由data中的数据生成新的数据。

源数据变动时，计算属性也会跟着变。

举例：值的首字母大写形式。

<template>
	<div>
		<input type="text" v-model="uname" /><br />
		uname:{{uname}}<br />
		bigger:{{bigger}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: ""
			}
		},
		computed: {
			bigger() {
				return this.uname.charAt(0).toUpperCase() + this.uname.slice(1)
			}
		}
	}
</script>

效果：

监听属性

可以在数据变动时执行方法。

举例：达到11位数时显示按钮。

immediate：是否在一开始就执行一次。
handler：监听触发的方法。

<template>
	<div>
		<input type="text" v-model="tel" />
		<button v-if="isActive">发送短信</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tel: "",
				isActive: false
			}
		},
		watch: {
			tel: {
				immediate: false,
				handler(newV, oldV) {
					console.log(newV + "," + oldV);
					if (newV.length == 11) {
						this.isActive = true;
					} else {
						this.isActive = false;
					}
				}
			}
		}
	}
</script>

效果：

深度监视：监视a的时候，a的属性的属性变化也会触发。
开启：deep：true。

8，class与style

class

:class可以与class共存。

值为数组：多个类名

"['a','b','c']"

值为对象：键是类名，值是true，false。为false不会出现在DOM中。

"{a:true,b:true,c:false}"

举例：时大时小的文字。

<template>
	<div>
		<p :class="{big:isBig}" @click="isBig=!isBig">你好，世界</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isBig: false
			}
		}
	}
</script>
<style scoped>
	.big {
		font-size: 32px;
	}
</style>

效果：

style

用的不多，因为行内样式用的不多。

值为对象，键为样式名小驼峰，值为值串。

对象数组，同理。

9，条件渲染

v-if：if块
v-else-if：else-if块
v-else：else块

v-show：显示隐藏，而不是移除DOM。

举例：为偶数则显示。

<template>
	<div>
		<span v-if="count%2==0">{{count}}</span><button @click="count++">加</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				count: 0
			}
		}
	}
</script>

效果：

10，列表渲染

v-for：for循环显示多个该标签。
:key：有助于效率，建议必加，唯一，ID。

举例：简单显示列表。

<template>
	<div>
		<ul>
			<li v-for="(item,index) in list" :key="index">
				{{item.uname}},{{item.age}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					uname: "A",
					age: 23
				}, {
					uname: "B",
					age: 12
				}, {
					uname: "C",
					age: 99
				}]
			}
		}
	}
</script>

效果：

列表过滤

由计算属性实现。

<template>
	<div>
		<input type="text" v-model="search" />
		<ul>
			<li v-for="(item,index) in list2" :key="index">
				{{item.uname}},{{item.age}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					uname: "A",
					age: 23
				}, {
					uname: "B",
					age: 12
				}, {
					uname: "C",
					age: 99
				}],
				search: ""
			}
		},
		computed: {
			list2() {
				return this.list.filter(i => i.uname.indexOf(this.search) != -1);
			}
		}
	}
</script>

效果：

列表排序

同理。

computed: {
	list2() {
		return this.list.sort((a, b) => a.age - b.age);
	},
	list3() {
		return this.list.sort((a, b) => b.age - a.age);
	}
}

更新条件

1，对象直接赋值新对象，将会无法发现该更新。

原理：原对象有更新功能，新对象没有。

2，后添加的数据，没有功能。

因为它也是你写的。

3，解决方法

this.$set(对象，属性名，值)

4，数组特定方法才能更新
push，pop，shift，unshift，splice，sort，reverse

11，过滤器

为数据提供一些处理，和计算属性差不多。

举例：首字母大写。

<template>
	<div>
		<input type="text" v-model="uname" /><br />
		uname:{{uname}}<br />
		bigger:{{bigger}}<br />
		bigger2:{{uname|bigger2}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				uname: ""
			}
		},
		computed: {
			bigger() {
				return this.uname.charAt(0).toUpperCase() + this.uname.slice(1)
			}
		},
		filters: {
			bigger2(v) {
				return v.charAt(0).toUpperCase() + v.slice(1)
			}
		}
	}
</script>

效果：

12，其他常用指令

v-text：innerText
v-html：innerHtml

v-clock：在渲染该标签之前，隐藏该标签。不会看到{{msg}}这种。

v-once：只会渲染一次，之后就不管它了，常量。
v-pre：直接就不管它了。