標籤：capture hang 連接埠 ted for迴圈 空格 -o 移動 事件處理
一、基本介紹
Vuejs是一套構建使用者介面的漸進式架構。
vue-cli腳手架 搭建基本代碼架構
vue-router 官方外掛程式管理路由
vue-resourse Ajax通訊
webpack 構建工具
es6+eslint eslint:es6代碼風格檢查工具
工程化 組件化 模組化
移動端常用開發技巧：flex彈性布局 css stickyfooter 炫酷的互動設計
2-vuejs介紹
架構從傳統後台MVC向REST API+前端MV*遷移
MVVM ：view（視圖、dom） viewmodel（通訊，觀察者） model（資料，js對象）
應用情境：針對具有複雜互動邏輯的前端應用
提供基礎的架構抽象
通過Ajax資料持久化，保證使用者體驗
eg： angular react vuejs
輕量級MVVM架構
資料驅動+組件化的前端開發
Github超過25k+的star數，社區完善
資料驅動：DOM是資料的一種自然映射
組件化：擴充html元素，封裝可重用的代碼
原則：頁面上每個獨立的可視/可互動地區視為一個組件
每個組件對應一個工程目錄，組件所需要的各種資源在 這個目錄就近維護
頁面不過是組件容器，組件可以嵌套自由組合形成完整 的頁面
二、安裝
本人用npm方法安裝。（前期工作見另一篇隨筆： Nodejs下載到其他盤後的環境配置+第一個http伺服器的構建 ）
開啟cmd 輸入以下命令，my-project這個是工程名，可以隨便起的。先進入你要建立的檔案夾下再建立webpack。
先安裝vue-cli相當於建築工人先把架構搭好才能繼續工作。
執行完第二步會有一系列問題：（我的工程名叫sell ，斷行符號繼續）
根據紅框裡的提示再依次輸入。 瀏覽器就會自動開啟
說明安裝vue成功了。
三、目錄結構：
build：最終發布的代碼存放位置
config：配置目錄，包括連接埠號碼等。
node_modules：npm載入的項目相依模組
src：開發目錄 源碼
assetes：放置一些圖片，如logo等
components：目錄裡面放了一個組件檔案，可以不用
App.vue：項目入口檔案，我們可以直接將組件寫這裡
main.js：項目的核心檔案
static：靜態資源目錄，片字型等
test：初始測試目錄，可刪除
.***.：設定檔
index.html：首頁入口檔案
package.json：項目設定檔
README.md：項目的說明文檔
四、模組文法
1、插值
文本：資料繫結 {{ message}}
html：
屬性：v-bind
運算式：js的運算式
2、指令
參數：v-bind指令被用來響應地更新html屬性
這裡的href是參數
<a v-on:click="doSomething">
v-on 用來監聽DOM事件
修飾符：半形句號（還不太懂）
3、使用者輸入
input輸入框 用v-model指令來實現雙向資料繫結
v-on監聽事件
4、過濾器
五、條件陳述式
1、條件判斷
v-if：在元素和template中使用
v-else :
v-else-if :
v-show：不支援template文法
六、迴圈語句
v-for指令需要以site in sites形式的特殊文法，sites是來源資料 site是數組元素別名
迭代對象：v-for=”value in object”
index 索引 key value 索引值對
學過oracle的大概都知道，這跟遊標for迴圈遍曆類似。
七、計算屬性
computed vs methods
用methods代替computed效果是一樣的，但是computed可以快取資料
八、樣式綁定
1、class屬性綁定
在對象中傳入更多屬性用來動態切換多個class：<div class="static active text-danger"></div>
2、數組文法
可以把一個數組傳給v-bind-class
3、v-bind:style
九、事件處理器
事件監聽用v-on
事件修飾：click.stop（阻止事件冒泡） submit.prevent（提交事件不再重載頁面） click.capture（添加事件接聽程式時使用事件捕獲模式） click.self（只當事件在該元素本身觸發時觸發） click.once（事件至少觸發一次）
十、表單
複選框
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <p>單個複選框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多個複選框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>選擇的值為: {{ checkedNames }}</span></div><script>new Vue({ el: ‘#app‘, data: {checked : false, checkedNames: [] }})</script></body></html>
單選框
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>選中值為: {{ picked }}</span></div><script>new Vue({ el: ‘#app‘, data: {picked : ‘Runoob‘ }})</script></body></html>
下拉式功能表
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 </title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <select v-model="selected" name="fruit"> <option value="">選擇一個網站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 選擇的網站是: {{selected}} </div></div><script>new Vue({ el: ‘#app‘, data: {selected: ‘‘ }})</script></body></html>
修飾符：.lazy <!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自動將使用者的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值
.trim
如果要自動過濾使用者輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入
十一、組件
1、 全域群組件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"><runoob></runoob></div><script>// 註冊Vue.component(‘runoob‘, { template: ‘<h1>自訂群組件!</h1>‘})// 建立根執行個體new Vue({ el: ‘#app‘})</script></body></html>
2、局部組件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"><runoob></runoob></div><script>var Child = { template: ‘<h1>自訂群組件!</h1>‘}// 建立根執行個體new Vue({ el: ‘#app‘, components: { // <runoob> 將只在父模板可用 ‘runoob‘: Child }})</script></body></html>
vue的開發文檔很友好，此處只列出了基本的文法，有需要可以看開發文檔。
------------------------------------------------------------------------------------------阿羅哈-------------------------------------------------------------------------------------------------------------------------------------------
並非教學帖，只是自己學習中的筆記。
原創，著作權保護。
over。
Vuejs入門-----安裝+基本文法學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
