指令

v-for

遍历数组

<li v-for="(item, index) in movies">{{item}}</li>

遍历对象

//value为对象值，key为对象key
<li v-for="(value, key, index) in info">{{value}}-{{key}}</li>

key
key的作用主要是为了高效的更新虚拟DOM，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

<li v-for="item in letters" :key="item">{{item}}</li>

计算属性

基本使用

使用：当使用的数据需要经过某种变化在返回使用，可以用计算属性。本质是函数，不过可以当成属性使用。

    <h2>{{ computed }}</h2>
    computed: {
        fullName: function () {
            return this.firstName + ' ' + this.lastName
        }
    }

setter属性和getter属性

//计算属性完整写法
computed: {
    fullName: {
        set: function (newValue) {
            const names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[1]
        },
        get: function () {
            return this.firstName + ' ' + this.lastName
        }
    }
}

过滤器使用

参考视频过滤器是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定, vue3.0中已弃用。

使用过滤器

//在插值表达式中使用
<p>{{message | capitalize}}</p>
//在v-bind属性中使用
<div v-bind:id = "rawId | formatId"></div>

声明过滤器声明过滤器必须写在filters属性里,过滤器本质上是函数

filters: {
    capitalize(val) {
        val = val + 1
        return val
    }
}

全局过滤器
Vue.filter()方法接收两个参数：第1个参数，是全局过滤器的“名字”，第2个参数，是全局过滤器的“处理函数”

Vue.filter('capitalize', (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

事件监听

vue使用v-on进行事件监听

// 只需要event对象写法
<button @click="add">按钮</button>

add(event) {
  console.log(event)
}

// 方法定义时，我们需要event对象，也需要其他参数;传入$event
<button @click="add(123, $event)">按钮</button>

add(event) {
  console.log(num, event)
}

事件修饰符

阻止事件冒泡

//stop修饰符阻止事件冒泡，相当于调用event.stopPropagation()
<button @click.stop="add">按钮</button>

阻止默认事件

<form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
</form>

监听回车

<input type="text" @keyup.enter="keyup">

once-只触发一次回调

<button @click.once="doThis"></button>

路由

请求响应拦截器

请求拦截器

axios.interceptors.request.use((config) => {
    return config;
})

响应拦截器

axios.interceptors.response.use((config) => {
    return config;
})

vuex

在js文件中引入，由于这个vuex是一个整体，所以必须把store文件夹整个引入到文件中，即import store from 'xxxxx/store'

读取数据

// js引入的方式
store.state.user
// 在vue中直接使用
this.$store.state.user
// 引入getters里的方式
store.getters.getUser

vue.config.js基本配置

module.exports = {
  publicPath: './',
  devServer: {
    open: true, // 本地调试是否自动打开窗口
    port: '8686', // 本地运行的端口
    overlay: {
      warnings: false, // 提醒类型报错是否展示
      errors: true // 错误是否展示
    },
    proxy: { // 反向代理跨域
      '/api': { // 代理以/api开头的请求
        target: 'http://localhost:3007/', // 代理地址
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' // 是否将url中api去掉
        }
      },
      '/report': { // 代理以/report开头的请求
        target: 'http://localhost:3007/', // 线上后端地址
        changeOrigin: true, //允许跨域
      }
    }
  }
}

vue2.0

指令