1、依賴環境搭建:
添加鏡像
# 安裝好node.js後,使用淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org
項目初始化
# 全局安裝vue-cli cnpm install vue-cli -g # 查看安裝vue-cli是否成功 vue list # 選定一個路徑新建項目hello-vue vue init webpack "hello-vue" # 安裝相關vue依賴 cnpm install # 運行 cnpm run dev
1、經常使用指令:
Vue是一個MVVM(Model / View / ViewModel)的前端框架html
- v-model 多用於表單元素實現雙向數據綁定(同angular中的ng-model)
- v-for 格式: v-for="字段名 in(of) 數組json" 循環數組或json(同angular中的ng-repeat),須要注意從vue2開始取消了$index
- v-show 顯示內容 (同angular中的ng-show)
- v-hide 隱藏內容(同angular中的ng-hide)
- v-if 顯示與隱藏 (dom元素的刪除添加 同angular中的ng-if 默認值爲false)
- v-else-if 必須和v-if連用
- v-else 必須和v-if連用 不能單獨使用 不然報錯 模板編譯錯誤
- v-bind 動態綁定 做用: 及時對頁面的數據進行更改
- v-on:click 給標籤綁定函數,能夠縮寫爲@,例如綁定一個點擊函數 函數必須寫在methods裏面
- v-text 解析文本
- v-html 解析html標籤
- v-bind:class 三種綁定方法 一、對象型 '{red:isred}' 二、三元型 'isred?"red":"blue"' 三、數組型 '[{red:"isred"},{blue:"isblue"}]'
- v-once 進入頁面時 只渲染一次 不在進行渲染
- v-cloak 防止閃爍
- v-pre 把標籤內部的元素原位輸出