【Vue-vue基础知识】学习笔记

<<回到导览
vue基础知识
- 1.1.创建一个vue实例
- 1.2.vue基础指令
- - 1.2.1.v-bind
  - 1.2.2.v-model
  - 1.2.3.常用事件
  - 1.2.4.指令修饰符
- 1.3.计算属性
- - 1.3.1.计算属性的完整写法
  - 1.3.2.【案例】成绩
- 1.4.watch
- - 1.4.1.watch属性
  - 1.4.2.翻译业务实现
  - 1.4.3.watch属性的完整写法
  - 1.4.4.【案例】水果购物车
- 1.5.生命周期
- - 1.5.1.【应用】初始化渲染
  - 1.5.2.【应用】获取焦点

<<回到导览

vue基础知识

mvvm模型

响应式数据，一旦数据变化，视图效果跟着变化

1.1.创建一个vue实例

代码：

 <!-- 1.准备容器 --><div id="app">{{msg}}{{age-1}}</div><!-- 2.引入开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 3.创建实例const app = new Vue({// 4.添加配置项el: '#app',// el => 挂载data: {msg: 'hello',age: 18}})

插值表达式

用{{}}包裹变量名，将表达式插值，如上面{{msg}}和{{age-1}}，浏览器会分别渲染值hello和 17
响应式特性

响应式：数据变化，视图自动更新，当我们修改数据后，vue会监听到数据修改，从而改变视图

data里的数据会添加到实例身上，以上面实例为例子，我们可以通过app访问属性msg和age
)

1.2.vue基础指令

一些基础指令：

    <!-- 1.v-html  =>  innerHtml   --><div v-html="msg2"></div><!-- 2.v-show  =>  通过display来显示和隐藏  =>  一般用于交互频繁  --><div v-show="flag3">333</div><!-- 3.v-if  =>   条件渲染                 =>  用于交互不频繁    --><div v-if="flag3">444</div><!-- 4.v-if、 v-else-if   v-else          =>   条件渲染  --><!-- 5.v-on 注册事件  每点击一下，count -1 -->v-on:click="count--"   =>   @click="count--"

methods属性（用于存放事件方法）

<!-- 点击按钮，调用methods方法，弹出提示框 -->
<button @click="methods">methods</button><!-- js -->
methods: {methods() {alert('methods')}
}

7.v-for（基于数组循环，多次渲染整个元素，v-for="(item,index) in arr）
```

<li v-for="(item, index) in list">{{index+1}}.{{item}}</li>
```
v-for中的key：给元素添加唯一标识，用于列表项的正确排序（key值必须具有唯一性，不推荐以index作为key值）

1.2.1.v-bind

可省略成: ，用于实现熟悉的响应式

  <!-- imgUrl为配置项中data中的数据 --><img v-bind:src="imgUrl"><!-- 等价为 --><img :src="imgUrl" alt="">

v-bind可以操作class

传对象

应用场景：一个类名，来回切换（tab栏）

<!-- size、pink、green都为类名 -->
<div class="box" :class="{size:true,pink:false,green:true}">123</div>

传数组

应用场景：批量添加或者删除类

<div class="box" :class="['pink','size']">223</div>

style行内样式

应用场景：非常方便地控制某个样式属性的变化（进度条），数值拼接单位
```
<div class="box" :style="{'background-color':'green'}"></div>
```

1.2.2.v-model

v-modal 可以让数据和视图双向绑定，快速获取或者设置表单元素内容

<!-- input框值变化，data中对应的数据也会变化 -->
<input type="text" v-model="username"><br>

对于不同的表单元素， v-modal 的绑定也有所不同

表单元素	绑定	备注
输入框	value	text
文本域	value	textarea
复选框	checked	checkbox
单选框	checked	radio，name将单选框关联
下拉菜单	selected元素中，option选项的value值	selected、option

1.2.3.常用事件

事件	触发
`@click`	单击触发
`v-model`	常用于绑定input事件
`@submit`	表单提交触发
`@mouseover`	鼠标悬停触发
`@mouseout`	鼠标移开触发

焦点事件

事件触发
@focus 元素获得焦点
@blur 元素失去焦点
表单事件

事件触发
@reset 点击重置按钮时
@submit 点击提交按钮
键盘事件

事件触发
@keydown 按下任意按键。
@keypress 除 Shift、Fn、CapsLock 外的任意键被按住。
@keyup 按键弹起

事件	触发
`@focus`	元素获得焦点
`@blur`	元素失去焦点

事件	触发
`@reset`	点击重置按钮时
`@submit`	点击提交按钮

事件	触发
`@keydown`	按下任意按键。
`@keypress`	除 Shift、Fn、CapsLock 外的任意键被按住。
`@keyup`	按键弹起

1.2.4.指令修饰符

按键修饰符
- @keyup.enter：键盘回车监听
v-model修饰符
- v-model.trim：去首尾空格
- v-model.number：转数字
事件修饰符
- 事件名.stop：阻止冒泡
- 事件名.prevent：阻止默认行为
其他
- once：事件只触发一次

1.3.计算属性

计算属性会对计算结果缓存，依赖项变了，会自动重新计算，并再次缓存，缓存可以被直接读取（性能高）

1.methods属性

<p>礼物总数：{{ total() }} 个</p>
<p>礼物总数：{{ total() }} 个</p>
<p>礼物总数：{{ total() }} 个</p><!-- js中 -->
data: {list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]
},
methods: {total() {console.log("执行了一次。");return this.list.reduce((sum, item) => sum + item.num, 0)}
}

控制台会打印三次"执行了一次。"

computed属性

 <!-- 计算属性依旧是属性,不用加（） -->
<p>礼物总数：{{ total }} 个</p>
<p>礼物总数：{{ total }} 个</p>
<p>礼物总数：{{ total }} 个</p><!-- js中 -->
computed: {封装一段对于数据的处理，求得一个结果total() {console.log("执行了一次。");return this.list.reduce((sum, item) => sum + item.num, 0)}
}

控制台会打印一次"执行了一次。"

1.3.1.计算属性的完整写法

计算属性默认只能访问，不能修改，如果要修改，需要计算属性的完整写法

computed:{fullName（）{return this.firstName + this.lastName}
}

以上写法等价于

computed:{fullName:{get(){return this.firstName + this.lastName}}
}

上面写法只能通过监听firstName和lastName，来动态改变fullName的值
现在假设fullName会变化，我们fullName变化时，有对firstName和lastName进行拆分的需求，就需要计算属性的完整写法

computed:{fullName:{// 监听firstName和lastName，动态改变fullName的值get(){return this.firstName + this.lastName},// 监听fullName，动态改变firstName和lastName的值set(value){this.firstName = value.slice(0,1))this.lastName = value.slice(1)}}
}

从上面可以看出，set方法的形参value为fullName的值

当然除了改变firstName和lastName的值，还可以做出其他的一些操作，这里就不一一例举了

1.3.2.【案例】成绩

成品图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>Document</title>
</head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length>0"><tr v-for="(item,index) in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td :class="{red:item.score<60}">{{item.score}}</td><td><a href="#" @click="del(item.id)">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:{{total}}</span><span style="margin-left: 50px">平均分:{{average}}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><input type="text" placeholder="请输入科目" v-model="subject" /></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><input type="text" placeholder="请输入分数" v-model="score" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" @click="add">添加</button></div></div></div></div><script src="../../vue/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 20 },{ id: 2, subject: '数学', score: 99 },{ id: 3, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del(id) {this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject || !this.score) {alert('没有输入科目或者分数！！！')} else {// 往数组前面加this.list.unshift({// 以时间戳作为id,来设置keyid: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}},computed: {total() {return this.list.reduce((sum, item) => sum + item.score, 0)},average() {if (this.list.length == 0) {return 0} else {return this.total / (this.list.length)}}}})</script>
</body></html>

重要知识点

删除逻辑
```
 del(id) {this.list = this.list.filter(item => item.id !== id)},
```
- 通过点击触发del方法，传入id
- 通过filter，从list过滤出和被点击项的id不同的id项，重新赋值给list（即从list删除点击项）

求和逻辑

  total() {return this.list.reduce((sum, item) => sum + item.score, 0)},

reduce累加器的运用

加入数组
- 往数组前面加：unshift(）方法
- 往数组后面加：push(）方法

1.4.watch

1.4.1.watch属性

作用：监视数据变化，执行业务逻辑或异步操作

watch:{//  该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用） words(newValue, oldValue) {console.log('变化了', newValue,, oldValue)}
}

以上代码监听了data里的数据words，如果我们要监听data里obj对象属性words，则应该写为 'obj.words'

 'obj.words'(newValue) {console.log('变化了', newValue)}

1.4.2.翻译业务实现

 watch: {'obj.words'(newValue) {  clearTimeout(this.timerId)this.timerId = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words:newValue}})this.result = res.data.data}, 300)},}

知识点

防抖处理

1.4.3.watch属性的完整写法

额外配置项

配置项效果
deep:true 深度监视，对象的子元素变化也会触发
immediate:true 初始化立即执行一次

配置项	效果
`deep:true`	深度监视，对象的子元素变化也会触发
`immediate:true`	初始化立即执行一次

上面的翻译业务实现还可以升级为，通过改变翻译语言也会触发watch监听

对象obj有属性words和属性language
对象进行深度监视，对象的任何一个属性（words和language）发生变化，都会触发重新翻译

watch: {obj: {deep: true,         // 深度监视immediate: true,    // 立即执行handler(newValue) {clearTimeout(this.timerId)this.timerId = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.data}, 300)}},
}

1.4.4.【案例】水果购物车

成品图：
js代码

const dedaultArr = [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 1,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 1,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 1,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 1,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 1,price: 32,},
]
const app = new Vue({el: '#app',data: {// 水果列表bannerSrc: 'img/fruit.jpg',fruitList: JSON.parse(localStorage.getItem('list')) || dedaultArr},methods: {del(id) {return this.fruitList = this.fruitList.filter(item => item.id != id)}},computed: {// 计算选中个数totalCount() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num} else {return sum}}, 0)},// 计算总价totalPrice() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {return sum + item.num * item.price} else {return sum}}, 0)},all: {get() {// return的值决定全选框是否勾选// 必须所有框都选中，全选按钮才选中（every）return this.fruitList.every(item => item.isChecked)},set(value) {// 全选按钮的value影响其他框this.fruitList.forEach(item => item.isChecked = value);}}},watch: {fruitList: {deep: true,handler(newValue) {localStorage.setItem('list', JSON.stringify(newValue))}}}
})

部分html代码展示

<div class="tbody"><div class="tr active" v-for="(item,index) in fruitList"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{item.price}}</div><div class="td"><div class="my-input-number"><button class="decrease" @click="item.num--"> - </button><span class="my-input__inner">{{item.num}}</span><button class="increase" @click="item.num++"> + </button></div></div><div class="td">{{item.num*item.price}}</div><div class="td"><button @click="del(item.id)">删除</button></div></div>
</div><!-- 底部 -->
<div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="all" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span><!-- 结算按钮 --><button class="pay">结算( {{totalCount}} )</button></div>
</div>

知识点：

全选框逻辑
1. fruitList里添加属性isChecked来标记item项是否勾选
2. 再通过v-model="item.isChecked”将isChecked和每个子checkbox绑定，即checkbox和勾选状态关联
3. 如果子checkbox发生变化，调用get()
4. 再通过every检查fruitList里的item.isChecked是否全为true，即检查是否全勾选
5. 如果全勾选，返回true，通过v-model="all"反作用于全选的checkbox，使其勾选
6. 如果全选的checkbox发生变化，调用set()，并通过形参value传入all的值
7. 通过forEach，将所有子checkbox的isChecked设置为和all一样的值

1.5.生命周期

在不同的生命周期，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行代码

生命周期四个阶段

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例
生命周期钩子

1.5.1.【应用】初始化渲染

在created生命周期，发送获取数据的请求

const app = new Vue({el: '#app',data: {list: []},async created() {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2.将获取的数据写入数据列表this.list = res.data.data}
})
</script>

1.5.2.【应用】获取焦点

在mounted生命周期，获取焦点(操作dom)

const app = new Vue({el: '#app',data: {words: ''},mounted() {document.querySelector('#inp').focus()}
})