vue 學習目錄

一 、vue.js 安裝

使用 cdn 方法

npm 方法

建立乙個基於 webpack 模板的新專案

嘗試修改初始化項，將 hello.vue 修改為以下**：

每個 vue 應用都需要通過例項化 vue 來實現。

除了資料屬性，vue 例項還提供了一些有用的vue例項屬性與方法,它們都有字首 $，以便與使用者定義的屬性區分開來

資料模型到檢視的這一過程我們叫插值

}

```

當再次改變資料的內容時候，不想改變檢視的原內容，可以單次插值

=>頁面中是：快樂大本營

msg: '快樂大本營'i=>頁面中是：快樂大本營 //本(i)是紅色的。

插值的過程中可以應用js表示式：加減乘除，字串拼接，方法呼叫等等

}//10000

}

//abc

data}

有多個地方處理乙個資料，我們可以將這些處理方法提煉出來作為過濾器復用,vue內建很多過濾器，我們可以直接使用

}//$100.00

}

//$200.00

}}

//abc

插值方式都是靜態的，屬性資料的結果是什麼，渲染頁面就是什麼

動態插值是說在插值前，可以對資料執行一次函式，這個函式的返回值就是我們要插入頁面中的內容

靜態插值寫在data屬性

動態插值寫在computed屬性中

動態插值（computed）與靜態插值（data）屬性一樣，屬性值都是乙個物件

不同點

靜態插值對應物件的屬性是乙個值型別的資料

動態插值對應物件的屬性是乙個函式，並且函式要有返回值，這個返回值就是將要插入頁面中的資料

}

//10000

data:

// 定義的動態屬性

computed:

文字插值：使用 }（雙大括號）的文字插值

html插值：使用 v-html 指令用於輸出 html **

html屬性中的值應使用v-bind 指令。

v-bind:的基本用法：

判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

v-bind:class 指令

Vue學習目錄

近年來，前端框架發展火熱，新的框架和名詞不停地出現在開發者眼前，而且開發模式也產生了一定的變化。目前來看，前端mvvm框架的出現給開發者帶來了不小的便利，其中的代表就有angular.js react.js以及vue.js。這些框架的產生使得開發者能從過去手動維護dom狀態的繁瑣操作中解脫出來，盡可...

vue學習目錄

一 比較好的 vue2 vuerouter2 webpack axios 構建專案實戰2017重製版 一 基礎知識概述 vue2 vuerouter2 webpack axios 構建專案實戰2017重製版 二 安裝 nodejs 環境以及 vue cli 構建初始專案 vue2 vuerouter...

vue學習 過程目錄結果

components 資料夾用來存放vue元件。個人建議，把每乙個元件中使用到的image放置到對應的元件子檔案目錄下，便於統一的管理 node modules npm安裝的該項目的依賴庫 vuex 資料夾存放的是和 vuexstore 相關的東西 state物件，actions，mutations...