指令的使用:v-model 雙向模型改變
v-text 文字渲染,渲染頁面比較多
v-show 控制dom的顯示隱藏
v-if 控制dom 判斷
v-bind 繫結屬性
v-for 迴圈,只要用於列表等
v-on 事件繫結
v-model:主要是在表單裡面使用。比如文字框、下拉框、單選、複選、textarea。v-model是乙個雙向的功能。文字框輸入以後,模型也會發生改變。反之模型改變了文字框也會改變。vue中文使用手冊v-text:主要用於文字的渲染。和}功能一樣。但是}在第一次頁面vue木有初始化完成會顯示}字元。故文字渲染多用v-text。
v-show:控制顯示隱藏。dom是存在的。僅僅加display block: display none。
v-if:kong'z控制顯示隱藏。如果dom不顯示,整個dom沒有不存在。
v-for:迴圈。主要用於**,標籤 去迴圈乙個陣列。
v-on:事件繫結。【v-on:同等於@】
filter : 過濾器。格式化資料。如後台返回金額19數字。頁面顯示:¥19.00元。
component :元件。在做單頁面過程中使用多些。把每乙個網頁做成多個元件然後拼接。起到元件復用。如頁面頭部底部和輪播等。
-函式內部this指向改變了,使用vue resource方法之前要定義乙個內部變數_this儲存this-this.$http.('請求位址').then(function (res){})
返回的資料被包裝在了res.body裡面
-載入頁面時通過mounted鉤子函式中的this.callbackfn()傳送請求
1.不用在外面宣告,箭頭域(es6)表示已指向外層,內部this不用加下劃線,把裡面的this提公升到和外面的this一樣的作用域;2.filter分為全域性和區域性,語法變為函式(兩個引數)。全域性過濾器可以在全部例項使用,區域性過濾器只有在當前的例項使用
總結:列表通過v-for指令進行迴圈v-text指令對文字,金額,商品名稱進行賦值
商品數量是文字框,通過v-model實現雙向資料繫結
總金額區域性過濾器和全域性過濾器的使用
通過v-on或@click實現事件繫結
商品的選中,全選,class,通過v-bind實現
data是vue的模型,改變元素,操作dom
mounted一般會配合方法$nexttick使用,因為mounted並不能代表vue例項已經插入到dom節點裡去,所以使用$nexttick保證初始化完全載入
methods定義所有的事件和呼叫的方法
slice:對陣列進行切割,返回全新陣列
splice:對原生陣列進行操作
1.看到列表:v-for2.金額¥19.00元:filter
3.看到輸入框:v-model
4.一些操作:v-on:click=""或 @click=""
5.樣式變化:v-bind:class="{}"或 :class="{}"
6.v-for中可巢狀v-for
7.vue.set新增乙個本身沒有的變數
8.vue.resource外掛程式 支援get,post,delete,put,jsonp 但現在官方推薦axios
9.computed的使用
10.es6的語法學習 大勢所趨
Vue2 0使用小結
近期第一次使用vue快速開發了一款前端專案,開發效率與便捷性大幅提公升,體驗了一把vue的藝術之道,在此總結下目前所接觸到的vue基礎使用知識,後續會補充遇到的知識點和問題以及解決方案.簡介 vue 是典型mvvm框架,擁有雙向繫結的能力與完整的元件化方案,利用 virtual dom 提供了函式式...
(三)Vue2 0之VUEX的基本使用(一)
一 vuex的組成介紹 1 state 資料倉儲 2 getter 用來獲取資料 3 mutation 用來修改資料 4 action 用來提交mutation,可以進行非同步操作 二 安裝vuex 步驟 安裝vuex包 npm install vuex 建立vuex例項 new vuex.stor...
vue2 0使用預渲染
檔案目錄如下 執行後如下圖 首頁的網路請求只有乙個,沒有對應的文字和元件,不利於seo 1.router的模式必須是history 2.核心外掛程式 npm install prerender spa plugin d 3.在build webpack.prod.conf.js內部引入渲染器 con...