v-for指令的用法
v-for指令用于重复输出当前元素。
案例：写一个新的组件页面：For.vue 当访问： /for时看到它。
场景1
遍历字符串数组输出每一个列表项元素：
data: {nav: ['京东超市','京东家电','秒杀','拍卖','京东生鲜','PLUS会员']
}
<ul><li v-for="item in nav">{{item}}</li>
</ul>上述写法，类似于：
for(let i=0; i<nav.length; i++){let item = nav[i]输出 `<li> ${item} </li>`
}场景2
遍历对象数组输出每一个列表项元素：
data: {movies: [{id:1, name:'交换余生', showingon:'2021-10-10', duration:124},{id:2, name:'杀手', showingon:'2022-10-09', duration:114},{id:3, name:'功夫', showingon:'2023-1-10', duration:194},{id:4, name:'功夫熊猫', showingon:'2011-05-10', duration:141}]
}
<div><div v-for="item in movies" :key="item.id">ID：{{item.id}} | 名称：{{item.name}} | 上映时间：{{item.showingon}} | 时长：{{item.duration}}分钟</div>
</div>拓展1
在使用v-for遍历输出数组数据的同时，引用数组的下标：
<div v-for="(item,i) in movies" :key="item.id">..{{i}} 下标
</div>拓展2
纯粹的按照数量重复输出元素：
<div v-for="item in 100" :key="item">内容</div>:key的作用
v-for指令一般都需要配一个v-bind:key（简写 :key）来为每一个列表项设置一个唯一标识符（简单理解为每一个item一个名字）。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了，后续由于列表数据的变化需要重新渲染列表时，将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过（比较列表项的key在原始列表中是否已经存在），如果已经渲染过，就不会重新创建DOM了。
那么一般将什么设置为:key的值？
<div v-for="(item,i) in list" :key="item.id"></div> id是唯一属性
<div v-for="(item,i) in list" :key="i"></div> 下标 但不建议:key的数据类型只能是number和string，不能是对象。同一个列表中的列表项的key不能重复，否则控制台报错。
Vue中的计算属性
Vue提供了一种特殊的属性：计算属性（Computed）。这种属性本质上是一个函数（由函数内部计算返回结果）。计算属性可以在template中以属性的语法进行访问。如果计算过程中所需要的变量有变化，则计算属性的结果也将会及时更新。
data() {},
methods: {},
computed: { // computed中定义计算属性totalPrice(){ // 计算属性的本质是个函数 函数名就是计算属性名return xxx}
}
<span>计算结果：{{totalPrice}}</span>将函数定义在计算属性中(computed)与方法中(methods)的区别。
如果定义成方法，那么调用时需要: {{ getTotal() }}
如果定义成计算属性，不需要小括号：{{ totalPrice }}
如果定义成计算属性，则第一次计算结束后，将会把结果缓存下来，以后直接使用（不去重新计算）。当计算时所涉及到的响应式变量有变化时，才会重新计算 计算属性的结果。
表单元素的双向数据绑定指令 v-model
加入有如下输入框：
<input v-model="name" type="text" placeholder="">
data: {name: ''
}只需要按照上述写法，即可完成输入框的value属性与data中name之间的双向数据绑定：
-
只要有输入框value有变化（输入了数据），name也将更新。
-
只要data中的name有变化（js修改了name），那么输入框中的文本也将更新。
案例：编写一个注册页面：views/Register.vue。提供一个注册表单。
访问：http://localhost:8080/register看到该注册页面。
Vue的监听器 Watch
vue为了更好的监控所管理的响应式变量的变化，提供了数据监听器：watch。通过监听器就可以监听数据的动态改变：一旦被监听的响应式变量的值有变化，就会立即执行相应方法。
基本语法如下：
data() {return {name: ''}
},
watch: { // 定义监听器// 声明一个与被监听变量同名的方法即可监听该变量，且传入两个参数(新值, 旧值)name(newValue, oldValue){ }
}其他表单组件的双向数据绑定方式
<template><div><h3>注册</h3><hr>用户账号：<input v-model="form.name" type="text"><hr>用户密码：<input v-model="form.pwd" type="password"><hr>确认密码：<input v-model="form.pwd2" type="password"><hr>用户手机：<input v-model="form.phone" type="text"><hr>证件类型：<input type="radio" v-model="form.idcard" value="sfz">身份证<input type="radio" v-model="form.idcard" value="jgz">军官证<input type="radio" v-model="form.idcard" value="sbk">社保卡<input type="radio" v-model="form.idcard" value="jz">驾照<hr>感兴趣的行业：<input v-model="form.hy" value="jr" type="checkbox">金融<input v-model="form.hy" value="yl" type="checkbox">医疗<input v-model="form.hy" value="hlw" type="checkbox">互联网<input v-model="form.hy" value="zmt" type="checkbox">自媒体<input v-model="form.hy" value="ai" type="checkbox">AI+<hr>选择籍贯：<select v-model="form.jg"><option value="hn">河南省</option><option value="hb">河北省</option><option value="sd">山东省</option><option value="sx">山西省</option></select>
<hr><button @click="submit">提交</button><button @click="reset">重置</button></div>
</template>
自定义指令
<p v-red>文本</p>
<p v-blue>文本</p>
directives: { // 自定义指令 red: { // 自定义指令的名字为v-red 示例：<span v-red></span>//当拥有该指令的dom元素被插入到DOM树后，自动执行inserted// 并且传入绑定了该指令的DOM对象：elinserted(el){el.style.color="red"}}
}Axios
axios是一个网络通讯库，封装了原生的ajax，提供了一些简单的API辅助程序员方便的发送http、https请求。底层基于Promise而设计。
安装axios
# 在项目目录下安装axios
npm i axios在浏览器中测试一个接口是否畅通：
https://web.codeboy.com/bmdapi/movie-infos?page=1&pagesize=20
基于axios发送get请求
import axios from 'axios'
let instance = axios.create()
instance({url: 'https://web.codeboy.com/bmdapi/movie-infos',method: 'GET',params: {page:1, pagesize:20}
}).then(res=>{res就是正确的响应结果
}).catch(err=>{err就是错误的结果
})也可以如下发送get请求传参：
import axios from 'axios'
let instance = axios.create()
instance({url: 'https://web.codeboy.com/bmdapi/movie-infos?page=1&pagesize=20',method: 'GET'
}).then(res=>{res就是正确的响应结果
}).catch(err=>{err就是错误的结果
})