指令

v-text

v-html

v-on

v-bind

v-show

v-if / v-else-if / v-else

v-for

v-model

v-once

v-pre

v-cloal

过渡

transition

v-enter-active

v-enter

v-enter-to

v-leave-active

v-leave

v-leave-to

transition-group （列表过渡）

<transition-group name="list" tag="ul">
    //key值要给不重复的值不然会出问题
	<li v-for="item in foods" :key="item.id">{{item.name}}</li>
</transition-group>

websocket

**作用：**和服务器双向通讯

客户端可以和服务器发消息

服务器端也可以主动给客户端发消息

适用场景

即时通讯：客服
聊天室
点餐

基本使用

原生：

<script>
      var dom = document.getElementById('contanier')
      var inputDom = document.getElementById('message')
      var isOpen = false // 表示是否已经建立了拨号
      var ws // 别的方法 也需要使用ws
      // 打开websocket连接
      var openWS = function () {
        /// 网络上提供的一个测试websocket功能的服务器地址。
        /// 它的效果是，你向服务器发什么消息 ，它就完全回复还给你。
        ws = new WebSocket('wss://echo.websocket.org') // 建立与服务器的联系

        // onopen是webSocket约定事件名
        // 当本地客户端浏览器与服务器建立连接之后，就会执行onopen的回调
        ws.onopen = function (event) {
          isOpen = true
          // 建立成功
          dom.innerHTML = dom.innerHTML + `<p>与服务器成功建立连接</p>`
        }
        //   接收消息
        // onmessage是webSocket约定事件名
        // 如果从服务器上发过来了消息，则会进入onmessage的回调
        ws.onmessage = function (event) {
          console.log('服务器回消息了!')
          console.log('event:', event)
          // 由于 我们先给服务器发了消息 服务器给我们回了消息
          dom.innerHTML =
            dom.innerHTML + `<p style='color: blue'>服务器说:${event.data}</p>`
        }
        // onclose是webSocket约定事件名
        ws.onclose = function () {
          // 此函数表示 关闭连接成功
          isOpen = false // 把状态关闭掉
          dom.innerHTML = dom.innerHTML + `<p>与服务器连接关闭</p>`
        }
      }
      //   发送消息 接收消息
      var sendMessage = function () {
        // 内容非空 建立了连接
        if (inputDom.value && isOpen) {
          // 发消息 要等到 连接成功才能发 而且内容不为空

          // 发消息就是send
          ws.send(inputDom.value) // 发送消息
          //   发完之后 添加到 当前视图上
          dom.innerHTML =
            dom.innerHTML + `<p style='color: red'>我说:${inputDom.value}</p>`
          inputDom.value = ''
        }
      }
      // 关闭连接
      var closeWS = function () {
        ws.close() // 关闭连接
      }
    </script>

封装库：socket.io

<script>
      // 建立连接，得到 socket 通信对象
      var socket = io('http://118.24.62.36:8888')

      // 注册连接成功回调函数
      socket.on('connect', () => {
        console.log('建立连接成功了')
      })

      // form表单注册了submit事件
      $('form').submit(function (e) {
        e.preventDefault()
        // 用socket.io这个包发消息是emit
        // 原生的websocket是用send
        socket.emit('message', {
          // socket接口需要的参数 信息
          msg: $('#m').val(),
          // 时间戳
          timestamp: Date.now()
        })
        $('#messages').append($('<li>').text('我说:' + $('#m').val()))
        $('#m').val('')
        return false
      })
      // 收来服务器的消息：用on
      socket.on('message', function (msg) {
        console.log('收到了服务器的消息')
        console.log('msg:', msg)
        $('#messages').append($('<li>').text('服务器:' + msg.msg))
      })
    </script>

computed（计算属性）

将页面中一些复杂的表达式集中在computed中运算，返回的计算属性可以在页面中直接使用

写的是带有返回值的方法, 在页面中像属性一样去用(写方法名)

set

计算属性的缓存

计算属性有缓存特性，数据修改了才会重新计算，不会每次都计算，节省了性能

watch 侦听器

作用：用来监听data中的数据，只要data中被监听的数据发生改变，侦听器中的代码就会执行

用法：

和data同级，要监听的data数据名是什么，watch里就写什么

axios（vue的ajax插件）

axios-config模式

axios拦截器

作用：

在发送请求之前和数据回来之后拿到数据之前执行的回调函数

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

生命周期钩子

数组新增方法

传送门:语雀

ref属性

作用：用来获取组件

设置：在标签上写一个ref属性ref='xxx'

获取：通过this.$refs.xxx获取组件

单文件组件

文件配置

$nextTick

ES6中的模块化

slot（插槽）

使用默认插槽时可以不用template标签包裹值，具名插槽必须使用template标签包裹值

默认插槽：

在组件内定义插槽

<div>
	<slot>  传进来的值放到这里  </slot>     
	<slot>  传进来的值放到这里  </slot>     
	<slot>  传进来的值放到这里  </slot>     
	<slot>  传进来的值放到这里  </slot>     
</div>

使用组件时

<component> 值 </component>

具名插槽：

定义插槽

<div>
    <slot name='xxx'></slot>
    <slot name='yyy'></slot>
</div>

使用组件时

<component>
    //完整写法
	<template v-slot:xxx></templayyy
	//简写
	<template #yyy></template>
</component>

组件间传值

父子传值：

父到子：

props

作用：将父组件文件中子组件的自定义属性值传递到子组件文件的props属性中

语法：

子组件

export default {
    props:['attr1','attr2']
}

父组件

<son attr1='xxx' attr2='yyy'></son>

子到父：

emit

scoped

vue-cli（脚手架）

SPA单页面应用

过滤器

使用：

//在插值表达式中
{{message | capitalize}}

//在 v-bind 中
<div :id='rawId | formatId'></div>

**定义：**全局定义，组件局部定义

vue-router

·基本使用：

先导入vue-router用VueRouter变量接收,通过vue.use(VueRouter)在vue中安装，然后创建路由规则routes，创建vue-router实例router把routes挂载到VueRouter中，还可给router添加导航守卫，每次路由跳转前都会执行守卫。

import Vue from 'vue'
//导入vue-router
import VueRouter from 'vue-router'
//全局安装插件
Vue.use(VueRouter)
//创建路由规则
const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  // 重定向
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/',
    name: 'layout',
    component: layout,
    //路由元信息
    meta:{
        key:value
    }
    // 嵌套路由
    children: [
      {
        path: 'home',
        name: 'home',
        component: home,
        meta: {
          showTabbar: true
        }
      }
   ]
]
//实例化路由    
const router = new VueRouter({
  routes
})
//全局导航前置守卫
router.beforeEach((to,from,next))=>{
//to 即将到达的路由信息，与this.$route获取到的是一致的
//from 离开的路由信息，与this.$route获取到的是一致的
//next 必须要写，不然无法跳转
 	next()
}

·router-view的使用建议

router-view管理的组件别放到components中,很容易弄混哦

建议:

路由管理的页面一般放在views目录下
和App.vue同级
components:
1. 自己抽取的功能类的组件
2. 页面的一小部分

·嵌套路由

·路由整合方式

·this.$router.push( url )（编程时导航）

·路由元信息

设置：

{
	path:'/login',
	name:'login',
	component:login,
	//元信息
	meta:{
		key:value,
		key2:value2
	}
}

获取：

this.$route.meta.xxx

·导航守卫

路由切换时会执行的回调函数

全局前置守卫：

const router = new VueRouter({...})

router.beforeEach((to,from,next))=>{
//to 即将到达的路由信息，与this.$route获取到的是一致的
//from 离开的路由信息，与this.$route获取到的是一致的
//next 必须要写，不然无法跳转
 	next()
}

vuex

·vuex的作用

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

·基本使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据
  state: {
    // 用户信息
    userInfo: {}
  },
  // 修改数据的方法
  mutations: {
    // 传入一个新的对象 覆盖原始的对象
    setUserInfo (state, newUserInfo) {
      console.log('state:', state)
      console.log('newUserInfo:', newUserInfo)
      // 存起来
      state.userInfo = newUserInfo
    }
  },
  actions: {},
  modules: {}
})

·state

组件间要用共享的数据统一存储到这里。

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态

获取：

this.$store.state.xxx

·mapState 辅助函数

通过mapState辅助函数可以简化state的获取

// 导入辅助函数
import { mapState } from 'vuex'
export default {
  computed: {
    myComputed(){
      // xxx
    },
    ...mapState(['state的名字'])
    /*获取方法
      ①不传参数默认获取全部
      ②对象：...mapState({xxx:state => state.yyy)这样可以自定义属性名
      ③数组:...mapState(['xxx','yyy']),不用自定义属性名的话,最方便*/
  }
}

·mutations

**作用：**如果对state数据的修改分散于每个页面中会造成修改过程无法预测，以及后期难以维护的问题，而放到mutations中可以将对state数据的修改方法进行统一修改。==可以执行异步操作，但是推荐使用同步操作，因为vue的devtool检测不到mutations中异步的改变，所以最好不要在mutations中执行异步代码==

定义：在vuex实例中

{
	mutations: {
		函数（state,自己设置的形参){//state是默认的第一个,之后才是自己设置的参数)
			函数体
		}
	}
}

使用：

在任意vue组件中this.$store.commit('xxx',载荷即参数),不用传state,因为是默认传递的.

·mapMutations

和mapState一样，不过mapState是映射到computed属性中，mapMutations是映射到methods属性中

·actions

vuex中的异步操作使用actions

定义：

actions: {
	actionFun (context，payload) { //context为上下文对象，指的是vuex
	setTimeout(()=>{
			context.commit('mutations',payload)
    	})
	}
}

调用：

this.$store.dispatch('actions', 载荷)

·mapActions

同mapMutations

·getters

除了state之外，有时我们还有时候还需要获取state的派生状态（state属性里的嵌套属性），用getters可以简化获取，相当于state的计算属性

定义：

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

使用：

this.$store.getters.xxx

注意：getters作为属性访问时会缓存，作为方法访问时不会缓存

·mapGetters

映射到computers中

·modules

定义：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... },
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

使用：

使用模块中的state

this.$store.state.子模块名.xxx
使用模块中其他属性

this.$store.直接使用

命名空间 namespaced

定义：

在模块内部添加属性

const modulesA={
namespace = true
}

访问命名空间：

带上模块的属性名路径