computed 計(jì)算屬性

computed的結(jié)果會(huì)被緩存，除非依賴(lài)的響應(yīng)式屬性變化才會(huì)重新計(jì)算，主要當(dāng)做屬性來(lái)使用。

  var vm = new Vue({
    el: '#app',
    computed: {
      name() {
        return 111
      }
    }
  })

watch 監(jiān)聽(tīng)屬性

被監(jiān)聽(tīng)的屬性值一發(fā)生變化就會(huì)觸發(fā) watch

  var vm = new Vue({
    el: '#app',
    data: {
      name: 'aaa'
    },
    watch: {
      'name': function (newVal, oldVal) {
          console.log(newVal)   //  最近變化的新值
          console.log(oldVal)   //  以前的舊值
       }
    }
  })

父子組件傳遞數(shù)據(jù)

(1) 子組件獲取父組件的數(shù)據(jù)

  <div id="app">
    <child :sendMsg="msg"></child>
  </div>

var child = {
  template: '<input @click="getMsg">  猜我說(shuō)了啥   {{ sendMsg }}   </input>',
  data () {},
  methods: {
    getMsg() {
       console.log( this.sendMsg  )
      }
  },
  props: ['sendMsg']
}
var  vm = new Vue({
  el: '#app',
  data: {
    msg: '媛問(wèn)：猿哥一起嗨啊'
  },
  components: {
    child
  }
})

（2）子組件獲取父組件的方法 并向父組件傳遞數(shù)據(jù)。

  <div id="app">
    <child @sendWay="way"></child>
  </div>

var child = {
  template: '<input>   </input>' ,
  data() {
    return {
      title: '猿'
    }
  },
  methods: {
    getWay() {
      this.$emit('sendWay', this.title)
    }
  }
}


var vm = new Vue({
  el: '#app',
  data: {
    from: ''
  },
  methods: {
    way(t) {
      this.from = t
    }
  }
})

ref 獲取DOM 元素 和 組件

獲取DOM元素

<div>
  <h3 ref="txt">丫丫滴滴啪啪</h3>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
      getElement(){
        this.$refs.txt.innerText    //   輸入h3 的文本內(nèi)容
      }
    }
})

獲取組件

  var tpl = {
    template: '<h1 ref="child">子組件</h1>',
    data () {
      return {
        some: '一點(diǎn)東西'
      }
    }，
    methods: {
      way () {
          console.log('嚕嚕嚕')
       }
    }
  }
  
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      getChild () {
          this.$refs.child.innerText        //   子組件
          this.$refs.child.some      //  獲取子組件中定義的數(shù)據(jù)    ‘一點(diǎn)東西’
          this.$refs.child.way()    //   獲取子組件中的方法，  '嚕嚕嚕'
        }
    },
    components: {
      tpl
    }
  })

Router

  <div class="app">
    <!-- 相對(duì)于a 標(biāo)簽， tag屬性可以改變?cè)氐臓顟B(tài)，不影響跳轉(zhuǎn) --> 
    <router-link to="/login" tag="button">登錄</router-link>  
    <router-link to="/register" tag="p">注冊(cè)</router-link>
    <!-- 占位符  路由組件將放在這里顯示 -->
    <router-view></router-view>
  </div>

var login = {
      template: '<h1>登錄組件</h1>',
    }
    var register = {
      template: '<h1>注冊(cè)組件</h1>'
    }

    var router = new VueRouter({
      routes: [
        // component 必須是組件的模板對(duì)象，不能是組件的引用名稱(chēng)
        {path: '/login', component: login},
        {path: '/register', component: register}
      ]
    })

    var vm = new Vue({
      el: '.app',
      data: {},
      
      router: router   // 暴露在 vm 實(shí)例對(duì)象
    })

路由 redirect 重定向

  {path: '/', redirect: '/login'},

組件間切換的動(dòng)畫(huà)效果:

組件過(guò)渡過(guò)程中，會(huì)有四個(gè)CSS類(lèi)名進(jìn)行切換，這四個(gè)類(lèi)名與transition的name屬性有關(guān)，比如name="fade",會(huì)有如下四個(gè)CSS類(lèi)名：

• fade-enter:進(jìn)入過(guò)渡的開(kāi)始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
• fade-enter-active:進(jìn)入過(guò)渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過(guò)渡過(guò)程完成后移除。
• fade-leave:離開(kāi)過(guò)渡的開(kāi)始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
• fade-leave-active:離開(kāi)過(guò)渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開(kāi)過(guò)渡完成后被刪除。

• in-out(mode默認(rèn)in-out模式）：新元素先進(jìn)入過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開(kāi)。
• out-in：當(dāng)前元素先進(jìn)行過(guò)渡離開(kāi)，離開(kāi)完成后新元素過(guò)渡進(jìn)入。

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px)   
    }

    .v-enter-active,
    .v-leave-active {
      transition: all .5s ease
    }
  </style>

  <div class="app">
    <router-link to="/login" tag="button">登錄</router-link>
    <router-link to="/register" tag="p">注冊(cè)</router-link>
    <!-- 占位符  路由組件將放在這里顯示 -->
    <transition mode="out-in">   
      <router-view></router-view>
    </transition>
  </div>

路由傳參1

  <router-link to="/login?id=111">  登錄 </login>

獲取參數(shù)

  this.$route.query.id    //  id= 111

image.png

路由傳參2

    <router-link to="/login/222" tag="button">登錄</router-link>
    <router-link to="/register/333" tag="p">注冊(cè)</router-link>

routes: [
        // component 必須是組件的模板對(duì)象，不能是組件的引用名稱(chēng)
        {path: '/', redirect: '/login'},
        {path: '/login/:id', component: login},
        {path: '/register/:id', component: register}
      ]
    })

created() {
        console.log(this.$route.params.id)    // 222 
      },

image.png

使用render 渲染組件

我們不光可以使用components渲染組件，還可以用 render 屬性來(lái)渲染組件
看代碼：

html:

  <div class="app">
    <h2>render 會(huì)替換掉整個(gè)元素</h2>
  </div>

js:

  var com = {
    template: '<div>這是一個(gè)登陸組件</div>'
  }
  var vm = new Vue({
    el: '.app',
    render: function (createElement) {
      return createElement(com)  // createElement 是一個(gè)函數(shù) 參數(shù)是模板對(duì)象 ， 返回的結(jié)果將替換 el 指向的元素
    }
  })

與components不同的是 render屬性會(huì)覆蓋整個(gè)dom 元素，只能放一個(gè)組件，components 卻可以放多個(gè)組件

文件的導(dǎo)入和導(dǎo)出

es6 提供了文件的導(dǎo)入和導(dǎo)出，但是不能直接通過(guò)瀏覽器運(yùn)行，需要借助bable 進(jìn)行轉(zhuǎn)碼，才可以使用
export default : 將文件導(dǎo)出

test.js :

  export default {
    name: '張三',
    age: 20
  }

import : 導(dǎo)入文件
main.js :

  import file from './test.js'

使用 export default 只能導(dǎo)出一個(gè)對(duì)象

export
按需要導(dǎo)出成員，可以向外暴露多個(gè)成員

test.js:
  export var title = '一只猿'   // 導(dǎo)出成員
  export var o = '一只媛'   

  import {title, o} from './test.js'   // 名稱(chēng)必須一致

使用 {} 的方式來(lái)接收多個(gè)成員，不需要的成員可以不用接收 {title}