Vue編程基礎

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

  1. v-model 多用於表單元素實現雙向數據綁定(同angular中的ng-model)
  2. v-for 格式: v-for="字段名 in(of) 數組json"  循環數組或json(同angular中的ng-repeat),須要注意從vue2開始取消了$index
  3. v-show 顯示內容 (同angular中的ng-show)
  4. v-hide  隱藏內容(同angular中的ng-hide)
  5. v-if    顯示與隱藏  (dom元素的刪除添加 同angular中的ng-if 默認值爲false)
  6. v-else-if  必須和v-if連用
  7. v-else  必須和v-if連用  不能單獨使用  不然報錯   模板編譯錯誤
  8. v-bind  動態綁定  做用: 及時對頁面的數據進行更改
  9. v-on:click 給標籤綁定函數,能夠縮寫爲@,例如綁定一個點擊函數  函數必須寫在methods裏面
  10. v-text  解析文本
  11. v-html   解析html標籤
  12. v-bind:class   三種綁定方法  一、對象型  '{red:isred}'  二、三元型   'isred?"red":"blue"'   三、數組型  '[{red:"isred"},{blue:"isblue"}]'
  13. v-once  進入頁面時  只渲染一次 不在進行渲染
  14. v-cloak  防止閃爍
  15. v-pre  把標籤內部的元素原位輸出
相關文章
相關標籤/搜索