vue 基本語法

2021-09-13 03:34:26 字數 1315 閱讀 4644

一、vue資料繫結、繫結屬性、迴圈渲染資料

1.資料繫結

(1)變數的繫結:表示式}

(2)物件的繫結

(3)其他的繫結指令

v-html指令:繫結當前元素的html標籤,可自動解析值裡面的html標籤

v-text指令:將值放進去,不會解析裡面的html標籤,也可進行變數的綁值

一、1.資料繫結 

-->

{}}-->}}

2.繫結屬性

利用變數值,動態操作元素屬性一、2.繫結屬性

動態操作元素屬性

v-bind 簡寫形式 :

-->

3.迴圈渲染資料

v-for:可理解為重複,寫給誰就是重複誰

使用v-for時新增key屬性,保持唯一性

一、3.迴圈渲染資料

v-for:可理解為重複,寫給誰就是重複誰

使用v-for時新增key屬性,保持唯一性

-->

二、 vue繫結屬性

1.繫結class

傳給 v-bind:class 乙個物件,以動態地切換 class:

二、1.繫結class

-->

繫結類名稱

2.繫結style

二、動態繫結style行內樣式

-->

123456789

90三、vue資料雙向、vue事件及事件物件、vue中ref獲取dom元素節點以及mvvm

mvvm 結構:mv 指model資料改變影響view;vm指view資料改變影響model

1.資料雙向繫結

v-model:繫結表單元素標籤的值

三、1.資料雙向繫結

v-model:繫結表單元素標籤的值

-->

}2.vue事件及事件物件

v-on:事件型別

@事件型別

三、2.事件

-->

獲取修改之後的資料

獲取修改之後的資料

3.vue中ref獲取dom元素節點

(1)給元素命名:ref

(2)寫**獲取:this.$refs.名字

三、3.vue中ref獲取dom元素節點

-->

獲取dom元素

4.給元素定義自定義屬性

三、4.給元素定義自定義屬性

-->

獲取自定義屬性

vue基本語法

開始vue的征程啦,首先呢,你需要安裝一下vue的環境 等我閒下來打算寫一下教程,當然csdn也有很多優秀的教程,大家可以參照配置一下 vue需要利用es6的一些特性,之後就可以愉快的開始vue專案的開發了。今天先介紹vue的一些基本語法 還是以 方式展示吧,需要注意的是,在終端下,利用npm ru...

Vue 基本語法

vue 指令元件 模板語法支援性還是很高的,資料型別都是支援的,但是不支援 輸出語法 console.log alert 格式 v mustache語法 v msg v v html 將乙個資料展示在乙個dom內容中,innerhtml html屬性 v bind 單項資料繫結 vue中通過 v m...

Vue基本語法

1.vue安裝 2.vue 宣告式渲染 3.雙向繫結 v model 模型變化,檢視變化,檢視變化,模型變化 4.事件處理 v xx v on click,點選事件繫結 點讚 繫結操作 點讚 繫結方法 點讚 單擊事件簡寫 v on keyup.鍵碼 事件 繫結按鍵事件 事件修飾符 stop 阻止事件...