Vue基本語法

2022-10-10 07:51:07 字數 2147 閱讀 9967

1. vue安裝

2. vue: 宣告式渲染

3. 雙向繫結:v-model

模型變化,檢視變化,檢視變化,模型變化

4. 事件處理:v-xx

//v-on:click, 點選事件繫結

點讚 #繫結操作

點讚 #繫結方法

點讚 #單擊事件簡寫

//v-on:keyup.鍵碼="事件", 繫結按鍵事件

事件修飾符:
.stop: 阻止事件冒泡,兩個巢狀div中,如果點選了內層的div,則外層的div也會被觸發

.prevent: 阻止預設事件發生

.once: 只執行一次

.capture: 使用事件捕獲模式

.self: 只有元素自身觸發事件才執行

v-bind:屬性繫結vue資料

//class屬性加強,根據vue資料是true或false,動態新增class名

你好//color加強

你好v-for:繫結資料,

v-for="(item, index) in 資料", 遍歷元素集合

v-for ="(value, key, index)", 遍歷物件

5. 計算屬性:computed

​ 動態計算vue資料的值

**:}, 數量:

總價:}

6. 監控:watch

語法:數值: function(newval, oldval) {}

或:數值(newval, oldval) {}

7. 過濾器: filters

​ 管道+filters: 實現過濾器功能,過濾器分為兩種:

data: ,]},

filters: }})

8. 元件:component

應用介面都可以抽象為乙個元件樹:

全域性註冊元件:註冊的元件可以在全域性使用,每個元件都是獨立的

區域性元件:只能在當前vue示例中使用

const counter2 = }次`,

data()

}}; data: ,

components:

})

9. 宣告週期:鉤子函式

vue宣告週期:

data: ,

methods: ,

add()

},beforecreate() ,

created: function () ,

beforemount() ,

mounted() ,

beforeupdate() ,

updated()

});

vue 基本語法

一 vue資料繫結 繫結屬性 迴圈渲染資料 1.資料繫結 1 變數的繫結 表示式 2 物件的繫結 3 其他的繫結指令 v html指令 繫結當前元素的html標籤,可自動解析值裡面的html標籤 v text指令 將值放進去,不會解析裡面的html標籤,也可進行變數的綁值 一 1.資料繫結 2.繫結...

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...