Vue的基礎使用

前端框架和庫的區別

功能上的不一樣:

    jquery庫：包含DOM(操做DOM)+請求，就是一塊功能。

 
    art-template庫：模板引擎渲染，高性能的渲染DOM    (咱們後端的一種模板  跟python        的模板相似)

 
    框架：大而全的概念，簡易的DOM體驗+請求處理+模板引擎

 
    在KFC的世界裏，庫就是一個小套餐，框架就是全家桶。

 
代碼上的不一樣:

    通常使用庫的代碼，是調用某個函數或者直接使用拋出來的對象，咱們本身處理庫中的    代碼。

    通常使用框架，其框架自己提供的好的成套的工具幫咱們運行咱們編寫好的代碼。
 

框架的使用:

    初始化自身的一些行爲
    執行你所編寫的代碼
　　 釋放一些資源　

vue的起步

　　引包

　　建立實例化對象

new Vue({

el:'#app',//目的地

data:{

    msg:"hello Vue"

}

});

/*

{{}}: 模板語法插值

    {{變量}}

    {{1+1}}

    {{'hello'}}

    {{函數的調用}}

    {{1==1?'真的':'假的'}}

*/　

vue的指令系統

經常使用

vue-text

vue-html

v-if

v-for

v-show

v-bind

v-on

v-if和v-show的區別

v-if:是真正的條件渲染,由於它會確保在切換的過程當中,條件塊內的事件監聽器和子組件適當的    被銷燬和重建.

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

 

//保存數組或者對象 格式

v-for = '(item,index) in menuList'

v-for = '(value,key) in object'

//item指的是數組中每項元素　　

vue的局部組件使用
打油詩: 1.聲子 2.掛子 3.用

/ / 1. 聲子

var App = {

  tempalte:`

    <div class = 'app' >< / div>`

};

 

 

new Vue({

  el: "#app" ,

  / / 3. 用子 

  template:<App / >

  / / 2. 掛子

  components:{

     App

  }

 

})　　

父組件向子組件傳遞數據:經過prop

1.在子組件自定義特性。props:['自定義的屬性1','自定義屬性2']

 

當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性,那麼咱們就能夠像訪問data中的值同樣  

2.要在父組件中導入的子組件內部 綁定自定義的屬性 <Vheader :title = '父組件中data聲明的數據屬性'/>　　

如何從子組件傳遞數據到父組件

1.給子組件中的某個按鈕綁定原聲事件,。咱們能夠調用內建的 this.$emit('自定義的事件名','傳遞的數據')，來向父級組件觸發一個自定義的事件.

 

2.在父組件中的子組件標籤中 要綁定自定義的事件,　　

vue中全局組件的使用

Vue.component('全局組件的名字',{

 跟new Vue() 實例化對象中的options是同樣，可是要注意：

 無論是公共組件仍是局部組件 data必須是個函數 函數必定要返回 {}

})　　

局部過濾器的使用

//1.註冊局部過濾器 在組件對象中定義

filters:{

    '過濾器的名字':function(value){

    }   

}

//2.使用過濾器 使用管道符 | 

{{price  | '過濾器的名字'}}　　

全局過濾器的使用

// 註冊全局的過濾器

//第一個參數是過濾器的名字，第二個參數是執行的操做

 

Vue.filter('reverse',function(value) {    

    return value.split('').reverse().join('');

});

 

//使用跟 局部過濾器同樣