摘要：依的值，來(lái)決定哪個(gè)組件被渲染。不具名的內(nèi)容會(huì)替換子組件中我是默認(rèn)內(nèi)容的默認(rèn)內(nèi)容另一個(gè)主要段落。這里是一些聯(lián)系信息渲染結(jié)果為這里可能是一個(gè)頁(yè)面標(biāo)題主要內(nèi)容的一個(gè)段落。

主要涉及的文件：

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

大致的過(guò)程就是：

main.js 通過(guò)

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

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

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

router ：引用 router 路由插件，它會(huì)運(yùn)行 router文件夾下的 index.js

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

template: "" 的意思就是掛在名為App的子組件到 根節(jié)點(diǎn)；它其實(shí)是重寫(xiě)了 根節(jié)點(diǎn) 的所有內(nèi)容；

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

這個(gè)頁(yè)面的幾個(gè)“App ”的依賴關(guān)系是：

import App from "./App" 引入了 App.vue 組件 (相當(dāng)于聲明并賦值了App變量) 
components: { App } 在實(shí)例中 注冊(cè)上面的 App子組件； 
template: ""  使用 這個(gè)組件替換實(shí)例的根節(jié)點(diǎn)內(nèi)容

index.html部分已經(jīng)搞定，那么看一下被使用作為的根節(jié)點(diǎn)App.vue 文件中發(fā)生了什么：
它除了常規(guī)的html 和css 代碼；還有一句

//它相當(dāng)于

它的意思是說(shuō)，當(dāng)前位置 引入 router 路由插件引導(dǎo)的子組件；

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

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


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

可以看到，router 的 index.js 把你編寫(xiě)的子組件 form.vue 作為子組件 并重定向?yàn)槟J(rèn)子組件
這樣 App.vue 的 就會(huì)找到 form.vue 渲染出來(lái)；

1，全局組件：

2，局部組件
通過(guò)父組件的 components 屬性注冊(cè)；

通俗來(lái)說(shuō)就是 ：vue 的文檔樹(shù) 是通過(guò)組件的方式組織的； 每個(gè)組件可以成為其它組件的子組件（只需要引入）；
每個(gè)組件都有
template： 組件的html 結(jié)構(gòu)；
components ：注冊(cè)或者定義 該組件的要使用的子組件；

3 組件樹(shù)實(shí)例代碼：

效果：

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

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

因?yàn)?當(dāng)這個(gè)組件被引用的時(shí)候，我們希望每次引用都是獨(dú)立的；而不是改變其中一個(gè)，全部改變；這樣reture 相當(dāng)于復(fù)制的一個(gè)新的對(duì)象存儲(chǔ)數(shù)據(jù)；

內(nèi)置組件

component 渲染一個(gè)“元組件”為動(dòng)態(tài)組件。依 is 的值，來(lái)決定哪個(gè)組件被渲染。

 

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

當(dāng)你同一位置有多個(gè)組件切換的時(shí)候，可能需要用到 內(nèi)置組件控制；通過(guò)is 綁定 變量z 控制顯示哪個(gè)變量；
常用場(chǎng)景 tab 切換；

緩存組件

通過(guò)keep-alive 內(nèi)置組件 讓瀏覽器 緩存 你的組件

 
    
hello
  

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

過(guò)渡動(dòng)畫(huà)執(zhí)行過(guò)程 有幾個(gè)狀態(tài)，可以通過(guò)css 為這些狀態(tài)自定義樣式

.fade-enter-active, .fade-leave-active { //顯示和隱藏兩個(gè)動(dòng)作的過(guò)渡期 透明度都是0.5
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
  opacity: 0
} //顯示動(dòng)作開(kāi)始時(shí) 和 隱藏動(dòng)作結(jié)束時(shí) 的透明度都是 0；

動(dòng)畫(huà)組件還為幾個(gè) 過(guò)渡 提供鉤子

  //在離開(kāi)動(dòng)作完成后執(zhí)行 transitionComplete方法
    
toggled content
  

除了 after-enter 外還有多個(gè) 鉤子函數(shù)

slot 內(nèi)容分發(fā)組件；
顧名思義 就是通過(guò)slot組件去定制 子組件的 某些 需要自定義的顯示內(nèi)容； 這里的內(nèi)容不只是變量；還包括html；它主要靠 屬性 name 去對(duì)應(yīng) 內(nèi)容

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

  

    
  
  

    我是默認(rèn)內(nèi)容 //當(dāng)沒(méi)有傳入內(nèi)容是 ；默認(rèn)內(nèi)容會(huì)被展示
  
  

父組件模板：

  
這里可能是一個(gè)頁(yè)面標(biāo)題
 //具名slot 會(huì)根據(jù)名字 找到子組件中對(duì)應(yīng)位置插入

  
主要內(nèi)容的一個(gè)段落。
  //不具名的 內(nèi)容 會(huì)替換 子組件中我是默認(rèn)內(nèi)容 的默認(rèn)內(nèi)容
  
另一個(gè)主要段落。

  
這里是一些聯(lián)系信息

渲染結(jié)果為：

  

    
這里可能是一個(gè)頁(yè)面標(biāo)題
  
  

    
主要內(nèi)容的一個(gè)段落。
    
另一個(gè)主要段落。
  
  

v-bind簡(jiǎn)寫(xiě) 為 " : " 用它來(lái)綁定元素的 屬性； 例如title ，name，class，自定屬性等;它綁定 class非常靈活

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

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

//結(jié)果是：

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

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

//結(jié)果是：

3. data 可以是數(shù)組;

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

//結(jié)果是：

4.data 是數(shù)組對(duì)象的混合

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

//結(jié)果是：

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

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

v-else 會(huì)對(duì)應(yīng)最近的一個(gè) v-show 或者 v-if 做渲染；它不需要變量；

//或者

子 傳給 父

//父組件：


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

//子組件


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



//結(jié)果 點(diǎn)擊子組件的button 后；輸出 123

父 傳給 子

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

//或者動(dòng)態(tài)綁定這個(gè)值

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


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

結(jié)果：

或者

props 屬性可以寫(xiě)成 對(duì)象的形式

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

表單的數(shù)綁定 用到 v-model
input

{{a}}

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

checBox

{{arr}}

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

// 被選中的 checBox 它的值會(huì)被打印 成為arr 的一個(gè)元素
// 回填操作；只要給 arr 填入 元素；元素對(duì)應(yīng)的checbox 就會(huì)被選中；例如：

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

select

      {{item.name}}

//通過(guò) arr2 渲染出 option；
//這里的 value 前面一定要加 “:” 否則會(huì)把item.value當(dāng)做普通字符串渲染

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

// 通過(guò)為select 綁定 dod方法和綁定selection值  change事件發(fā)生時(shí)輸出當(dāng)前選中值；
// 回填，只要給selection 賦值；對(duì)應(yīng)的項(xiàng)就會(huì)默認(rèn)選中

總結(jié)：雙向綁定自動(dòng)完成視圖更新；改變data 就會(huì)有視圖結(jié)果；回填表單，單選的 回填值是字符串；多選的對(duì)應(yīng)值是數(shù)組；

計(jì)算屬性

{{computerD}}

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

//結(jié)果： 在表單輸入的值 會(huì)被刪除數(shù)字 剩下文字輸出到頁(yè)面；

監(jiān)聽(tīng)屬性 主要應(yīng)用于 只要x改變 就做處理 的情況；

{{mode}}

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

vue 通過(guò) directives 自定義指令

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

全局自定義指令 只要 在main.js 中定義指令，這個(gè)指令就會(huì)被全局使用；本質(zhì)上就是，在new.Vue() 實(shí)例化 vue實(shí)例的時(shí)候，掛載在根節(jié)點(diǎn) 的時(shí)候 定義指令 為全局指令；

自定義指令 的分時(shí)段執(zhí)行；

這時(shí) color 的寫(xiě)法會(huì)有不同；color 變成了對(duì)象；每個(gè)時(shí)期對(duì)應(yīng)為key，value是fn；

應(yīng)用場(chǎng)景：表單渲染完成以后，focus 到某個(gè)input

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

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

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

插件安裝
在 命令行輸入 npm install xxx --save 把插件安裝到 項(xiàng)目，并且通過(guò)--save 寫(xiě)入到package.json中

這樣別人通過(guò) package.json 就可以安裝我們的項(xiàng)目依賴插件；

引入到文件

引入到 實(shí)例中

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

它是一個(gè)自定義命令；在webpack 中做了定義，意思是@補(bǔ)充路徑為絕對(duì)路徑；