VUE2.0

1.配置路由 vue-router

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    },
  ]
})

嵌套路由

命名视图

重定向

路由跳转

//声明式导航
<Router-link to="/index">去home</Router-link>
<router-link :to="{path: 'user/1',query: {id: '111'}}">跳转</router-link>
//编程式导航
this.$router.push({name:'...',params:{....}})

2.VUEX

import Vue from 'vue'
import Vuex, {mapActions} from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    height:'180cm'
  },
  mutations: {
  //唯一改变数据的地方
    heightActions(state,data){
      state.height=data;
    }
  },
  actions:{
    changeHeight({commit}){
      setTimeout(()=>{
      //提交去改变数据
        commit("heightActions","175cm")
      },2000)
    }
  }
})
export default store;

      mounted() {
          let {$store:{dispatch}}=this;
        console.log(this.$store.state.height)
          dispatch("changeHeight")
      },

3.组件传值

1.父传子

 <Tes :parentData="rename"/>

    export default {
      name: "tes",
      props:['parentData'],//父传过来的
      data(){
        return {
          childData:"cccccccccc"
        }
      }
    }

2.子传父

 <Tes @getChild="getChildData"/>
 methods:{
        getChildData(data){
          console.log(data,"子传过来的")
        }
      }

mounted() {
        this.$emit('getChild',"ooooo")
      }

4.$nextTick

异步渲染 等dom更新完毕后完成回调
页面渲染时，会将data的修改做整合，多次修改也只会渲染一次。
Vue生命周期的created钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放在Vue.nextTick()的回调函数中，与之对应的就mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成

5. ref 和 $refs 使用

ref用来给元素或组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果是在普通dom元素上使用，引用的就是dom元素，如果是在子组件上，应用就是指向组件的实例。

$refs是一个对象，持有已注册过ref的所有的子组件。

绑定元素：

      <div ref="reff">
        <p>wwwww</p>
      </div>
 //获取：
 this.$refs.reff//包含标签和标签内容

绑定组件：

//调用子组件的地方绑定ref
  <Tes ref="childRef"/>
//获取 在父
this.$refs.childRef  //可获取到组件的data和方法，在父组件内执行