vue入門筆記

Undefined^發表於2018-10-17
Vue筆記

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

宣告例項

new Vue({
    el:",  繫結作用域
    data：放資料
    methods:事件函式
    computed:計算屬性
    生命週期
    beforeCreate:{}
})

methods 和 data中的變數不能重複

指令 

用之前需要先宣告 例項
v-text 相當於 innerText
v-html 相當於 innerHTML 注意：內容按普通 HTML 插入 – 不會作為 Vue 模板進行編譯 。
v-for 迴圈

我們用 v-for 指令根據一組陣列的選項列表進行渲染。

<p v-for="(item,$index) in arr"></p>
<p v-for="(item,$key,$index) in arr"></p> 
item:屬性值 $key:屬性名 $index:索引值

v-for 指令需要使用 item in items 形式的特殊語法，arr是源資料陣列並且 item 是陣列元素迭代的別名。　

 

v-on 繫結 語法糖縮寫：@

<button v-on:click="btn" ></button>
<!--縮寫-->
<button @click="btn" ></button>

 

v-show 顯示/隱藏

根據表示式之真假值，切換元素的 display CSS 屬性。當條件變化時該指令觸發過渡效果。

v-show = true/false

v-if/v-if-else/v-else-if判斷

 

前一兄弟元素必須有 v-if 或 v-else-if

<div v-if="type === `A`">
  A
</div>
<div v-else-if="type === `B`">
  B
</div>
<div v-else-if="type === `C`">
  C
</div>

v-if和v-show區別

v-if是動態的向DOM樹內新增或者刪除DOM元素； 
v-show是通過設定DOM元素的display樣式屬性控制顯隱； 
v-if 只會載入真的部分 有快取 消耗高 適合偶爾的顯示隱藏切換
v-show 都會載入 沒有快取 消耗相對低 適合頻繁的切換

v-model 雙向繫結 和表單配合使用
下拉框 value>text

 

v-bind 屬性繫結 動態地繫結一個或多個特性，或一個元件 prop 到表示式。

v-bind:class  語法糖縮寫 :class

<p :style=[color,size]> 繫結多個屬性用陣列方法

相關文章