Vue基础

特性检测：检测浏览器是否支持某个属性

image.png
image.png

vue指令

页面渲染

vue的指令都是v-这种格式，虽然v-xxx="xxx"写的值是用""包裹，但实际上是js，因此需要在双引号里再加层引号，否则会报错。

v-text : 用于替换插值表达式，如果有v-text，插值就不生效。

v-html: 输出转译过的不带HTML标签的HTML语句。富文本编辑器的内容直接渲染的话是被转译过的，那么HTML标签就会被渲染到页面上

v-cloak: 配合样式来使用，可以让样式在vue实例化之前生效

v-for: 用于循环渲染数据。v-for="item in list"。可以直接遍历对象、数组、数字。

v-if: 直接是dom节点的移除和插入，来达到显示和隐藏元素的效果。通过判断true和false来实现

v-else:必须与v-if配合使用，而v-if不需要配合v-else

v-show: 是通过改变css样式style来显示或者隐藏元素，通过display。对于需要频繁切换显示和隐藏的节点特别实用，比如弹窗、手机注册和邮箱注册两个tab的切换。

v-bind:属性:用于动态绑定元素的属性 ，可以简写为:属性。

image.png

事件绑定

v-on:事件名: 绑定事件，可以直接操作data里的数据，v-on可以缩写为@事件名。
vue的事件可以加括号也可以不加，不加默认接收事件处理函数的事件对象；加了括号就可以任意传参。（可以继续在括号里通过$event获取当前事件对象）

image.png

v-on:click: 用于绑定点击事件

v-model:自动绑定input输入内容改变事件

image.png

@keyup.enter: .enter是按键修饰符，也可以用enter的对应码13代替。可以使用组合键如.ctrl.enter

image.png

.stop:事件修饰符，阻止冒泡。

class绑定

计算属性

methods和computed区别

methods用来绑定一些方法，每次有数据更改只要在模板里使用这个方法就会执行，没有缓存。
computed是计算属性，有依赖缓存，只有它所依赖的数据发生改变才会重新计算，计算出来的值可以当成data直接使用，不需要添加括号，必须要有一个return值。计算属性是基于它们的响应式依赖进行缓存的。

侦听器 watch

一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
computed是生成一个新的数据，watch是观测已有的数据，当被观测的数据发生改变时，自动执行后面的方法。

filters过滤器

image.png

ajax-fetch

image.png

vue组件

组件是可复用的 Vue 实例(可以将组件进行任意次数的复用)，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

Vue.compoent(" tagName ", options ):
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

全局注册一个组件，第一个参数就是要使用的标签的名字，不论使用大驼峰或者小写字母加中线的命名方式，在使用组件的时候都要使用小写字母加中线使用。
第二个参数就是组件的配置项，全局注册的组件可以在任何地方使用

components:局部注册一个组件，只有当前Vue实例中才可以使用这个组件

组件的data必须是一个方法(函数)，然后要return一个对象，为了保证组件的数据是独立的而不是共享

一个组件可以嵌套，但是一个组件的template只能有一个根元素

组件的props

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

通过prop来接收调用的时候传过来的值，然后可以把prop当data使用，但是不能修改父组件传的值，这是基于单项数据流。

单项数据流：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

props的大小写
HTML 的属性忽略大小写，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名的 prop 名需要使用短横线分隔命名

传递非字符串类型的数据需要使用动态绑定v-bind

如果要对传入的props进行类型检查，就需要使用对象的方式来写props；如果要对传入的值进行更多约束，就需要把这个值写成对象，对其设置default或者required(二选一)

ref

ref:用来获取dom或者组件,

<tag ref="a"></tag> //可以通过this.$refs.a获取到tag标签

slot:插槽 占位组件，能够实现标签的嵌套，可以写成:

<slot name="xxx"></slot>//给slot加一个name属性，写在模板里面，在页面的显示顺序只有模板里面的顺序有关
<h2 slot="xxx">内容</h2>//通过slot属性来获取获取到slot

动态组件

<component is="  "></component>//is后面写组件名，用来指定是哪一个组件

还可以通过is 来解决标签嵌套不合法的情况

image.png

动画

用transition将需要过渡的元素包起来，要为多个元素设置的话使用transition-group。
transition的主要作用是给它的子元素添加和移除class

v-enter:v指元素的name属性，如xxx-enter,不设置的话默认为transition内所有的元素

过渡的类型
v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to:定义离开过渡的结束状态。

image.png
transition负责给它的子元素添加和移除class

过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

生命周期

1. 创建阶段
（1）beforeCreate -- 没什么用，里面取不到数据
（2）created -- 没有this.$el,也没有真实的dom，但是已经有数据，可以在这里更改数据，如果数据是同步更改就会带入下一个生命周期；如果是异步修改，当数据修改完之后就会进入更新阶段，在这里做Ajax请求比较推荐
2. 挂载阶段
(1)beforeMount--这里已经能看到this.$el，但还没有进行真实的数据替换，看到的还是插值表达式，这里也不会做太多的事
(2)mounted--在这里this.$el是真实渲染的dom，在这里及之后才能取到真实的dom。一些第三方dom插件也会在这里来进行初始化，（仅限没有异步数据的dom，这里也可以做Ajax请求）
3. 更新阶段
(1)beforeUpdate--不做太多事
(2)updated--可能需要在这里重新初始化第三方的dom操作插件
4. 销毁阶段
(1)beforeDestroy--在这里一般会去解除一些事件的监听，或者清除一些定时器。
(2)destroyed

lifecycle.png image.png

nextTick
在created里数据有异步更新时，这时dom还没有进行渲染，在这时候进行dom操作没有用，而在$nextTick的回调中去操作dom的时候，代表此时的页面已经根据最新的数据渲染完成。通过异步返回的数据去操作dom，就放在next tick里执行

created() {
        // 模拟一下ajax
        setTimeout(() => {
          this.banners = ['banner 1', 'banner 2', 'banner 3']
          // 在这里的dom还是没有应用新数据的dom
          // this.$nextTick(() => {
          //   // 在这里的dom就是已经使用了更新的数据的dom
          //   this.initSwiper()
          // })
          this.$nextTick()
            .then(() => {
              this.initSwiper()
            })
        }, 2000)
      }

虚拟DOM

console.time() ... console.timeEnd()查看代码运行耗费的时间

vue-ajax axios

1、安装axios -- npm i axios -s
2、在index.js里引入axios import axios from 'axios'
3、配置baseUrl const ajax = axios.create({ baseURL: 'http://jsonplaceholder.typicode.com/' })
4、在index.js里定义接口导出你要的数据，以todos为例

import axios from 'axios'

const ajax  = axios.create({
    baseURL: 'http://jsonplaceholder.typicode.com/'
})

//取todos
export const getTodos = () => {
    return ajax.get('/todos')
}

//单个todo
export const getTodoById = (id) => {
    return ajax.get(`/todos/$(id)`)
}

5、在main.js里引入所有的，而不用挨个引入import * as $http from './requests' //引入所有的
6、挂载到Vue上

import * as $http from './requests' //引入所有的

Vue.prototype.$http = $http

7、在app.vue里请求数据(在created里)

created () {
    this.$http.getTodos()
    .then(resp => {
      if(resp.status === 200){
        this.todos = resp.data
      }
    })
  }

拦截器
作用：更改请求的参数，在里面自动注入一个参数；

//拦截请求
//拦截器 使用一个方法去拦截Ajax的request请求,有些请求要求你必须携带token...
ajax.interceptors.request.use((config) => {
    //第一个人用途：用于显示全局的loading状态
    document.querySelector('.modal').style.display = 'block'
    //第二个用途：在请求参数里加上全局的参数，比如token，这个token在实际项目中会从本地存储中取
    config.headers.token='123'
    //必须return config，否则请求不会执行
    return config
})

//拦截响应
ajax.interceptors.response.use(resp => {
    //隐藏全局loading
    document.querySelector('.modal').style.display = 'none'
    //全局处理错误
    if(resp === 200){
        return resp.data  
    }
    //这里统一做错误处理，需要后端配合，接口的返回格式必须一致
})

image.png

判断isDev，判断是否处于开发模式，就使用前面的地址；上线模式就使用后面的地址

image.png

vue-cli

<style scoped> scoped指定样式只在当前页面生效

代理服务器配置
devServer:如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    proxy: {
       //所有以ajax开始的都配置到下面这个地址
      '/ajax': {
        target: 'http://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

kepp-alive

用法:
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。
Propes：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。
  会新增 activated和deactivated这两个生命周期