一、什麼是 vue
vue 是乙個用於構建使用者介面的漸進式的js框架,vue 的核心是mvvm雙向資料繫結模式及元件化開發,它使得開發前端不僅易於上手,還便於與vue的優良生態或既有專案整合。
二、快速開始
1.在頁面引入vue的js檔案即可。
注意:cdn是一種加速策略,能夠快速的提供js檔案
2.在頁面中繫結vue元素
3.建立vue物件,設計物件的內容
4.在頁面的元素中使用插值表示式來使用vue物件中的內容
三、 插值表示式
插值表示式的作用是在view中獲得model中的內容
1.插值表示式
2.mvvm雙向資料繫結:v-model
3.事件繫結: v-on
v-on叫繫結事件,事件是input,響應行為是changetitle。也就是說,當input元素發生輸入事件時,就會呼叫vue裡定義的changetitle方法
event.target.value == 當前事件的物件(input元素)的value值注意:此時的this指的是當前vue物件。
所以:如果在method裡要想使用當前vue物件中的data裡的內容,必須加上this.
changetitle:function(event)
4.事件繫結簡化版:使用@替換v-on:
5.屬性繫結: v-bind
html裡的所有屬性,都不能使用插值表示式
上面的這種做法是錯誤的,可以使用繫結屬性繫結來解決:
要想在html的元素中的屬性使用vue物件中的內容,那麼得用v-bind進行屬性繫結
baidu可以縮寫成 冒號baidu
6.v-once指令
指明此元素的資料只出現一次,資料內容的修改不影響此元素}
7.v-html
就好比是innerhtml
8.v-text
純文字輸出內容
四、事件
1.事件繫結範例
範例一:}
範例二:
mooooooo
mo:function(event)
範例三:
mx:}my:}
2.引數傳遞
click
... methods:,...
傳多個引數:
click
...methods:,...
3.停止滑鼠事件
mx:}my:}---停止滑鼠事件
dummy:function(event)
另一種方式:
停止滑鼠事件
4.事件修飾符
輸入回車鍵時提示
輸入空格時提示
五、vue改變內容 虛擬dom和diff演算法
1.插值表示式的方式
範例一:
}範例二:}
2.computed的用法
}}result:}
getresult:}
getresultcomputed:}
computed的函式第一次呼叫後會被加入到記憶體中。
computed內的函式使用時不用帶小括號
computed的函式指的是被動呼叫,method是主動去觸發他裡面的函式,computed指的是你去使用這個函式
computed是乙個屬性計算函式,比如用來計算div的寬度和高度,div的寬度和高度一直在變,但computed中的該函式本身沒有變,所以可以把函式寫在computed中。
3.watch的用法:監控
watch用於監控引數的變化,並呼叫函式,newval是能獲得引數新的值,oldval是引數老的值。
watch的高階用法:一秒後讓count歸為0,體現了vue的雙向繫結
watch:,1000);
六、vue改變樣式
1.class的動態繫結
v-bind:class=""
鍵名是類名,鍵值是布林,如果是true,則將指定的類名繫結在元素上,如果是false,則不繫結。
下午2.加入computed
3.雙向繫結的體現
在input中輸入顏色,就可以設定div的class
4.多個樣式的操作
.redhahaha
5.通過style設定樣式
設定div的style屬性的值,style裡放json物件,鍵是駝峰式寫法,值是變數color
6.使用computed設定樣式
7.設定style屬性的多個樣式
七、vue中的語句
1.分支語句
v-if
v-else-if
v-else
v-show: 實際上是讓該元素的display屬性為none,隱藏的效果。所以效能更好。
hohoho
hehehe
通過模板標籤對多個元素進行同一的if和else管理
inside text
2.迴圈語句
vue中只有for迴圈
改進版:for語句裡,key建議加上,作為標識.i是下標
使用templete實現迴圈
}}迴圈中操作物件
}}:}:}====
迴圈的另一種用法:
v-for="n in 10" //可以在分頁元件中使用
八、總結
vue是以資料為驅動,漸進式的web框架,mvvm雙向繫結,虛擬dom為核心和diff演算法,所謂的虛擬dom和diff演算法,是指當頁面內容發生變化時,只更新改變的部分,是通過虛擬dom和diff演算法實現這樣的操作,效率非常高。
vue快速入門
一 什麼是 vue vue 是乙個用於構建使用者介面的漸進式的js框架,vue 的核心是mvvm雙向資料繫結模式及元件化開發,它使得開發前端不僅易於上手,還便於與vue的優良生態或既有專案整合。二 快速開始 1.在頁面引入vue的js檔案即可。注意 cdn是一種加速策略,能夠快速的提供js檔案 2....
vue快速入門 4
每個 vue 應用都是通過用vue函式建立乙個新的vue 例項開始的 var vm new vue 在建構函式中傳入乙個物件,並且在物件中宣告各種vue需要的資料和方法,包括 等等 接下來我們一 一介紹。每個vue例項都需要關聯一段html模板,vue會基於此模板進行檢視渲染。我們可以通過el屬性來...
vue小白快速入門
一 vue是什麼 vue 是一套用於構建使用者介面的漸進式框架。壓縮後僅有17kb 二 vue環境搭建 標籤引入,vue會被註冊為乙個全域性變數。但在用 vue 構建大型應用時推薦使用 npm 安裝。這裡推薦一下是用 的cnpm,非常的快 npm install g cnpm registry 然後...