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中声明的变量之间的双向数据绑定：

1. 如果用户在输入框中输入内容，则data中的变量将会实时更新。
2. 如果程序将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请求代码较为复杂，所以经常会封装后进行使用：

1. jQuery

   $.get()
   $.post()
   $.ajax({
       url:,
       method:,
       success: (res)=>{
          ......
       }
   })
   ....
   

   简化了原生发送请求时的代码量，抹平了一些技术细节与浏览器兼容性问题。

2. 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中的回调方法
})

http://localhost:3000/movie-infos?page=2&pagesize=2
修改前缀：
https://web.codeboy.com/bmdapi/
https://web.codeboy.com/bmdapi/movie-infos?page=2&pagesize=2