VUE2基本用法

• v-text:设置标签的内容，但通常直接使用{{}}

• v-html：输出HTML

• v-if：显示如果为false，则组件直接移除

• v-show：切换显示状态

• v-bind：设置元素属性：

  <img v-bind : src=”imgStc”> 可以简写为
  
  <img :class=”{active : isActive}”>//取值取决于isActive ，若为true则取值为active
  

• v-for : 根据数组生成列表结构：

  <li v-for = ”item in arr ” :title=”item”>
              <!-- 数据 -->
  
  <li v-for = “(item , index) in arr ” :title=”item” >
  <!--             数据  索引 -->
  
  <li v-for=”(item , index) in arr”>{{item.name}}</li>  
  <!--              对象 -->
  

• v-on ：事件绑定写成函数调用，可自定义参数，定义方法时，@需要定义形参,事件后跟 . 修饰符，缩写为@

  <a v-on:click=”dosomething”>.....<a>  <a @click=”dosomething”>.....<a>
  

• v-model : 获取和设置表单元的值（双向数据绑定）

  <input type=”text” v-model=”message”>
  

• v-once:你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

  <span v-once>这个将不会改变: {{ msg }}</span>
  

• v-cloak:解决网速过慢时，无法加载{{msg}}而显示源码的问题，解决闪烁问题，当内存加载出来的时候内容才会显示。需要在css文件中定义:

  [v-cloak]{ display : none !important; }才会生效。
  

• axios：网络请求库
  请求响应的时候触发 形参，用于获取信息

  axios.get(地址).then(function(response){},function(err){})
  

请求响应成功/失败的时候触发
axios.get(地址？key=value &key2=value2).then(function(response){},function(err){})
查询字符串，key：由接口文档提供 value：为具体需传输的数据
axios.post(地址？key=value &key2=value2).then(function(response){},function(err){})

重点：调用axios后，this就不再指向data中的数据，需要 var that = this；之后调用axios，再使用that作为原系统的this使用

VUE项目结构

src:

assets:存放静态资源

components：存放组件

config：存放配置文件（接口、开发环境）

locals：结合vue-i18n来存放多语言包

router：路由插件，存放路由请求，路径请求

store：存放全局变量和获取方法

style：存放less的样式文件

utils：工具库

views：存放前端页面

VUE生命周期

• beforeCreate①：无法通过VM访问到data数据、methods中的方法

• Create②：能够通过VM访问到data数据、methods中的配置方法

• beforeMount③：页面呈现的都是未经VUE编译的DOM，所有对DOM的操作，最终都不生效，即生效了很快会被后续VUE生成的真实DOM覆盖

• mounted挂载④：vue完成模板解析并把初始真实的DOM元素放入页面后调用mounted（挂载），页面呈现的都是经VUE编译的DOM，所有对DOM的操作均有效。

至此初始化过程结束，一般在此进行：开始定时器，发送网络请求，订阅消息，绑定的自定义事件等初始化操作。

template模板：即VUE可生效的区域，一般把页面元素代码直接写入：
el :”#root” template: ’<div><h2></div> ’

• beforeUpdate⑤：一旦VUE中数据发生更改，即执行，数据会进行更新，但页面还是旧的

• Update⑥：数据是新的，页面也是新的，页面和数据保持了同步

VM.$destory():完全销毁一个实例，即vm，清理它与其他实例的连接，解绑它的全部指令及自定义事件，如监听器

• beforeDestory⑦：VM中的所有data指令，methods等都处于可用状态，马上要执行销毁过程，一般在此阶段关闭定时器，取消订阅消息，解绑自定义事件等收尾操作（所有对数据的更改不会再触发更新）

• destory⑧：基本不使用

计算属性

• computed：虽然写的是一个方法，但其实是一个状态，存储函数执行和返回值。某个结果依赖其他状态值计算的，希望把计算结果缓存下来，只要依赖值不变，无论视图如何更新，都不需要重新计算，只需要使用缓存值。

  computed：{ xxx( ){  } }//即创建计算属性
  

watch监听

监听一个数值的变化，并进行一些相关的操作

 watch：{  数值名:function (newValue , oldValue){} }
//必须是最接近的层级，若接收的是对象，则：
 对象名：{ handler(newValue , oldValue){} , deep: true}
 //此时newValue和oldValue都是一个对象，handler是处理器， deep属性是是否进行深度监听。

watch监听对象数组也用深度监听，newValue等也是对象数组，但无法通过this.newValue访问，否则会报错，要直接使用newValue

组件使用

• 第一步：创建一个父组件.vue文件和子组件.vue文件，子组件的name属性需要与.vue文件名相同。在父组件.vue文件中导入子组件：

  import 子组件name值 from’ 路径 ’ ；
  

• 第二步：在父组件VUE结构内声明子组件：

    component：{子组件name值}
  

• 第三步：使用子组件name值作为标签名使用：

  <子组件name值></子组件name值>
  

父向子组件传参：

• 第一步：子组件定义一个属性props：

  name:'son',
  
  props:{//只能从父组件传进入，不能从子组件传出
  
  liuliumei :{ //子组件.vue中可以当作变量使用
  
  type : String, //将属性类型设定为必须是字符串类型 Number为数字类型 Object 对象
  
  default : '默认值' //如果父组件没有传入设定参数，则liuliumei属性即为默认值
  
          },
  
  Obj:{
  
  type:Object,
  
  default:function(){
  return {}
        }
  },
  
  arr:{
  
  type:Array,
  
  default: function(){
  
  return[]
  
              }
  
          }
  
      } ,
  

• 第二步：父组件使用子组件标签时：

  <子组件name值 v-bind ：liuliumei= ”字符串” ></子组件name值>
  //此时该子组件中的liuliumei调用之后的内容即为父组件传入的字符串内容。
  

子向父组件传参：

• 子组件：

   methods:{
      fun(){
      this.$emit('自定义函数名','要传入的参数');
      //$emit:自定义触发一个自定义的方法名称
          }
      },
  

• 父组件：

   <子组件name值 v-bind ：liuliumei= ”字符串” @自定义函数名=”getshow” ></子组件name值>
  methods:{
    getshow(data){
        alert(data);//data即’要传入的参数’
          }
      },
  

• keep-alive ：与component组合实现动态组件

    <keep-alive> 
    <!-- 用来包裹组件，避免组件切换时自我销毁导致每次切换组件时初始化的消耗，此时组件只会有激活和失活的生命周期 -->
    <component v-bind:is="子组件的标签名"></component>
    </keep-alive>

子组件当中在切换时只会经历的生命周期：

       activated(){
     // 组件激活时
           },
       deactivated(){
       //组件失活时
           }

插槽

在父组件调用子组件标签时，在子组件内部添加显示内容

• 默认（匿名）插槽：

父组件：

  <son>
     <div>我将显示在子组件的插槽中</div>
  </son>      

子组件：

     <slot></slot>//会显示父组件的div内容    

• 具名插槽

父组件：

 <son>
 <div slot="a">我会显示在子组件中slot的name=a的插槽中</div>
 </son>

子组件：

  <div>
    <slot name="a"></slot>//会显示父组件的div内容 
  </div>

• 作用域插槽

父组件：

 <son>                      <-- v-slot="{item,idx}" -->
     <template slot="a" v-slot:a="{item,idx}">///可以插入较大片段，且可以获取子组件插槽中自定义的属性
         <div @click="show(item,idx)"></div>
         <div></div>
         <div></div>
         <div></div>
     </template>
 </son>

子组件：

 <slot name="a" :item="变量1" :idx="变量2"></slot>

过滤器

• 定义：对传入数据进行处理

   filters:{
  
  //data为要传入的数据，temp为’一号’,a如果没有传值则为默认值，有则参考’2333’
  
  liuliumei : function(data,temp,a='默认值'){
  
  return data+'.00'+temp+a;
  
      }
     },
  

• 使用：

   <div>
  {{ 传入的数据| liuliumei('一号','2333') }}
  {{ 传入的数据| liuliumei('二号') }}
   </div>
  

路由器

管理组件之间进行跳转的管理器

• 定义：src下建立router文件夹，建立index.js文件，导入资源

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  

在vue框架中使用路由插件

  Vue.use(VueRouter)

• 创建路由配置：

  const routes = [
      {
  
  path: '/',//浏览器的地址路径，只允许有一个斜杠，只有一个斜杆是默认路径
  
  name: 'root',//给当前路由设置一个名字
  
  component:() => import('../components/HelloWorld.vue')//组件的地址
  
  },
  {
  
  path: '/header',//浏览器的地址路径，只允许有一个斜杠，只有一个斜杆是默认路径
  
  name: 'header',//给当前路由设置一个名字
  
  component:() => import('../components/header.vue')//组件的地址
  
  }
  
  ]
  

• 创建路由基本结构：

  const router= new VueRouter({
  routes
  })
  
  export default router  //如果要抛出多个router则不加default
  

这个router会被抛出，需要到views的文件夹内的main.js引入：

import router from './router'

new Vue({

 router,//在创建vue框架的时候要一起配置出来

 render: h => h(App),

}).$mount('#app')

在使用路由呈现的main.vue文件中：

 <div>
     <!-- 路由的视口，它是一个占位符，同时也是组件的显示窗口 -->
     <!-- 可以和插槽一样用name属性绑定 -->
     <router-view></router-view>//其实在编译的时候会把它看成<a>标签
     <router-view name="header"></router-view> <!--  设定传递的参数 -->
     <router-view name="sidebar"></router-view>
 </div>
     

则在路由配置中需要：

 const routes = [
 {

    path: '/',//浏览器的地址路径，只允许有一个斜杠，只有一个斜杆是默认路径

    name: 'root',//给当前路由设置一个名字

    components: {

        header:() => import('../components/header.vue')//组件的地址

        sidebar:() => import('../components/sidebar.vue')

                 }

},

在需要实现组件之间跳转时的组件当中调用，如使用在HelloWorld.vue中实现向header.vue的跳转：

 <router-link :to="{path:'/header,query:{id:123, info:'liuliumei'}}">跳转到login</router-link>
 <!-- 但这种携带参数的形式会展示在主页上方的网址上 -->
 <router-link :to="{name:header,params:{id:123, info:'liuliumei'}}">跳转到login</router-link>
 <!-- params不会展示在主页上方的网址上 -->

传递参数之后在header组件的vue中：

mounted(){
    this.$route // 获取当前组件的路由相关信息
    this.$router // 获取整个项目的路由相关信息
  },

VUEX

创建store文件夹，创建index.js文件，写入基本配置

 import Vue from 'vue'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import Vuex from 'vuex'
 //在vue框架使用vuex
 Vue.use(Vuex)
 //创建vuex的基本结构

 //Store的主要作用是作为数据存储的容器，让数据供组件与组件之间进行调用
 export default new Vuex.Store({
 // 存放状态（全局变量）
 state: {
     num: 0,
   },

 // state的计算属性

   getters: {

     getNum(state){//对num值进行处理之后抛出，以便组件调用

 return state.num+'我是一个额外的内容';

     }

   }

 // 更改state里面的数据，同步操作

 mutations: {

 add(state, n) {

 state.num= n;

 }, 

 handlerChangeNum(state,params)//state固定接收state，params固定接收传入的参数
     {
              state.num= params;
     },

   },

 // 提交mutations，异步操作，无法直接对state的数据进行修改

 actions: {

     handlerChangeNumAct(context,params)

     {

 let{commit} = context  //context是一个上下文对象，它包含commit()
       commit('handlerChangeNum',params)

     }

   },

 // 将 store 模块化

 modules: {

   }

 })

在src目录下的main.js下全局调用vuex创建出来的基本结构

 import store from './store'

 new Vue({

 router,

 store,

 render: h => h(App),

 }).$mount('#app')

在组件的.vue文件中进行调用

 {{ this.$store.state.num }}

 {{ this.$store.getters.getNum}}//调用getters方法，来调用处理过的state数据

要改变state里的数据值的时候，所有组件中的调用都会同步改变，组件中改变数值的方法：

 methods: {

 handlerBtn(){ //store中mutations定义的方法名   params接受的值        

 this.$store.commit('handlerChangeNum','我是改变state的值')

 //commit专门用来触发mutations里的自定义方法

 this.$store.dispatch('handlerChangeNumAct','我是改变state的值')

 //dispatch专门用来触发actions里的自定义方法

     }

    }