從零開始 Vue.js 筆記

安裝 on macOS

brew install npm
npm install cnpm -g  # 從此用 cnpm 代替 npm，因爲下載文件更快
cnpm install -g vue-cli

安裝完成，即可打開 IDEA，安裝 Vue plugin，開始創建第一個 Vue 項目、添加 configuration（npm） 此係列過程省略。

備忘命令

命令行創建項目：

vue init webpack my-project
cd my-project
cnpm install
cnpm run dev

成功執行以上命令後訪問 http://localhost:8080/ 即可。熱更新，開發極其方便。

目錄解析

目錄 / 文件	說明
build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等。我們初學可以使用默認的。
node_modules	npm 加載的項目依賴模塊
src	開發目錄，基本上要做的事情都在這個目錄裏。裏面包含：

src	說明
assets	圖片
components	裏面放了一個組件文件，可以不用
App.vue	項目入口文件，我們也可以直接將組件寫這裏，而不使用 components 目錄
main.js	項目的核心文件
static	靜態資源目錄，如圖片、字體等
test	初始測試目錄，可刪除
.xxxx文件	一些配置文件，包括語法配置，git配置等
index.html	首頁
package.json	項目配置文件
README	說明文檔

學習筆記 （僅留作備忘）

Vue 對象，其成員取出方式：vm.$data

插值

文本： {{ msg }}
html：<div v-html=“msg”></div> , msg 是 data的一個K，V是 html 代碼字符串
屬性：v-bind 響應式更新屬性, e.g. v-bind:href="" e.g. v-bind:class="{‘class_name’: data_bool, ‘c2’: d2}"，實際上，class=可以對應一個對象字典，可以保存到 data、computed 裏，{class_name: bool}；也可以是一個數組[c1, c2] e.g. v-bind:style="{ color: ‘green’, …}" =後一個字典、數組，可以是保存到對象

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      use: false,
      test_data1: 'test data'
    }
  },
  methods: {
    test_func1: function () {
      return this.test_data1 + ' from test func'
    },
    change_func1: function () {
      this.test_data1 = 'clicked' // 會使 使用 test_func1 的元素重新調用 test_func1
    }
  }
}
</script>

computed 與 methods

一般 computed 只有相關依賴發生改變時纔會重新取值。而 methods 總會重新調用；
computed 可以實現 getter 和 setter， e.g

    site: {
      get: function () {
        return ......
      },
      set: function (newValue) {
        var ....... 
      }
    }

v-if

v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後；條件判斷可以用庫函數
對於簡單條件顯示的元素如果需要非常頻繁地切換，則使用 v-show；如果在運行時條件不太可能改變，則使用 v-if

v-on

v-on 指令，它用於監聽 DOM 事件，e.g. v-on:click=“function”
vue_obj.$watch(’’, function(newv, oldv) {}); // 即在那個字典裏擴充一項

v-model，修飾符

在 input 等輸入類元素中 使用 v-model 實現雙向數據綁定；複選框checkbox輸出可以是一個數組
修飾符 .lazy .number：<input v-model.number="age" type="number"> .trim
修飾符，以 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
如 .prevent 使 v-on 觸發的事件調用 event.preventDefault()。修飾符可以串聯
e.g. <form v-on:submit.prevent="onSubmit"></form> 提交事件不再重載頁面；
e.g. v-on:click.stop 阻止單擊事件冒泡； capture；self；once
按鍵修飾符
keyup,keypress,keydown; <input v-on:keyup.13="func">: keycode 爲 13時調用 func；keyup.enter 等助記

過濾器

可用在兩個大括號或指令中，格式 msg | formatter , 函數 formatter 第一個參數爲 msg，可以直接再增加參數，formatter(arg2, arg3… )

縮寫

v-bind: -> :
v-on: -> @

組件

全局：

Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})

局部組件：在某實例內註冊 components: { 'runoob': child_dict }
child_dict 格式：{ props: ['msg1', 'msg2'], template: '<span>{{ msg1 + msg2 }}</span>' }
prop 是父組件用來傳遞數據給子組件的一個自定義屬性，子組件需要顯式地用 props 選項聲明 “prop”
<runoob msg1="test" msg2=" compo"></runoob>
當 prop 是一個對象而不是字符串數組時，prop驗證：props:{ pA: Number, pB:[Number, String, ..] pC:{type: String, required: true}, pD: {type, default}, pF:{ validator: function(value) { return value > 10 }}}, type 支持自定義構造器 instanceof

自定義組件可以直接使用 v-bind、v-for 等等。

需要把子組件數據傳回父組件，要自定義事件，思想：監聽子組件的行爲 $on(eventName) 或 v-on: 監聽事件，$emit(eventName) 觸發事件
在某個自定義組件（根元素）上監聽一個原生事件，使用 .native 修飾

自定義指令

e.g. 註冊一個全局自定義指令 v-focus

Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部指令 同理， directives: { dir1: {}, dir2: {} }
鉤子：
bind；inserted；update；componentUpdated；unbind
指令的名字、修飾符等都在參數中：
el: 指令所綁定的元素，可以用來直接操作 DOM

binding: 一個對象，包含以下屬性：

• name: 指令名，不包括 v- 前綴。
• value: 指令的綁定值， 例如： v-my-directive=“1 + 1”, value 的值是 2（支持Vue data、js對象等）。
• oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression: 綁定值的表達式或變量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
• arg: 傳給指令的參數。例如 v-my-directive:foo.bar， arg 的值是 “foo”。
• modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 編譯生成的虛擬節點。

oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

路由

一個根實例，有 router
router 是一個 VueRouter 實例，實例內部有 routes
routes 是一個數組，一個數組元素是一個 字典，path 和 component
總之剛開始非常難理解，這裏不知道怎麼解釋，只知道怎麼用。

<router-link> 屬性

to，tag 屬性

<!-- to 加一個字符串，目標地址 -->
<router-link to="home">Home</router-link>
<!-- 默認渲染後是一個 a，指定其他標籤如 tag="li" -->
<a href="home">Home</a>

使用 v-bind:to 可以擴展功能類似前面，再想加字符串要 "'str'"
其他如 “{ path: ‘home’ }”
命名路由 “{ name: ‘user’, params: { userId: 123 }}”
帶查詢參數，下面的結果爲 /register?plan=private
“{ path: ‘register’, query: { plan: ‘private’ }}”

replace 屬性

點擊調用 router.replace() 而不是 router.push()，導航後不會留下 history 記錄:
<router-link :to="{ path: '/abc'}" replace></router-link>

append 屬性

從 /a 導航到一個相對路徑 b，沒有配置 append 則路徑爲 /b，配了則爲 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>

（exact-）active-class

設置 鏈接激活（準確激活）時使用的 CSS 類名。
router-link 默認情況下的路由是模糊匹配，e.g. 訪問 /article/1也會激活 <router-link to="/article">；當設置 exact-active-class 以後，這個 router-link 只有在當前路由被全包含匹配時纔會被激活 exact-active-class 中的 class

event

聲明可以觸發導航的事件。可以是一個字符串或是一個包含字符串的數組，如 mouseover

混入 mixins，Vue.mixin

有一些在某些組件中可複用的方法或者計算屬性，使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。如果 methods 選項中有相同的函數名，則 Vue 實例優先級會較高。

ajax

和其他框架大同小異，略，主要就是 this.$http

Vue.set

在運行過程中實現屬性 (data中的某個對象）的添加或刪除，則可以使用全局 Vue: Vue.set 和 Vue.delete 方法