vue的基礎學習 二

2021-10-02 13:16:28 字數 2167 閱讀 6300

表示式裡面寫在**? - 表示式寫在html的標籤中

表示式裡面寫什麼? - 可以直接寫data中的資料,也可以寫基本的js語句

}

}

el:// 掛載dom

data:// 準備資料

components:

watch:{} //監聽

methods:{}   //書寫方法

computed:

}

filters:

}

注意:

(1)計算屬性,函式必須有返回值,函式的名字接收返回值,當成乙個屬性來使用。

(2)計算屬性,有依賴快取,只有依賴的資料發生改變,才會重新計算,否則,不會重新計算,直接使用快取

(3)計算屬性有getter和setter,但是一般都不用setter

(4)filter的使用:

1.什麼是指令?

指令是寫在標籤上的一種自定義屬性,主要是把vue例項中的資料,輸出到html中(vue例項物件和html關聯)。 

《標籤 id=」」 class=」」v-*=」***」>2.常用指令

(1)v-textv-text=」***」>

=》   ***

(2)v-html- 可以解析標籤

(3)v-show- 頻繁的切換 - 修改的display屬性

(4)v-if-  使用者許可權之類的 - 刪除或重建dom

(5)v-else-if

(6)v-else

//>50顯示

//>20顯示

//>10顯示

(7)v-for遍歷 

}  //遍歷陣列

}  //遍歷物件

注意:v-for遍歷運算元組,實現改變時-

如: arr[index] = [1,2,5,] // 陣列自身改變,不能更新dom結構

vue內部對陣列的方法進行了重寫    -    繼續原生js操作,然後進行更新了介面

因此,要介面資料更新,必須使用vue重寫後的方法

(8)v-model雙向資料繫結 - 只能使用於表單,讓表單和資料雙向繫結。

適用的標籤: input(輸入框 單選框 多選框)  select  textarea

(9)v-on -繫結事件 (簡寫 @)

《標籤 v-on:事件型別=」函式名」>v-on @click

阻止預設事件 - @click.prevent =

阻止冒泡事件 - @click.stop = 

按enter鍵觸發 - @click.enter = /@click.13

傳遞乙個值 @click='geta(12,$event)' //預設函式不傳值,會自動傳入$event

geta(num,event)

(10)v-bind-給屬性繫結動態資料

語法: 《標籤v-bind:屬性=」表示式」 >簡寫: 《標籤:屬性=」表示式」 >v-bind繫結style

語法: 《標籤:style=」」 >v-bind繫結class

語法:《標籤v-bind:class=」」 >注意:flag是true,就有這個類,是false,就沒有這個類

學習vue基礎知識(二)

全域性狀態管理 多元件共享狀態 多個元件使用同乙個資料 任何乙個元件發生改變 其他的元件也要跟著發生相應的變化 建立全域性狀態管理的例項 註冊在元件裡使用全域性狀態值 a.獲取渲染全域性狀態值b.修改全域性狀態值 5大核心 state 全域性狀態資料mutation 規定只有mutation才能修改...

Vue入門(二)Vue基礎

本章根據前面的講解對有關的語法做進一步的講解和擴充,夯實基礎 所謂掛載點,就是前面例子中vue例項所管理的元素,這類似於css和jq的選擇器。data 1 vue例項管理其他選擇器對應的元素 類選擇器 data 元素選擇器 el div data 這裡呢,我僅僅列舉出兩個,其他的請大家自主的去試驗即...

Vue基礎學習

到公司第一天,把快遺忘的vue再看一遍官網的文件。vue.js是什麼?vue.js是一套用於構建使用者介面的漸進式框架。宣告式渲染 下面展示一些 new vue 結果hello vue 繫結元素attribute message 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊 介紹 v bind attr...