摘要：的使用場景在中通過引入在中，由于配置有處理各種文件的，所以可以用引入指令簡單值，數組，對象，數組中對象數組，對象自定義全局指令自定義指令名字指令生效周期配置對象被綁定的那個元素的原生對象一旦綁上馬上調用同上元素插入到之后再

1.Vue的使用場景 ：

* 在html中通過script引入
* 在webpack中，由于配置有處理各種文件的loader，所以可以用import引入

2.Vue指令

v-cloak
v-bind  ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 簡單值，數組，對象，數組中對象
:style ： 數組， 對象
v-for
v-if
v-show

自定義全局指令

Vue.derictive(自定義指令名字, 指令生效周期配置對象{
    bind : (被綁定的那個元素的js原生對象el) => {},   ==> 一旦綁上馬上調用
    inserted : (el同上) => {},  ==> 元素插入到DOM之后再調用
    updated : (el同上, binding) => {}
}

自定義局部指令

var vm2 = new Vue({
  el: "#app2",
  data: {},
  methods: {},
  directives: { 
    "fontweight": {
      bind: function (el, binding) {
        el.style.fontWeight = binding.value
      }
    },
  }
})

3.Vue事件修飾符

.stop
.prevent
.capture
.self
.once
.self和.stop在阻止冒泡行為上的區別

4.Vue過濾器
全局過濾器的參數傳遞規則一樣；
如果全局過濾器和局部過濾器的名字相同，在組件內部使用過濾器時，優先使用自己的內部過濾器

全局過濾器

Vue.filter("自定義過濾器名字" , function(第一參數來自于管道符 | 前的數據 ， 后面的參數是該過濾器被調用時候傳遞過來的參數){}

局部過濾器

定義在Vue實例中的filter屬性中

var vm2 = new Vue({
  el: "#app2",
  data: {},
  methods: {},
  filters: { 
    dateFormat: function (dateStr, pattern = "") {}
    }
  },
})

5.Vue按鍵修飾符
按鍵修飾符像.self這樣的事件修飾符一樣，是用在v-on事件后面的。

.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space

自定義全局按鍵修飾符

Vue.config.keyCodes.自定義按鍵修飾符名字 = 按鍵的碼值

6.Vue組件生命周期

beforeCreated(){} ==> data和methods中數據還沒初始化好
created(){} ==> data和methods中的數據已經初始化好
beforeMount(){} ==> 模板已經在內存中編譯好了，但是沒有被渲染到頁面上
mounted(){} ==> 內存中的模板已經渲染到了頁面行，用戶可以看到頁面了
beforeUpdate (){} ==> data中的數據已經更新，但是界面上的數據沒有更新
updated (){} ==> 界面上數據更新結束
beforeDestory (){} ==> 此時data和methods中數據還可以使用
destoryed (){} ==> data和methods中數據都不能使用了，Vnode被完全銷毀

7.Vue-resource
類似于axios，但是依賴于Vue.js. 引入后自動給Vue實例添加上了$http屬性

$http.get()
$http.post()
$http.jsonp()

均返回一個promise
this.$http.get("http://vue.studyit.io/api/getlunbo").then(function (result) {
  console.log(result.body)
})

8.Vue動畫

類名

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

使用第三方類名

  
這是一個H3

動畫的鉤子函數

  



beforeEnter (要執行動畫的那個對象的原生DOM對象el) {} ==> 動畫入場之前，設置動畫的起始樣式
enter (el , done) {done()} ==> 動畫開始后樣式，設置動畫結束樣式
afterEnter () {} ==> 動畫完全結束回調

9.Vue創建組件

（1）組件模板對象創建

方式1：
Vue.extend({
    template : ""
})

方式2：
直接一個 Object

（2）注冊全局組件

Vue.component(自定義組件名字, 組件模板)

（3）組件data和Vue實例data區別

組件data必須return object

10.組件切換和動畫

組件切換

comName是變量

組件切換時的動畫

11.組件父子間傳值

父組件傳值給子組件

傳單純值：


傳函數

this.$emit("func", this.sonmsg)

子組件給父組件傳值

通過父組件傳入函數的參數

$refs

12.Vue路由

和Vue-resource一樣，需要引進一個vue-router.js文件

let routeObj = new VueRouter({  
    routes : [
        {path : "" , redrect : "" , component : null}
    ]
})

var vm = new Vue({
  el: "#app",
  router: routerObj
});

路由參數

login
routes: [
  { path: "/login/:id/:name", component: login , children : [{path , redrect , component , children}] },
]
$route.params.id

一個路由對應多個組件

  
  


var router = new VueRouter({
  routes: [
    {
      path: "/", components: {
        "default": header,
        "left": leftBox,
        "main": mainBox
      }
    }
  ]
})

13.watch監視data中數據變化或者路由變化

var vm = new Vue({
  el: "#app",
  data: {firstname: "",},
  watch: { // 使用這個 屬性，可以監視 data 中指定數據的變化，然后觸發這個 watch 中對應的 function 處理函數
    "firstname": function (newVal, oldVal) {
      this.fullname = newVal + "-" + this.lastname
    },
    "$route.path": function (newVal, oldVal) {   ==> 只需要這是一個變量
      if (newVal === "/login") {
        console.log("歡迎進入登錄頁面")
      } else if (newVal === "/register") {
        console.log("歡迎進入注冊頁面")
      }
    }
  }
});