Vue的相关知识点（指令，组件，Vuex）

Vue 的生命周期钩子：

八个周期：

beforeCreate()->created()->beforeMount()->Mounted()->
beforeUpdate()->updated()->deforeDestory()->destory()

分别为：创建、挂载、更新、销毁。

Vue的主要指令：

v-if、v-else-if、v-else当属性值为true时，显示的标签，否则该标签不会显示

v-show，当属性值为true时，标签显示，否则标签隐藏
v-hide，当属性值为true时，标签隐藏，否则标签显示
v-for，属性值用于循环使用，同时只能通过某些特定的函数来更新页面。

v-bind，这个属性是用于绑定标签本身拥有属性值的指令

v-on 用于标签事件绑定的指令
v-model 该指令用于绑定页面中的input标签输入的值//一般用于双向绑定
对素组操作主要的函数是：pop()、push()、shift()、unshift()、sort()、reserver()

Splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。splice(index,howmany,item1,…,itemX)
Index：要添加或删除的位置
Howmany：要添加或删除的个数
item1：要添加或删除的元素是哪些
Methods:

<div id="app">
            <button v-on:click="clickMe">你点我呀！！</button>
            <button @click="++count">你点了我{{count}}次了！！</button>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                count: 0
            },
          methods:{    // methods这个属性是用于定义当前Vue实例中的各种方法
                clickMe: function(){
                    alert(123)
                }
            }
        })
    </script>

计算属性是Vue中把方法当成属性值来使用的一个代表。
在Vue实例中使用的computed这个属性来完成

// 计算属性
computed:{
    total(){
        return this.price * this.number
    }
}

侦听器的基本作用就是对属性进行侦听，一旦侦听的属性发生变化。侦器就会触发，从而可以执行我人指定的语句。

基本使用方法

// watch就是Vue中用于侦指定属性的选项
watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

Class 与 Style 绑定

绑定动态样式名
Vue可以通直接绑定class名来进行动态调用class的目的

<div class="box" :class="{box1:boxStyle, box2: !boxStyle}" @click="boxStyle = !boxStyle"></div>

在标签中使用v-bind:class的方法来进行样式的动态绑定
当值为对象时我们可以认为， 对象的属性就是需要使用的样式名。如果该属性的值为true话，那当前标签样式就会添加上这个属性名做的样式

<div class="box" :class="[style1, style2]" @click="boxStyle = !boxStyle"></div>

当值为数组***时我们可以认为，加入到该标签的就是数组中属性的值的样式
绑定内联样式
Vue可以直接绑定style来为标签样式进行修改，这种修改也是动态的

   <div class="box" :style="{background:bg}" @click="changeBg"></div>

当值为对象时我们可以认为，对象的属性名就是需要修改的style属性,它的值就是对应使的style的值。

修饰符

事件修饰符：阻止事件冒泡的修饰符，父加.self(识别点击的是谁的事情)，子加.stop(阻止事件冒泡)

<ul @click.self="handleUlClick()">
         <li @click.stop="handleLiClick($event)">11111</li>
         <li @click.once="handleLiClick()">33333</li>
 </ul>
 <input type="text" @keyup.enter="handleKeyup($event)">
 <a href="http://www.baidu.com" @click.prevent="handleChangePage($event)">百度</a>

加.once事件只执行一次，jQuery中只执行一次one方法，js中是once方法
@keyup.enter按下回车键立即生效，或者.键值也是可以实现的（例如.13）

 <input type="text" v-model.lazy="mytext"/>
    <input type="number" v-model.number="mynumber"/>
    <input type="text" v-model.trim="myusername"/>

表单修饰符
.lazy失去焦点时更新，.number限制只能用数字 .trim去掉首尾空格
Vue虚拟dom:
先比较标签，如果两个标签不一样，直接创造新的节点，如果标签一样，直接改变里面的内容

组件化：

全局组件：定义在最顶层的组件，大家都可以用
局部组件：定义在组件内部的组件，只能在组件内部使用的组件，组价同样有生命周期的钩子，和vue一样，数据使用为data(return{}),内部组件定义为components:{}
父传子：组件使用了props[“组件在使用时里面的属性名”]，属性值可以映射到组件内部使用
子传父:组件里定义在方法中的$emit(“组件在使用时里面的属性名”)，组件内部使用的是方法
**Vue-ref:**在标签中设置属性ref=”a”;通过this.a可以得到dom节点所有的内容，包括组件的方法和组件的数据函数data();

非父子之间的通信：

var bus=new Vue();
一个组件设置 bus.$on("weixinmessage",(data)=>{console.log("收到推送",data); })（写在mounted中）
另一个组件handleClick(){ bus.$emit("weixinmessage",this.$refs.mytext.value) }（写在methods中）

动态组件：

<keep-alive> <component :is="who"></component> </keep-alive>
根据who的值显示显示相应的组件，在vue实例中定义的组件.

Slot插槽：在组价中加入标签，在相应的位置就可以加入你想要的加入的东西
具名插槽：组件中加入，使用的空组件中插入写

或者<template #a>

aaaaaaaaa

两个方法都可以

过滤器： data.img做参数，返回的值代替他，

 <img :src="data.img | kerwinPath"/>
 Vue.filter("kerwinPath",function(data){
return data.replace('w.h','128.180')
});

自定义指令：

<div v-hello="mycolor">1111</div>
 Vue.directive("hello",{
            inserted(el,bind){
                //指令生命周期创建阶段，inserted说明指令已经实例
                //插入，insert只执行一次
                // console.log("当前节点插入到父节点中");
                // console.log(el);
                //el为底层dom结构,为<div>1111</div>
                //bind为对象，包括里面的值
                el.style.background=bind.value
            },
            update(el,bind){
                //指令生命周期更新阶段  
                el.style.background=bind.value
            },
        })

Vue脚手架：

通过npm安装npm install -g @vue/cli，需要配置环境
创建项目：vue create myAPP(文件名)，配置脚手架网上有
相关命令，npm run lint 格式化文档，使其显示规范，
npm run build 代码上线
npm run serve 启动服务器
使用时需要用到什么包，就要导入什么包，或者导入其中的方法

import tabbar from "@/components/Tabbar";
import { mapState } from "vuex"; //Es6导出

自定义的模块中两种导出的方法：

Export function A3(){}
const all={  A1,A2,A3}
export default all//一次性导出所有，导入时全部导入
export function A3(){}一次性导出一个，导入时用谁导入谁

**反向代理：**因为axios请求数据会跨域，建立vue.config.js文件，

module.exports={
    devServer: {
        // proxy表示代理
        proxy: {
          '/ajax': {//何种请求的开头的后面
            target: 'https://m.maoyan.com',//代理地址的开头
            changeOrigin: true
          },
          //如果还有其他的代理只要重新加入同钟格式即可：
      }
}

路由的使用
在router.js中设置路由，首先导入vue-router模块，然后注册路由，再实例化路由

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入路由
Vue.use(VueRouter)//注册路由插件，使用use中的方法就是注册插件
const router = new VueRouter({
  mode: 'hash',
  mode: 'history',
  //history模式，路径中没有#,要相当于向后端发起请求，
  //后端没有配置好可能会报404，在后端增加一个覆盖所有情况的候选资源
  //如果URL匹配不到任何资源的时候，应该返回到同一个页面中，重新渲染
  // base: process.env.BASE_URL,
  routes
})
const routes = [
  {
    path: '/film',//路径
    component: Film,//组件
    children: [//二级路由
      {
        path:'/film/nowplaying',//或者直接写'nowplaying'
        component:Nowplaying
      }
    ]
  }{
    path: '/detail/:id',//动态路由，==/detail/id/ 跳转方法this.$router.push(`/detail/${id}`)

    name:"kerwindetail",//命名路由用于通过名字来跳转入后, //this.$router.push({ name: "kerwindetail", params:{ id: id}});
    component: Detail
  },{
    path: '*',
    redirect: '/film'
  }
]
//全局守卫，将来任何路由进入都要进入这个函数
const auth={
  isLoging(){
    return false;
  }
}
router.beforeEach((to,from,next)=>{
    console.log(to);
    if(to.path==='/center'){
      console.log("盘查");
      if(auth.isLoging()){
        next();
      }else{
        next("/login")
      }
    }else{
      next();
    }
})

使用相应的内容

 <!-- 路由容器,引入几个就显示几个 -->
<router-view></router-view>
<!--router-link标签，使用tag="li",写哪个就显示哪个
      activeClass点击哪个哪个添加样式-->
      <router-link to="/film" tag="li" activeClass="myactive">
      <i class="iconfont icon-piaojubill"></i>film</router-link>

使用时间总线bus方法和非父子间的通信方法一样，只是将其模块化了

VueX

Vuex,状态管理器，可以实现非父子通信
数据快照（后端数据的缓冲，异步，先在state中）
方便调试和管理，时光旅行，使用devtools可以看到谁访问，
谁没有访问的记录

使用mutation为唯一修改的方法

（1.判断store中有没有nowplaying数据,没有，ajax (action --> mutaion- >state)，处理异常的方法
（2.有数据，直接就从store取数据渲染页面

使用` …mapState([“isTabbarShow”])简化代码，作用同下，简化操作

isTabbarShow(return false|true)`

连接数组

Mutation使用常量设置

export const HIDE_TABBRA_MUTATION="hide"
 this.$store.commit(HIDE_TABBRA_MUTATION,false);//模块中使用
 [HIDE_TABBRA_MUTATION](state, data) {
      //  console.log("HideMaizuoTabbar");
      state.isTabbarShow = data;
    },//mutation中使用

(1)应用层级的状态应该集中到单个 store对象中.
(2)提交mutation是更改状态的唯一方法。并且这个过程是同步的。
(3)异步逻辑都应该封装到action里面。

Element ui（PC端）UI框架

//引入element-ui,引入后直接用就行
// import ElementUI from 'element-ui '
// import 'element-ui/lib/theme-chalk/index.css'
// vue.use(ElementUI);
在官网拿相应的代码用就可以了

Mint UI（移动端）UI框架

//引入mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
vue.use(MintUI);