Vue3极速上手-想要学好Vue3基础看这篇就够了

---

前言

哈喽～，我是老石，我又回来了。周末放松了一下，拖了两天更，现在我们接着来学Vue3的基础。喜欢老石的话点点关注！（拜托，点关注的人超酷的好吧！！）

---

提示：以下是本篇文章正文内容，下面案例可供参考
这是链接哦: 前期回顾.

一、Vue3 计算属性

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的

代码如下（示例）：

		<div id="app">
			<p>{{msg}}</p>
			<input type="text" v-model="msg" />
			<p>{{rmsg}}</p>
		</div>

<script type="text/javascript">
		Vue.createApp({
			//计算出来的数据是只读的不能修改
			computed:{
				"rmsg"(){
					//split 字符串分割数组  reverse反转数组  jojn数组连接字符串
					return this.msg.split("").reverse().join("")
				}
			},
			data(){
				return{
					msg:"郭德纲的锅"
				}
			}
		}).mount("#app")
		</script>

运行结果如下：

搜索案例

效果：通过输入框来搜索想获的目标元素。就是从现有数据 计算出和关键字相关的的数据

实现步骤：

1. 获取输入框输入的关键字
2. 遍历数据内容
3. 把对象变字符串
4. 如果字符串内包含关键字内容就保存，反则舍弃

HTML代码如下（示例）

<div id="app">
			<input type="text" placeholder="搜索" v-model.trim="keyword">
			<table border="1">
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>电话</td>
				</tr>
				<!--：key 帮助vue更好的优化  -->
				<tr v-for="item in fstudents" :key="item.phone">
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.age}}</td>
					<td>{{item.phone}}</td>
				</tr>
			</table>
		</div>

js代码如下（示例）

<script>
			// 搜索，其实就是从现有数据student 计算出和keyword 相关的的数据
			// 需要遍历students数据，如果当前行对象的数据包含了keyword ，当前行保留
			Vue.createApp({
				computed: {
					"fstudents": function() {
						return this.students.filter(item => {
							var flag = true; // 默认返回true
							if (this.keyword !== '') {
								// 把当前行转换为字符串
								var str = JSON.stringify(item);
								// 如果str包含了keyword设置flag为true，否则设置flag值为false
								str.includes(this.keyword) ? flag = true : flag = false;
							}
							// 如果flag为true，当前行的数据就保留，否则就过滤掉
							// （str包含了关键字，当前行保留，不包含当前行过滤掉）
							return flag;
						});
					}
				},
				data() {
					return {
						keyword: '', //搜索关键字
						// 学生列表
						students: [{
								name: '张三',
								sex: '女',
								age: 19,
								phone: '18921212121'
							},
							{
								name: '李四',
								sex: '男',
								age: 29,
								phone: '18921221122'
							},
							{
								name: '王五',
								sex: '女',
								age: 39,
								phone: '18921788723'
							},
							{
								name: '赵六',
								sex: '男',
								age: 49,
								phone: '18921556124'
							},
							{
								name: '曾七',
								sex: '男',
								age: 29,
								phone: '18921221125'
							},
							{
								name: '刘八',
								sex: '女',
								age: 39,
								phone: '18921788726'
							},
							{
								name: '黄九',
								sex: '男',
								age: 29,
								phone: '18921221127'
							},
							
							{
								name: '张三',
								sex: '女',
								age: 19,
								phone: '18921212112'
							},
							{
								name: '李四',
								sex: '男',
								age: 29,
								phone: '18921221113'
							},
							{
								name: '王五',
								sex: '女',
								age: 39,
								phone: '18921788714'
							},
							{
								name: '赵六',
								sex: '男',
								age: 49,
								phone: '18921556115'
							},
							{
								name: '李四',
								sex: '男',
								age: 29,
								phone: '18921221116'
							},
							{
								name: '王五',
								sex: '女',
								age: 39,
								phone: '18921788717'
							},
							{
								name: '李四',
								sex: '男',
								age: 29,
								phone: '18921221118'
							},
							{
								name: '王五',
								sex: '女',
								age: 39,
								phone: '18921788719'
							},
							{
								name: '王五',
								sex: '女',
								age: 39,
								phone: '18921788720'
							},
							{
								name: '赵六',
								sex: '男',
								age: 49,
								phone: '18921556131'
							},
							{
								name: '李五五',
								sex: '男',
								age: 29,
								phone: '18921221133'
							}
						]
					}
				}
			}).mount("#app")
		</script>

二、Vue3 监听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

代码如下（示例）：

		<div id="app">
			<button type="button" @click="num++">{{num}}</button>
			<!--引用类型需要具体到键>
			<!-- <button type="button" @click="num.n++">{{num.n}}</button> -->
		</div>
		<script type="text/javascript">
			Vue.createApp({
				watch:{
					//如果是引用类型的话要加上deep
					"num":{
						handler(nval,oval){
							//nval是修改后当前值  oval是修改前的值
							// console.log('数据由'+oval.n+"变成了"+nval.n);
							
							console.log('数据由'+oval+"变成了"+nval);
						},
						deep:true
					}
				},
				data(){
					return {
						num:1,
						// num:{n:1}
					}
				}
			}).mount("#app")
		</script>

注意如果是引用类型的话oval是监测不到的

以下实例通过使用 watch实现简易计算器：

计算器案例

我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。 不再需要添加点击事件，代码优化了很多

代码如下（示例）：

<div id="app">
			<input type="text" v-model.number="obj.n1" />
			<select v-model="obj.type">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">✖️</option>
				<option value="/">➗</option>
			</select>
			<input type="text" v-model.number="obj.n2" />
			<button type="button">=</button>
			<span>{{obj.n3}}</span>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				watch: {
					//默认发obj是对象引用类型 obj内容地址没有编号
					//对象监听需要用deep深度监听
					//handler处理只能拿到最新的值
					"obj": {
						handler() {
							this.obj.n3 = eval(this.obj.n1 + this.obj.type + this.obj.n2)
							// this.obj.n3=eval(`(${this.obj.n1})${this.obj.type}(${this.obj.n2})`)	
						},
						deep: true //深度监听
					}
				},
				data() {
					return {
						obj: {
						//默认值
							n1: 0,
							n2: 0,
							type: "+",
							n3: 0
						}
					}
				}
			}).mount("#app")
		</script>

三、Vue3 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。

1.class 属性绑定

语法：v-bind:class 可以简写为 :class。

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

代码如下（示例）：

	<style type="text/css">
			.active{
				background-color: red;
				color: #FFF;
			}
			.isBig{
				font-size: 24px;
			}
	</style>

	<body>
		<div id="app">
		
		<p :class="list">我在美国，微信转账100块，直播占领白宫</p>
		<p :class="['active','isBig']">我在中国，反对美帝，呼吁和平</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						list:['active','isBig'],
						styleObj:{
							"active":true,
							"isBif":true
						}
					}
				}
			}).mount("#app")
		</script>

大家可以看见两个效果是一样的

style内联样式绑定

我们可以在 v-bind:style 直接设置样式，可以简写为 :style：

代码如下（示例）：

<div id="app">
			<button @click="size++">增加1个像素</button>
			<button @click="size--">减少1个像素</button>
			<p :style="{fontSize:size+'px',color:'red'}">我在中国，反对美帝，呼吁和平</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						size:16
					}
				}
			}).mount("#app")
		</script>

四、自定义属性

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

		<div id="app">
			<input type="text" v-focus="flag"> <button @click="flag=!flag">获取</button>
		</div>
		<script>
			Vue.createApp({
				data(){
					return {flag:true}
				},
				// 自定义指令：操作dom
				directives:{
					// 指令的名称是focus
					"focus":{
						// mounted;定dom节点挂载后执行
						// beforeUpdate,更新前;
						beforeUpdate(el,binding){
							// el 指令所在的dom节点
							// binding.value 指令的值
							console.log(el,binding);
							// 如果指令的值为真，则获取焦点，否则失去焦点
							if(binding.value){
								el.focus()
							}
						}
					}
				}
				 
			}).mount("#app")
		</script>

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用

这是链接: Vue3基础回顾.

---

• 创作不易，深夜肝文，如果对大家有帮助，还请大家支持一波~
• 点赞，关注，收藏走一波，感激不尽！
• 要想学好Vue ,关注老石不迷路