Vue
DAY03
v-for
的使用
v-for
用于循环输出当前元素:
<p v-for="n in 10">文本....文本{{n}} {{n}} {{n}}</p>
上述代码约等于:
for(n=1; n<=10; n++){
随意的使用n变量
dom.append(`<p>文本....文本....${n}</p>`)
}
还可以在遍历的过程中,同时访问数组中的元素与元素对应的下标:
<p class="item" v-for="(m, i) in movies" :key="i">{{m}}</p>
上述代码约等于:
for(i=0; i<movies.length; i++){
let m = movies[i]
dom.append(`<p>${m}</p>`)
}
:key
v-for
指令一般都需要配合一个v-bind:key
(简写::key
) 来为当前每一个列表项添加一个唯一标识符,目的是为了提高列表更新时的DOM
渲染性能。 如果当前列表中已经包含很多列表项了,将会通过key的值检测需要渲染的列表项是否已经渲染过,(判断当前已经渲染的列表项中的key与需要渲染的列表数据中列表项的key是否有相同的,有的话就不再重绘DOM了)。
:key=""
一般将什么数据设置为key
?
<div v-for="(n, i) in data" :key="i"></div> // 下标作为key
<div v-for="(n, i) in data" :key="n.id"></div> // 使用对象的唯一属性
vue
中的计算属性
vue
中提供了一种特殊的属性的语法定义:计算属性。这种属性本质是函数,但是再template
中可以作为属性来直接访问。如果计算属性中相关的变量有变化,将会立即影响计算属性的结果,也会实时更新UI
。
computed: { // computed中用于定义计算属性
// 在此定义的函数称为:计算属性
total() {
// return用于提供计算属性的返回值
return this.getTotalPrice()
}
},
访问计算属性,语法类似访问data
中声明的属性,只不过该属性在computed
中声明为方法,需要执行返回才可以返回属性值。该属性值也会因为涉及到的变量的改变而动态改变。
<div>{{total}}</div>
表单元素与双向数据绑定 v-model
假如有如下输入框:
<input type="text" v-model="form.name" >
<button>提交表单</button>
data(){
return {
form:{
name: '', // 用于 双向绑定 用户名输入框的value值
}
}
}
如上写法,即可实现输入框中填写的内容与data中声明的变量之间的双向数据绑定:
- 如果用户在输入框中输入内容,则data中的变量将会实时更新。
- 如果程序将data中的变量进行了修改(this.name=xx),那么输入框中的内容也会改变。
基于Chrome浏览器安装Vue
的扩展插件:
安装插件。
关闭所有浏览器页面,重新打开chrome后,访问: http://localhost:8080
,f12打开控制台,如下图选择vue:
即可使用该插件查看当前页面中的vue
对象的状态。
其他常见表单组件的双向数据绑定的使用方法
<table>
<tr>
<td>姓名:</td>
<td> <input type="text" v-model="name"> </td>
</tr>
<tr>
<td>年龄:</td>
<td> <input type="text" v-model="age"> </td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" value="m" v-model="detail.sex"> 男
<input type="radio" value="f" v-model="detail.sex"> 女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" value="wdg" v-model="detail.hobby"> 玩单杠
<input type="checkbox" value="tjb" v-model="detail.hobby"> 摊煎饼
<input type="checkbox" value="js" v-model="detail.hobby"> 健身
<input type="checkbox" value="yy" v-model="detail.hobby"> 游泳
</td>
</tr>
<tr>
<td>选择籍贯:</td>
<td>
<select v-model="detail.jiguan">
<option value="hb">河北省</option>
<option value="hn">河南省</option>
<option value="sd">山东省</option>
<option value="sx">山西省</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td> <button @click="submit">提交</button> </td>
</tr>
</table>
data(){
return {
name: "",
age: "",
detail: {
hobby: [],
jiguan: 'hb'
}
}
}
自定义指令
vue
官方提供了很多指令来对页面元素进行特殊处理:v-text
v-html
等。vue
提供了自定义指令的语法,可以让开发者自己创造指令完成特殊的需求:
<p v-red>文本</p>
如上述语法,即是自定义指令的使用。该指令的功能将会使得vue
解析输出元素时,自动将元素的字体颜色改为红色。 如果希望该自定义指令生效,则必须向vue
注册该指令,并且编写该指令的功能。
带有参数的自定义指令
<p v-color="`#f03361`">这段文字用于测试自定义指令 v-blue</p>
directives: {
// el: 绑定了v-color的dom元素
// bindings: 指令携带的数据、信息
// bindings.value 指令值
color(el, bindings){
console.log(bindings)
el.style.color = bindings.value
},
// 在此指定自定义指令的指令名称 -- 方法名
// 传入的参数el即是描述绑定了v-red指令的dom元素本身
blue(el){
el.style.color = "blue"
},
red(el){
console.log(el)
el.style.color = 'red'
}
}
axios
封装了网络请求的基础模块:XHR
或 fetch
由于原生Ajax
请求代码较为复杂,所以经常会封装后进行使用:
-
jQuery
$.get() $.post() $.ajax({ url:, method:, success: (res)=>{ ...... } }) ....
简化了原生发送请求时的代码量,抹平了一些技术细节与浏览器兼容性问题。
-
axios
: 一款专业的用Promise
封装而来的网络请求库。Api
更加简洁。axios
的官方网站:http://www.axios-js.com/
安装axios
基于脚手架项目,安装axios
模块,需要在项目的根目录下执行命令:
npm install axios
npm i axios
基于axios
发送get
请求
// 引入axios
import axios from 'axios'
// 调用get方法发送get请求
let url = 'http://ip:port/api'
let params = 'name=zs&pwd=1234'
axios.get(url, params).then(res=>{
// .then()中的回调方法,将会在请求成功,获取响应后自动执行
// res就是请求成功后,axios封装的响应数据对象
}).catch(err=>{
// 如果请求失败,执行catch中的回调方法
})