摘要：依的值，來決定哪個組件被渲染。不具名的內容會替換子組件中我是默認內容的默認內容另一個主要段落。這里是一些聯系信息渲染結果為這里可能是一個頁面標題主要內容的一個段落。

主要涉及的文件：

index.html
index.js
main.js
APP.vue

大致的過程就是：

main.js 通過

import Vue from "vue"
import App from "./App"
import router from "./router"

引入主要的文件；并通過下面的代碼，初始化 vue 視圖，掛載到 index.html 的id = "app" 的節點中（根節點）；

new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

router ：引用 router 路由插件，它會運行 router文件夾下的 index.js

components: { App } 的意思就是 注冊APP.vue 作為子組件；

template: "" 的意思就是掛在名為App的子組件到 根節點；它其實是重寫了 根節點 的所有內容；

 "" 其實是  的縮寫；所以template 還可以寫成： 
 
 template: "
文字
",
 
 //這就跟 在普通vue文件中插入 子組件 一樣了

這個頁面的幾個“App ”的依賴關系是：

import App from "./App" 引入了 App.vue 組件 (相當于聲明并賦值了App變量) 
components: { App } 在實例中 注冊上面的 App子組件； 
template: ""  使用 這個組件替換實例的根節點內容

index.html部分已經搞定，那么看一下被使用作為的根節點App.vue 文件中發生了什么：
它除了常規的html 和css 代碼；還有一句

//它相當于

它的意思是說，當前位置 引入 router 路由插件引導的子組件；

最后，看一下router 引入了什么： 那就是router文件夾下 index.js 的內容：

import forms from "@/components/form.vue" // 把form.vue 子組件引入


export default new Router({  //新建路由，并輸出
  routes: [
    {
      path: "/",        //路由重定向的路徑寫法
      component: forms    //組件為forms
    }
  ]
})

可以看到，router 的 index.js 把你編寫的子組件 form.vue 作為子組件 并重定向為默認子組件
這樣 App.vue 的 就會找到 form.vue 渲染出來；

1，全局組件：

2，局部組件
通過父組件的 components 屬性注冊；

通俗來說就是 ：vue 的文檔樹 是通過組件的方式組織的； 每個組件可以成為其它組件的子組件（只需要引入）；
每個組件都有
template： 組件的html 結構；
components ：注冊或者定義 該組件的要使用的子組件；

3 組件樹實例代碼：

效果：

組件的data 為什么 都是這樣的方？：

data:function (){
    reture {
        a:1,
        b:2
    }
}

因為 當這個組件被引用的時候，我們希望每次引用都是獨立的；而不是改變其中一個，全部改變；這樣reture 相當于復制的一個新的對象存儲數據；

內置組件

component 渲染一個“元組件”為動態組件。依 is 的值，來決定哪個組件被渲染。

 

var vm = new Vue({
  el: "#example",
  data: {
    currentView: "home"
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

當你同一位置有多個組件切換的時候，可能需要用到 內置組件控制；通過is 綁定 變量z 控制顯示哪個變量；
常用場景 tab 切換；

緩存組件

通過keep-alive 內置組件 讓瀏覽器 緩存 你的組件

 
    
hello
  

transition 是過渡動畫組件； 例子中 p元素通過 變量 show 控制顯示隱藏； 配合自定義的css 動畫 fade 顯示過渡效果；

過渡動畫執行過程 有幾個狀態，可以通過css 為這些狀態自定義樣式

.fade-enter-active, .fade-leave-active { //顯示和隱藏兩個動作的過渡期 透明度都是0.5
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
  opacity: 0
} //顯示動作開始時 和 隱藏動作結束時 的透明度都是 0；

動畫組件還為幾個 過渡 提供鉤子

  //在離開動作完成后執行 transitionComplete方法
    
toggled content
  

除了 after-enter 外還有多個 鉤子函數

slot 內容分發組件；
顧名思義 就是通過slot組件去定制 子組件的 某些 需要自定義的顯示內容； 這里的內容不只是變量；還包括html；它主要靠 屬性 name 去對應 內容

（官方例子）
假定我們有一個 app-layout 組件，它的模板為：

  

    
  
  

    我是默認內容 //當沒有傳入內容是 ；默認內容會被展示
  
  

父組件模板：

  
這里可能是一個頁面標題
 //具名slot 會根據名字 找到子組件中對應位置插入

  
主要內容的一個段落。
  //不具名的 內容 會替換 子組件中我是默認內容 的默認內容
  
另一個主要段落。

  
這里是一些聯系信息

渲染結果為：

  

    
這里可能是一個頁面標題
  
  

    
主要內容的一個段落。
    
另一個主要段落。
  
  

v-bind簡寫 為 " : " 用它來綁定元素的 屬性； 例如title ，name，class，自定屬性等;它綁定 class非常靈活

1. v-bind:class 與 本身的class 不會沖突；

data:function(){
    reture {
        a: "red"
    }
}

//結果是：

2. data 可以是對象；value 的bool 值代表是否渲染此class

data:function(){
    reture {
        a:{
            red：true,
            bold: true,
            padding:false
        }
    }
}

//結果是：

3. data 可以是數組;

data:function(){
    reture {
        a:["red","buld"]
    }
}

//結果是：

4.data 是數組對象的混合

data:function(){
    reture {
        a:["red",{blue：false,padding:true}]
    }
}

//結果是：

vue 主要通過 v-if 和 v-show ，v-else 控制模板的渲染流程

他們的區別是： 如果a==false； v-if 是不會渲染 box 的，就是dom中找不到 box；v-show則只會把box 設置為 display：none；

v-else 會對應最近的一個 v-show 或者 v-if 做渲染；它不需要變量；

//或者

子 傳給 父

//父組件：


compononet
methods:{
    doSome (str){
        console.log(str)
    }
}

//子組件


methods:{
    saySome(){
        this.$emit("myEvent","123")
    }
}



//結果 點擊子組件的button 后；輸出 123

父 傳給 子

//父組件
我是父親{{fatherName}}

//或者動態綁定這個值

data:(){
    return {
    fatherName:"百麗"
    }
}


//子組件
"my-child":{
    template:"
我是{{num}}兒子
",
    props:["num"]
}

結果：

或者

props 屬性可以寫成 對象的形式

props:{
    num:["string","Number"] //表示只接受 字符串或者數字類型的值；
}

表單的數綁定 用到 v-model
input

{{a}}

data:function(){
    reture {
        a:""
    }
}
// 在輸入框中輸入值，就會賦值到 變量a 同時 div 的內容也會是a ；
// 數據的回填 只需要給 a 賦值就可以

checBox

{{arr}}

data:function(){
    reture {
        arr:[]
    }
}

// 被選中的 checBox 它的值會被打印 成為arr 的一個元素
// 回填操作；只要給 arr 填入 元素；元素對應的checbox 就會被選中；例如：

data:function(){
    reture {
        arr:["a"] // value=="a" 的 checBox 會被選中
    }
}

select

      {{item.name}}

//通過 arr2 渲染出 option；
//這里的 value 前面一定要加 “:” 否則會把item.value當做普通字符串渲染

data:function(){
    reture {
       arr2:[
                {
                  value:"10",
                  name:"banana"
                },
                {
                  value:"2",
                  name:"apple"
                }
            ],
       selection:null
    }
}
 methods:{
    dod(){
        console.log(this.selection)
    }
}

// 通過為select 綁定 dod方法和綁定selection值  change事件發生時輸出當前選中值；
// 回填，只要給selection 賦值；對應的項就會默認選中

總結：雙向綁定自動完成視圖更新；改變data 就會有視圖結果；回填表單，單選的 回填值是字符串；多選的對應值是數組；

計算屬性

{{computerD}}

data:function(){
    reture {
       d:""
    }
}
computed:{
    computerD(){
        return this.d.replace(/d/g,"") 
    }
}

//結果： 在表單輸入的值 會被刪除數字 剩下文字輸出到頁面；

監聽屬性 主要應用于 只要x改變 就做處理 的情況；

{{mode}}

data:function(){
    reture {
       d:"",
       mode:""
    }
}
watch:{
    d(val,old){
        this.mode = "新值："+val+" 舊值: "+old
    }
}
//結果： 每當d 改變時 ；mode 也改變；

vue 通過 directives 自定義指令

directives:{
    color:function(el,binging){  //color 對應 v-color 指令； 處理函數有兩個參數，el代表綁定的元                                        
        el.style.color = binging.value;  //素，binging 代表指令的值；
    }
}

全局自定義指令 只要 在main.js 中定義指令，這個指令就會被全局使用；本質上就是，在new.Vue() 實例化 vue實例的時候，掛載在根節點 的時候 定義指令 為全局指令；

自定義指令 的分時段執行；

這時 color 的寫法會有不同；color 變成了對象；每個時期對應為key，value是fn；

應用場景：表單渲染完成以后，focus 到某個input

directives:{
    focus:{
        inserted:function(el,binging){ //在插入完成后 執行
            el.focus();
        }
    }
}

插件是什么？ 可以理解為 一個功能豐富的vue 組件；

可以在package.json 中找到所有注冊的插件

插件安裝
在 命令行輸入 npm install xxx --save 把插件安裝到 項目，并且通過--save 寫入到package.json中

這樣別人通過 package.json 就可以安裝我們的項目依賴插件；

引入到文件

引入到 實例中

引入組件中的 @ 是什么東西

它是一個自定義命令；在webpack 中做了定義，意思是@補充路徑為絕對路徑；