Vue.js2.0基礎學習筆記

時間 2019-11-09

標籤 vue.js2.0 vue 基礎學習筆記欄目 JavaScript 简体版

原文原文鏈接

一、使用腳手架Vue-cli構建vue項目html

初始化項目：vue create project  或 vue ui
進入項目根目錄：cd project
在服務器中打開：npm run serve  或  yarn serve
打包項目：npm run build   或  yarn build
測試項目：npm run lint   或  yarn lint
安裝插件或依賴：vue add element 或 yarn add element-ui 或 npm install element-ui --save

二、申明式渲染vue

<div id="app">
    {{msg}}
</div>

var app=new Vue({
    el:'#app',
    data:{
        msg:'Hello World!'
    }
})

result： hello world

三、Vue實例npm

var data={a:1}
var vm=new Vue({
    el:'example',
    data:data
})

vm.$data===data    //=>true
vm.$el===document.getElementById('example')    //=>true
vm.$watch('a',function(newValue,oldValue){
    //=>當 「 $vm.a 」改變後調用
})

四、Vue的生命週期構子element-ui

new Vue()實例化一個vue對象
初始化事件和生命週期
beforeCreate構子：組件建立以前，數據data和事件監測已初始化
經過依賴注入導入依賴項
created構子：組件實例以建立完成，此時Dom還未生成
檢查是否配置掛載節點 el 項，若是沒有則等待使用vm.$mount(el)綁定
是否存在：template 選項，存在則將其編譯到渲染函數，不存在則以el的outHTML爲編譯模板
beforeMount構子：模板編譯、掛載以前調用
編譯，並替換了被綁定元素
mounted構子：組件編譯、掛載節點
beforeupdate構子：當data數據發生改變時觸發，此時即將更新渲染
updated構子：從新渲染成功
beforeDestroy:組件即將銷燬
destroyed：組件已經銷燬

五、Vue經常使用語法、指令數組

數據綁定語法：<span>{{msg}}</span>
 一次性數據綁定：<span v-once>{{msg}}</span>    //但數據改變時msg不更新
 數據綁定只能解釋普通文本，解釋html可用v-html：<span v-html="tem"></span>
 
 v-if指令：用於條件判斷移除顯示元素，v-if是真正的條件渲染，v-show是切換display
     <span v-if="ok">yes</span>
     <span v-else>No</span>
     <template v-if="true">
         <h1>能夠使用template包裹住元素來判斷，不會顯示多餘的template標籤</h1>
     </template>
 
 v-bind指令：用於綁定HTML特性如  Class、src、href、style
 
      <a :href="url"></a> 
      <div class="a" :class="{active:isActive,'text-danger':hasErr}"></div>
      data:{
          isActive:true,
          hasErr:false
      }
      result:    <div class="a active"></div>
      

 v-on指令：用於監聽Dom事件   <a @click=""></a>
 
 v-for指令用於循環：
 
     <div id="app">
         <ul>
             <li v-for="item in items">{{item.text}}</li>
         </ul>
     </div>
     var app=new Vue({
         el:'#app',
         data:{
             items:[
                 {text:'Javascript'},
                 {text:'Vue'}
             ]
         }
     })

六、計算屬性與偵聽器緩存

計算屬性用於簡單計算，因爲在數據綁定中寫表達式難以維護，也沒法進行條件判斷等動做,能夠使用計算屬性來實現，計算屬性會根據其依賴的值自動更新並緩存
     <span>{{reversedMsg}}</span>
     new Vue({
         el:'app',
         data:{
             Msg:'Hello'
         },
         computed:{
             reversedMsg:function(){
                 return this.Msg.split('').reverse.join('')
             }
         },
         watch:{
             Msg:function(newMsg,oldMsg){
                 newMsg=oldMsg+1
             }
         }
     })
     
     result: gsMdesrevrr
     
偵聽器watch偵聽數據變化（Msg）：當須要在數據變化時執行異步或開銷較大的操做時使用

七、列表渲染(v-for的優先級比v-if高)服務器

<ul>
    <template v-for="(item,index) in items" :key="item.index" v-if(item.age>20)>
       <li> {{aaa}}-{{index}}-{{item.messge}}</li>
       <li class="more">底部加載數據</li>
    </template>
</ul>
data:{
    aaa:333,
    items:[
        {messge:111,age:444},
        {messge:222}
    ]
}
建議儘量在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高

八、使用Vue.set()響應式控制數據babel

var vm =new Vue({
    data:{
        user:{
            name:'Cai'
        }
    }
})

添加一個新的 age 屬性到嵌套的 userProfile 對象
vm.set(vm.user,'age',22)
有時你可能須要爲已有對象賦予多個新屬性，好比使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

九、事件處理app

<button @click="wran('傳入消息',$event)"></button>
methods：{
    warn:function(message,event){
        if(event){
            // 如今咱們能夠訪問原生事件對象
        }
    }
}

<a @click.stop='doThis'></a>    //阻止單擊事件繼續傳播

<form @submit.prevent=''></form>    //提交事件再也不重載頁面

<div @click.capture=''></div>    // 添加事件監聽器時使用事件捕獲模式,即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理
<div @click.self="">...</div>    //只當在 event.target 是當前元素自身時觸發處理函數
<div @click.once=""></div>    //只觸發一次點擊

<div v-on:scroll.passive="onScroll">...</div>    //滾動事件的默認行爲 (即滾動行爲) 將會當即觸發，而不會等待 `onScroll` 完成，可提高性能

鍵盤事件：
<input @keyup.enter="submit" />    //按 enter鍵觸發
<input @keyup.page-down="onPageDown">    //處理函數僅在 $event.key === 'PageDown' 時被調用

十、Vue表單處理異步

v-model雙向數據綁定

    <input v-model="message">    //輸入框
    <p style="white-space: pre-line;">{{message}}</p>
    <textarea v-model="message"></textarea>    //多行輸入框
    
    ==>複選框
    <div id="example">
        <input type="checkbox" id="red" value="red" v-model="selectColor" >
        <label for="red">紅色</babel>
        <input type="checkbox" id="green" value="green" v-model="selectColor" >
        <label for="green">綠色</babel>
        <input type="checkbox" id="blue" value="blue" v-model="selectColor" >
        <label for="blue">藍色</babel>
        <span>{{selectColor}}</span>
    </div>
    new Vue({
        el:'example',
        data:{
            selectColor:[]    //選中項會添加至數組selectColor中
        }
    })
    
    ==>單選按鈕
    <input type="radio" v-model="select" value="男">
    <input type="radio" v-model="select" value="女">
    <span>{{select}}</span>
    data:{
        select:''
    }
    
    ==>下拉選擇框
    <select v-model="such">    //加 multiple 多選，獲得數組
        <template v-for="option in options">
            <option disabled>請選擇</option>
            <option :value='option.value'>{{option.text}}</option>
        </template>
    </select>
    <span>{{such}}</span>
    data:{
        such:'A',
        options:[
            {text:'one',value:'A'},
            {text:'two',value:'B'}
        ]
    }
    <input type="checkbox" v-model="toggle">    //當選中時vm.toggle===true
    <input type="radio" v-model="pick" :value="a">    //選中時vm.pick===vm.a
    <input v-model.lazy="msg" >   //在change時更新而非input
    <input v-model.number="age" type="number">    //將用戶的輸入值轉爲數值類型
    <input v-model.trim="msg">    //自動過濾用戶輸入的首尾空白字

十一、Vue組件基礎

定義一個組件（組件與 new Vue 接收相同的選項，除el外）

Vue.component('my-component',{
   data:function(){        //一個組件的 data 選項必須是一個函數
       return{
           count:0
       }
   },
   template:'<button @click='count++'>{{count}}</button>'
})
使用組件：<my-component></my-component>

父組件經過Prop向子組件傳遞數據

Vue.component('child',{
   props:['title'],
   template:'<h3>{{title}}</h3>'
})
在父組件中使用：<child title='我是標題'></child>

給子組件傳遞的數據來自父組件的data

Vue.component('child',{
   props:['title'],
   template:'<h3>{{title}}</h3>'
})

new Vue({
    el:'#app',
    data:{
        posts:[
            {id:1,title:'title1'},
            {id:2,title:'title2'}
        ]
    }
})
<child v-for='post in posts' :key='post.id' :title='post.title'></child>    //循環動態渲染兩個child組件

當須要傳遞的props太多時，能夠在父組件傳遞一個數組或對象,而後在子組件接收
Vue.component('child',{

props:['post'],
   template:`
       <div>
           <h2>{{post.title}}</h2>
           <div>{{post.content}}</div>
       </div>
   `
   })
   <child v-for='post in posts' :key='post.id' :post='post'></child>

子組件經過事件向父組件發送消息

Vue.component('child',{
       template:`<button @click='$emit('setFont',0.1)'></button>`
   })
   
   new Vue({
       el:'#app',
       data:{
           postFontSize:1
       },
       template:`
           <div style='{fontSize:postFontSize+'em'}'>
               <p>點擊按鈕放大文字</p>
               <child @setFont='postFontSize+=$event'></child>
           </div>
       `
   })

若是自定義組件須要使用 v-model 實現雙向數據綁定

Vue.component('my-input',{
       props:['value'],
       template:`
           <input :value='value' :input='$emit('input',$event.target.value)'>
       `
   })
   <my-input v-model='searchText'></my-input>

<slot>插槽

<alert-box>
         //若是想在這裏面寫東西,在組件內用插槽
   </alert-box>
   Vue.component('alert-box',{
       template:`
           <div class='demo'>
               <slot></slot>
           </div>
       `
   })

動態組件與 is 特性

<ul>、<ol>、<table> 和 <select>等元素對內部元素有嚴格的要求如：li/tr/option,若是想在這些元素中嵌入使用自定義組件，能夠使用 is 特性：
   <ul>
       <li is='my-component'></li>
   </ul>
   
   使用 is 實現動態組件
   <component :is='creunt'></component>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。