vue中属性的基本用法

for(let i=0; ilength; i++){
    let item = nav[i]
    输出  `
 ${item} 
`

场景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 v-for="item in movies" :key="item.id">
        ID：{{item.id}}    |  
        名称：{{item.name}}   |  
        上映时间：{{item.showingon}}   |  
        时长：{{item.duration}}分钟
    div>

拓展1

在使用v-for遍历输出数组数据的同时，引用数组的下标：

for="(item,i) in movies" :key="item.id">
    ..{{i}} 下标

拓展2

纯粹的按照数量重复输出元素：

for="item in 100" :key="item">内容

:key的作用

v-for指令一般都需要配一个v-bind:key（简写 :key）来为每一个列表项设置一个唯一标识符（简单理解为每一个item一个名字）。目的是为了提高列表更新时的DOM渲染性能。如果列表中已经包含很多列表项了，后续由于列表数据的变化需要重新渲染列表时，将会通过:key属性来检测当前需要渲染的列表项是否已经渲染过（比较列表项的key在原始列表中是否已经存在），如果已经渲染过，就不会重新创建DOM了。

那么一般将什么设置为:key的值？

for="(item,i) in list" :key="item.id">
  id是唯一属性
for="(item,i) in list" :key="i">
  下标 但不建议

:key的数据类型只能是number和string，不能是对象。同一个列表中的列表项的key不能重复，否则控制台报错。

Vue中的计算属性

Vue提供了一种特殊的属性：计算属性（Computed）。这种属性本质上是一个函数（由函数内部计算返回结果）。计算属性可以在template中以属性的语法进行访问。如果计算过程中所需要的变量有变化，则计算属性的结果也将会及时更新。

data() {},
methods: {},
computed: {  // computed中定义计算属性
    totalPrice(){  // 计算属性的本质是个函数   函数名就是计算属性名
        return xxx
    }
} 
计算结果：{{totalPrice}}

将函数定义在计算属性中(computed)与方法中(methods)的区别。

如果定义成方法，那么调用时需要: {{ getTotal() }}

如果定义成计算属性，不需要小括号：{{ totalPrice }}

如果定义成计算属性，则第一次计算结束后，将会把结果缓存下来，以后直接使用（不去重新计算）。当计算时所涉及到的响应式变量有变化时，才会重新计算 计算属性的结果。

表单元素的双向数据绑定指令 v-model

加入有如下输入框：

"name" type="text" placeholder="">
data: {
    name: ''
}

只需要按照上述写法，即可完成输入框的value属性与data中name之间的双向数据绑定：

1. 只要有输入框value有变化（输入了数据），name也将更新。

2. 只要data中的name有变化（js修改了name），那么输入框中的文本也将更新。

案例：编写一个注册页面：views/Register.vue。提供一个注册表单。

访问：http://localhost:8080/register看到该注册页面。

Vue的监听器 Watch

vue为了更好的监控所管理的响应式变量的变化，提供了数据监听器：watch。通过监听器就可以监听数据的动态改变：一旦被监听的响应式变量的值有变化，就会立即执行相应方法。

基本语法如下：

data() {
    return {
        name: ''
    }
},
watch: { // 定义监听器
  // 声明一个与被监听变量同名的方法即可监听该变量，且传入两个参数(新值, 旧值)
  name(newValue, oldValue){ 
      
  }  
}

其他表单组件的双向数据绑定方式

​

自定义指令

文本
<p v-blue>文本p>
directives: {  // 自定义指令 
    red: {  // 自定义指令的名字为v-red  示例：
        //当拥有该指令的dom元素被插入到DOM树后，自动执行inserted
        // 并且传入绑定了该指令的DOM对象：el
        inserted(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就是错误的结果
})