vue入門

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。（來源https://cn.vuejs.org/v2/guide/）

1、vue安裝的兩種方式（https://cn.vuejs.org/v2/guide/installation.html）

vue的啓動有兩種方式， 一種是經過CDN引入的方式， 一種是基於node.js建立vue腳手架的方式。

1.1 經過CDN引入

<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2 建立vue腳手架的方式

Vue 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev

2、經過cdn的方式引入vue的使用方法

2.1 起步

建立一個html文件， 在body中建立一個div， 設置id， 以下所示；

<div id="app">
　　{{ message }}
</div>
建立一個js文件， 在body最下方引入， 以下圖所示

在js文件中建立一個vue對象， 經過vue對象中的‘el’綁定元素， 而後經過data元素設置屬性， 以下所示

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
打開html文件， 咱們就可已在瀏覽器中看到message中的內容了

2.2 vue中的經常使用函數

2.2.1 判斷（v-if和v-else-if和v-else）

2.2.2 循環（v-for）

2.2.3 事件綁定（v-on）

2.2.4 參數綁定（v-bind）

2.2.5 表單模型（v-model）

2.3 vue對象中的屬性

2.3.1 數據 -- data

2.3.2 屬性 -- props（用於組件間參數傳遞）

2.3.3 方法 -- methods

2.3.4 計算屬性 -- computed（與方法的異同之處）

 

3、經過安裝vue腳手架方式啓動vue