VueDay1

1.MVVM:

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行爲抽象化，讓咱們將視圖 UI 和業務邏輯分開。

2.v-cloak v-text v-html指令的用法

• v-cloak 解決閃爍問題 (插值表達式不會覆蓋標籤裏面其餘內容)

• v-text v-html 則會覆蓋 ，v-html能夠解析html標籤.

經常使用指令學習

1. v-bind: :是Vue中，用於綁定屬性的指令

   • 能夠簡寫爲 :要綁定的屬性

   • v-bind中能夠寫合法的js表達式。

2. v-on:click :Vue中提供的綁定事件指令 事件處理邏輯寫在Vue對象中 methods對象中

   • 縮寫爲 @click=""

3. 事件修飾符：

   • .stop 阻止冒泡

   • .prevent 阻止默認事件

   • .capture 添加事件偵聽器時使用事件捕獲模式

   • .self 只當事件在該元素自己（好比不是子元素）觸發時觸發回調

   • .once 事件只觸發一次

4. js兩種事件機制：1.事件冒泡：從裏向外開始執行 阻止事件冒泡 evt.stopPropagation();2.捕獲 ：從外向內 3.阻止事件默認行爲： e.preventDefault();

5. v-model:1.v-bind: 只能實現數據的單向綁定。從M -V2.v-model 能夠實現數據雙向綁定 ：(只能運用在表單元素中。)

3.使用class樣式

1.數組

<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>

2. 數組中使用三元表達式

<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>

3. 數組中嵌套對象

<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>

4. 直接使用對象

<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

5. 使用內聯樣式： 直接綁定style屬性 v-bind:style="{}or[]or variable"

4.v-for指令

1.遍歷數組 <p v-for="(item,i) in list">{{item}}</p>2.遍歷對象 <p v-for="(val,key,i) in list">{{val}}</p> :遍歷對象值在前，鍵在後。3.迭代數字: <p v-for="count in 20"></p> :迭代數字從1開始。

4. v-for的注意事項:在特殊狀況下或使用組件，須要指定惟一的字符串或數值形 key 屬性

   
     <p v-for="item in list" :key='item.id'></p>

5.v-if v-show指令：

• v-if:切換是經過刪除或建立實現切換的。(要較高的切換性能消耗)

• v-show：是經過切換display：none實現切換的。 （有較高的初始渲染消耗）

6.vue中的過濾器

1. 全局過濾器 ：

Vue.filter('過濾器名稱',function(data){
    //data爲過濾以前的數據
})

2. 私有過濾器：

var vm=new Vue({
    el"",
    data：{},
    methods:{},
    filters{
               dateFormat:function(data){
    
}    
               } 
})

3. 過濾器使用時就近原則，先查找私有過濾器，沒有則繼續在全局過濾器中查找.

7.ES6 數組 字符串擴展：

1. array.filter()：

array.filter(function(currentValue,index,arr), thisValue)

2. array.some()

some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）。

some() 方法會依次執行數組的每一個元素：

3. ES2017 引入了字符串補全長度的功能。若是某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

   有兩個參數，第一個字符串的位數，2補全的字符串內容

8.按鍵修飾符：

1. 系統提供的有：.enter

2. .tab

3. .delete (捕獲「刪除」和「退格」鍵)

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

   2.自定義全局按鍵修飾符：

   
   Vue.config.keyCodes.f1 = 112

9.定義指令

1. 定義全局指令：

   
   Vue.directive('name',{
       bind:function(el){},
       //當元素綁定時當即執行（1次） 和樣式相關的操做，通常在bind中執行
       inserted:function(el){},
       //當元素插入到dom時執行（1次）
       update:function(){el}
      //當發生更新時就執行，能夠執行屢次.
   })

2. 定義私有指令：

   
     directives:{
      'fontWeight':{
          bind:function(el,binding){
              el.style.fontWeight=binding.value;
          }
      }
    }

3. 簡寫：若是你只想要在bind和update中定義指令:

   
   Vue.directive('color-swatch', function (el, binding) {
     el.style.backgroundColor = binding.value
   })

10.Vue實例生命週期

1. 建立生命週期： beforeCreated created beforeMount mounted

2. 運行生命週期： beforeUpdate updated

3. 銷燬生命週期：beforeDestory destoryed

11.vue-resource的使用

1. 在引入vue以後，引入vue-resource文件

2. 至關於給添加 window.Vue.$http屬性

3. 具體使用：

• get(url, [config])

• jsonp(url, [config])

• post(url, [body], [config]

this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

• 設置post提交數據爲普通表單：

post的[config]={emulateJSON:true} 等價於設置request的Content-Type: application/x-www-form-urlencoded

4. 全局配置數據接口

Vue.http.option.root="http:studyit.io/" 配置根路徑 （下面的請求路徑爲絕對路徑，不要加 \）

5. 全局配置emulateJson:

Vue.http.options.emulateHTTP = true;

12.Vue動畫

1.過渡動畫

<transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

2.使animate.css:

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
​
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
   :duration="{enter:200,leave:400}"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

3. 使用鉤子函數定義動畫

 <input type="button" value="快到碗裏來" @click="flag=!flag">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>

 

 // 自定義動畫
        beforeEnter(el) {
          //在動畫開始以前執行
          el.style.transform = "translate(0,0)"
        },
        enter(el, done) {
          //初始化動畫函數
          el.offsetWidth
          el.style.transform = "translate(200px,400px)"
          el.style.transition = "all 2s ease"
          done()
        },
        afterEnter(el) {
          // 讓小球隱藏
          this.flag = !this.flag
        }

4.transition-group 動畫須要加上特殊的css樣式：

• 有兩個特殊屬性：

1. appear:頁面初始加載會有過渡效果

2. tag="ul":會將transition-group渲染爲ul標籤，默認渲染爲span標籤.

.v-enter,.v-leave-to{
      opacity: 0;
      transform: translateY(80px);
   }
    .v-enter-active,.v-leave-active{
      transition: all 1s ease;
   }
//下面兩個是爲了效果更好的實現.
    .v-move{
      transition: all 1s ease;
   }
    .v-leave-active{
      position: absolute;
   }

13.v-if 和v-else指令:

能夠實現兩個組件的切換：經過定義一個標示falg

<login v-if="falg" @click="falg=true"></login>
<register v-else="falg" @click="falg=false"></register>
​
data:function(){
    return {
        flag:true
   }
}

• Vue提供的標籤

temlpate  component   transition transition-group

<component :is="componentName"></component>

• 組件動畫：只須要用transition把組件包裹起來

  • mode:設置過渡效果先出再進.

  <transition name="" mode="out-in">
    <component :is="componentName"></component>
  </transition>

• 定義組件的另外一種方式

var login={
    template:"<h1>{{msg}}<h1>",
    data:function(){
        return {
            msg:'我是登陸組件'
       }
   },
    mothods:{
        
   }
}
//註冊全局組件,
Vue.component('login',login)
//註冊私有組件
components:{
    login
}
//調用·
<login></login>