Vue2基础指令

Vue使用核心步骤（4步）：

准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
1. el:指定挂载点
2. data提供数据

<body><div id="app"><h1>{{ message }}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>

一、插值表达式 {{}}

插值表达式是一种Vue的模板语法，利用表达式进行插值，动态渲染到页面中

我们可以用插值表达式渲染出Vue提供的数据

<body><div id="app"><h1>{{ message }}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>

不能在标签属性中使用 {{ }} 插值，插值表达式只能标签中间使用

二、Vue指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

1. 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容
v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

  <div id="app"><h2>个人信息</h2>// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可<p v-text="uname">姓名：</p> <p v-html="intro">简介：</p></div> <script>const app = new Vue({el:'#app',data:{uname:'张三',intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'}})
</script>

2. 条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show
1. 作用：控制元素显示隐藏
2. 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
3. 原理：切换 display:none 控制显示隐藏
4. 场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= “表达式” 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

示例代码：

<div id="app"><div v-show="flag" class="box">我是v-show控制的盒子</div><div v-if="flag" class="box">我是v-if控制的盒子</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false}})</script>

v-else 和 v-else-if
1. 作用：辅助v-if进行判断渲染
2. 语法：v-else v-else-if=“表达式”
3. 需要紧接着v-if使用

示例代码：

<div id="app"><p v-if="gender === 1">性别：♂ 男</p><p v-else>性别：♀ 女</p><hr><p v-if="score >= 90">成绩评定A：奖励电脑一台</p><p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p><p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p><p v-else>成绩评定D：惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender: 2,score: 95}})</script>

3. 事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名=“内联语句”>按钮
<button v-on:事件名=“处理函数”>按钮
<button v-on:事件名=“处理函数(实参)”>按钮
v-on: 简写为 @

内联语句

<div id="app"><button @click="count--">-</button><span>{{ count }}</span>//内联式<button v-on:click="count++">+</button>//函数式<button @click="fn">切换显示隐藏</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100},fn () {// 让提供的所有methods中的函数，this都指向当前实例// console.log('执行了fn', app.isShow)// console.log(app3 === this)this.isShow = !this.isShow}})</script>

事件处理函数

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 $event 表示事件对象，固定用法。

注意：
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例

<div id="app"><div class="box"><h3>自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy (price) {this.money -= price}}})</script>

4. 列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

<div id="app"><ul><li v-for="(item, index) in list">{{ item }} - {{ index }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: ['西瓜', '苹果', '鸭梨', '榴莲']}})</script>

v-for中的key

语法： key=“唯一值”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
**为什么加key：**Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

5. 双向绑定指令

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

**语法：**v-model=“变量”

**需求：**使用双向绑定实现以下需求

点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容

<div id="app">账户：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',password: ''}})</script>

v-model在其他表单元素的使用

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value

实例：

<body><div id="app">姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,gender: "2",cityId: '102',desc: ""}})</script>
</body>
</html>

6. 属性绑定指令

**作用：**动态设置html的标签属性比如：src、url、title
语法：**v-bind:**属性名=“表达式”
**v-bind:**可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

  <div id="app"><img v-bind:src="imgUrl" v-bind:title="msg" alt=""><img :src="imgUrl" :title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {imgUrl: './imgs/10-02.png',msg: 'hello 波仔'}})</script>

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

操作class

01.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

02.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

代码示例：

<style>.box {width: 200px;height: 200px;border: 3px solid #000;font-size: 30px;margin-top: 10px;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}
</style>
</head>
<body><div id="app"><!--v-bind对象语法，通过对象的形式来动态绑定class的样式，个别切换。：后可写表达式--><div class="box" :class="{ pink: flase, big: true }">章鱼哥</div> <!--v-bind数组语法，通过数组的形式来动态绑定class的样式,批量操作--><div class="box" :class="['pink', 'big']">章鱼哥</div></div> 
</body>

操作style

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

实例：

<!--v-bind对象语法，通过对象的形式来动态绑定style的样式,样式书写要符合js对象写法-->
<div class="box" :style="{ backgroundColor: 'red', color: 'white'}"></div> 
<!--v-bind对象语法，通过对象的形式来动态绑定style的样式，通过变量来动态绑定-->
<div class="box" :style="{ backgroundColor: bgColor, color: 'white'}"></div>

二、指令修饰符

所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

1. 按键修饰符

@keyup.enter —>当点击enter键的时候才触发

代码演示：

  <div id="app"><!--@keyup.enter指令修饰符，按下enter键触发--><br><input @keyup.enter="fn" v-model="username" type="text"> </div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',passwrod:123},methods: {fn (e) {console.log('键盘回车的时候触发', this.username)}}})</script>

2.v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

3.事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

四、computed计算属性

Vue.js的计算属性是一种强大而常用的特性，用于处理数据逻辑和实时计算属性的值。计算属性可以根据依赖的响应式数据进行缓存，只有在依赖数据发生变化时才会重新计算，从而提高性能和代码的可维护性。

本篇博客将详细介绍Vue.js计算属性的使用方法、常见应用场景以及如何在计算属性中传递参数，帮助您更好地理解和应用计算属性。

基本使用

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名}}

<div>{{ fullName }}</div>
<script>new Vue({data: {firstName: 'John',lastName: 'Doe'},computed: {fullName: function() {// 计算逻辑return this.firstName + ' ' + this.lastName;}}});
</script>

注意：

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

完整写法

既然计算属性也是属性，能访问，应该也能修改了？

计算属性默认的简写，只能读取访问，不能 “修改”
如果要 “修改” → 需要写计算属性的完整写法

完整写法代码演示

<div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span>{{ fullName }}</span><br><br></div><script>const app = new Vue({el: '#app',data: {firstName: '刘',lastName: '备'},computed: { fullName: {// (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）//     会将返回值作为，求值的结果get () {return this.firstName + this.lastName},// (2) 当fullName计算属性，被修改赋值时，执行set//     修改的值，传递给set方法的形参set (value) {       this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>

注：computed有缓存特性

五、watch侦听器（监视器）

vue中，使用watch来响应数据的变化。并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态

语法：

watch同样声明在跟data同级的配置项中

key为所要监视的属性名（名称要与data中的一致对应）

//newval与oldval为自动传过去参数，不需要手动传
//newval为当前属性改变后的值，oldval为当前属性改变前的值
watch: {// 该方法会在数据变化时，触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

watch深度监听

在想要监听的数据是一对象中的属性时则需要使用第二种方法

完整写法 —>添加额外的配置项

deep:true 对复杂类型进行深度监听
immdiate:true 初始化立刻执行一次

data: {obj: {words: '苹果',lang: 'italy'},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}

六、Vue生命周期

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：

第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，[destroyed]

在这里插入图片描述

Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

<script>new Vue({el: "#app",data: {msg: "已被生命周期支配"},// 第一个周期函数：在组件创建之前触发beforeCreate() {console.log('1. 创建之前触发');// 在这个周期中无法操作data中的数据，因此这个周期函数以后一般不用console.log(this.msg);},// 第二个周期函数：在组件创建之后触发created() {console.log('2. 创建之后触发');// 在这个周期中可以操作data中的数据的（常用周期函数之一）console.log(this.msg);// 注意：前后端分离式开发，网络请求就写在这周期里},// 第三个周期函数：在组件挂载之前触发beforeMount() {console.log('3. 挂载之前触发');// 这个周期函数以后一般不用},// 第四个周期函数：在组件挂载之后触发mounted() {console.log('4. 挂载之后触发');// 我们看到的页面渲染完毕呈现在浏览器上，就处于这个周期执行完的位置。// 用于操作以前要求页面加载完毕才能操作的东西。例如：获取滚动条的位置},// 第五个周期函数：在组件更新之前触发beforeUpdate() {console.log('5. 组件更新之前触发');},// 第六个周期函数：在组件更新之后触发updated() {// 注意点：//  1、第五、六周期可能会被重复触发多次，也可能1次都不触发；//  2、不能只是单纯的改变data中的数据，一定要使得页面重新渲染才会走第五/六步骤；//  3、切记不要在5、6周期中书写异步请求并且给具备双向数据绑定的data赋值，会死循环；console.log('6. 组件更新之后触发');},// 第七个周期函数：在组件销毁之前触发beforeDestroy() {// 一般在这里写离开该组件/页面前的善后处理// 例如：清除定时器、移除事件监听、销毁巨耗资源的动画效果、取消还未响应的网络请求等。console.log('7. 组件销毁之前触发');},// 第八个周期函数：在组件销毁之后触发destroyed() {console.log('8. 组件销毁之后触发');}})
</script>