vue快速入門

2021-09-21 01:52:56 字數 2702 閱讀 3720

一、什麼是 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 然後...