vue—你必須知道的 - chaoran－IT工程師數位筆記本

文章出處

屬性與方法

不要在實例屬性或者回調函數中（例如,vm.$watch('a', newVal => this.myMethod())使用箭頭函數。因為箭頭函數會綁定父級上下文，所以 this 不會按照預期指向 Vue 實例，然后 this.myMethod 將是未定義。

語法

v- 指令是帶有v-的特殊屬性

v-if 條件渲染
v-show
v-else (必須在v-if/v-else-if/v-show指令后)
v-else-if (v-if/v-else-if后)
v-for (遍歷)
v-html (綁定HTML屬性中的值)
v-bind (響應更新HTML特性，綁定自定義屬性，如綁定某個class元素或style)
v-on (監聽指定元素的dom事件)
v-model (內置的雙向數據綁定，用在表單控件，綁定的value通常是靜態字符串)
v-cloak 關于vuejs頁面閃爍{{message}}

v-once 只渲染元素和組件一次，隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容并跳過

<p v-if="seen">超然haha</p>
  <p v-else></p>

  <div v-show="isSeen">超然haha</div>
  <div v-else></div>

  <ul  v-bind:class="{'class1': class1}">
    <li v-for="item in items">{{ item }}</li>
  </ul>

  <button v-on:click="handleClick">click</button>

  <div>
    <p>{{ message }}</p>
    <input v-model="message">
  </div>

  <!-- v-for -->
  <!--  可以通過一個對象的屬性來迭代數據 -->
  <li v-for="value in object">
    {{ value }}
  </li>
  <!-- 也可以提供第二個的參數為鍵名 -->
  <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
  </li>
  <!-- 第三個參數為索引 -->
  <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
  </li>
  <!-- 也可以循環整數 -->
  <li v-for="n in 10">
   {{ n }}
  </li>

  <!-- v-cloak -->
  <!-- 和CSS規則如[v-cloak]{display:none}一起用時，這個指令可以隱藏未編譯的Mustache標簽直到實例準備完畢 -->
  [v-cloak]{
    display:none;
  }
  <div v-cloak>{{message}}</div>

  <!-- v-once -->
  <!-- 組件 -->
  <my-component v-once :comment="msg"></my-component>

表達式——提供了JavaScript表達式支持

參數——指令后以冒號聲明

<a v-bind:href="url">超然haha</a>

過濾器

<div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

縮寫

v-bind

v-on

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

計算屬性

computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter

 var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 調用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '菜鳥教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

特殊屬性

key 主要用在 Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes

<li v-for="item in items" :key="item.id">...</li>

ref 給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

is 用于動態組件,決定哪個組件被渲染

<!-- 動態組件由 vm 實例的屬性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!-- 也能夠渲染注冊過的組件或 prop 傳入的組件 -->
<component :is="$options.components.child"></component>

keep-alive 緩存不活動的組件實例，而不是銷毀它們,保留組件狀態避免重新渲染

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

include && exclude 允許組件有條件的緩存

vue 樣式綁定

class屬性

v-bind:class

<div v-bind:class="{ active: isActive }"></div>

v-bind:class 數組綁定

<div v-bind:class="[activeClass, errorClass]"></div>

style(內聯樣式)

v-bind:style

 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">超然haha</div>

v-bind:style (將多個樣式綁定到一個元素)
```
<div v-bind:style="[baseStyles, overridingStyles]">超然haha</div>
```
當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應的前綴。

vue事件處理器

v-on

接收方法

<button v-on:click="greet">Greet</button>

內聯js語句

<button v-on:click="say('hi')">Say hi</button>

事件修飾符
- .stop 阻止單擊事件冒泡
- .prevent 不再重載頁面
- .capture 使用事件捕獲模式
- .self 只當事件在該元素本身（不是子元素）觸發時觸發
- .once 事件只會觸發一次
鍵值修飾符
- .enter
- .tab
- .delete (捕獲 “刪除” 和 “退格” 鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
鼠標按鍵修飾符
- .left
- .right
- .middle

表單控件綁定

基礎用法

文本
復選框
單選按鈕

選擇列表

<!-- 文本 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!-- 復選框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<!-- 單選按鈕 -->
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

<!-- 選擇列表 -->
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

修飾符

.lazy 從輸入轉變為在 change 事件中同步
.number 自動將用戶的輸入值轉為 Number 類型
.trim 自動過濾用戶輸入的首尾空格

父子組件通信

props （父–>子）

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 實例中像“this.message”這樣使用
  template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>

on/emit (子–>父)

父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件
不能用 $on 偵聽子組件拋出的事件，而必須在模板里直接用 v-on 綁定

<button-counter v-on:increment="incrementTotal"></button-counter>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

子組件索引

JavaScript 中直接訪問子組件。為此可以使用 ref 為子組件指定一個索引 ID*
```
<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
```

var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile

過渡效果

插入、更新或者移除 DOM 時

單元素組件的過度

v-if
v-show
動態組件
組件根節點

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}

刪除或插入包含在transition組件中的元素時，處理過程：
1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。
2. 如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
3. 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執行。(注意：此指瀏覽器逐幀動畫機制，和Vue的 nextTick 概念不同)

過渡的css類名

v-enter 過渡開始狀態
v-enter-active 過渡狀態
v-enter-to 過渡的結束狀態（插入后）
v-leave 離開過渡開始狀態
v-leave-active 過渡狀態
v-leave-to 離開過渡結束狀態

v- 是這些類名的前綴。使用可以重置前綴，比如 v-enter 替換為 my-transition-enter。

<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"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

vue經驗總結

click

普通元素： @click
組件元素： @click.native

slot

非必要元素
可自定義

router-link

tag 指定渲染標簽類型
active-class 激活時樣式n

javascript 經驗總結

fetch

asyn 函數

asyn 函數的含義和用法

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds