目錄
01 vuejs中屬性的基本使用
02 v-show指令的使用
03 v-if 指令的使用
04 v-for指令的使用
05 v-model 指令
06 template模板標簽
07 v-on事件的綁定指令
08 事件中的event對象
01 vuejs中屬性的基本使用
? ? ? ? {{ }} 叫做mustache模板語法? 雙花括號? 小胡子語法
? ? ? ? 雙花括號里可以寫js表達式? 所謂的js表達式就是取個值 只要有個值就行(變量? 字面量值 函數調用 運算符表達式 三目 都可以)
? ? ? ? el:'#app',
? ? ? ? 掛載目標 被掛載的標簽以及內部可以使用vue語法
? ? ? ? 可以使寫成el:'div' 但是不能寫body 和html 不允許直接掛載到body或者html標簽上面
? ? ? ? data:{ }
? ? ? ? 定義所有在頁面上使用的變量
? ? ? ? data里面可以定義任意類型的變量 然后在頁面中使用
02 v-show指令的使用
? ? ? ? vue指令: 寫在標簽屬性位置? 用來彌補屬性功能不足的問題
? ? ? ? v-show指令 用來控制元素的顯示與隱藏
????????使用步驟:?
????????????????標簽 v-show ='js表達式'
????????????????????????表達式返回的值解析以后 如果是true 則元素顯示 否則元素隱藏
????????本質: 控制的是元素的display屬性
????????
03 v-if 指令的使用
? ? ? ? v-if 指令:? 控制元素渲染與否
? ? ? ? 使用步驟:
? ? ? ? ? ? ? ? v-if='js表達式'
? ? ? ? ? ? ? ? ? ? ? ? 如果表達式結果為true則元素顯示 否則元素銷毀
? ? ? ? ? ? ? ? 和 v-if 搭配使用的指令v-else
? ? ? ? ? ? ? ? v-if 為true的時候顯示v-if的元素 銷毀v-else的元素
? ? ? ? ? ? ? ? v-if為false的時候銷毀v-if的元素 顯示v-else的元素
? ? ? ? ? ? ? ? 還有v-else-if指令:
? ? ? ? ? ? ? ? ? ? ? ? v-if='表達式1'
? ? ? ? ? ? ? ? ? ? ? ? v-else-if='表達式2'
? ? ? ? ? ? ? ? ? ? ? ? v-else-if='表達式3'
? ? ? ? ? ? ? ? ? ? ? ? ...
? ? ? ? ? ? ? ? ? ? ? ? v-else
? ? ? ? ? ? ? ? 注意點:
? ? ? ? ? ? ? ? ? ? ? ? v-if 系列指令 中間不能有任何其他元素/標簽 否則會報錯
? ? ? ? 面試題:
? ? ? ? ? ? ? ? v-show和v-if的區別:
? ? ? ? ? ? ? ? ? ? ? ? 從表面上看都是控制元素的顯示隱藏的
? ? ? ? ? ? ? ? ? ? ? ? 那么區別是:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-show只是控制元素的display屬性
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 所以不管條件式true還是false都會渲染這個元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 但是v-if 不一樣?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果條件式true才渲染這個元素? 如果是false則元素不渲染
? ? ? ? ? ? ? ? ? ? ? ? 使用場景:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果頁面加載時不需要這個元素 然后后期通過條件改變渲染?
????????????????????????????????則使用v-if(具有懶加載的性能? 性能高一點)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果像彈窗一樣 短時間內反復顯示隱藏 則推薦使用v-show,?
????????????????????????????????因為這種場景使用v-if反復渲染銷毀 非常消耗性能
04 v-for指令的使用
? ? ? ? v-for模板渲染:
? ? ? ? ? ? ? ? 把同一段html代碼中的數據按照數組或者對象的循環的方式反復渲染并且同步渲染數據
? ? ? ? 寫法:
? ? ? ? ? ? ? ? 渲染數組:
? ? ? ? ? ? ? ? ? ? ? ? <標簽 v-for='變量 in data里面的數組'>{{變量}}</標簽>
????????????????????????<標簽 v-for='( 元素,索引) in data里面的數組'>{{元素}}{{索引}}</標簽>
? ? ? ? ? ? ? ? 渲染對象:
? ? ? ? ? ? ? ? ? ? ? ? <標簽 v-for =' 值 in data里面的對象 '>{{值}}</標簽>
????????????????????????<標簽 v-for =' (值,鍵)??in data里面的對象 '>{{值}},{{鍵}}</標簽>
????????????????????????<標簽 v-for =' (值,鍵,索引)??in data里面的對象 '>{{值}},{{鍵}},{{索引}}</標簽>
05 v-model 指令
? ? ? ? 專門用在表單控件上面 代替value屬性 讓value能夠綁定一個data變量
? ? ? ? 獲取這個變量的值就是控件的值
? ? ? ? 修改這個變量的值就是修改控件的value屬性的值
? ? ? ? 輸入框和多行文本框 一旦使用v-model就不用再單獨定義value屬性
? ? ? ? 單選和多選的value需要單獨定義
????????????????v-model綁定的變量 自動關聯被選中的單選框和多選框的value值
06 template模板標簽
? ? ? ? 作用: 專門用來渲染html代碼? 而且頁面渲染成功后這個標簽本身不存在
? ? ? ? template 可以結合v-if 和v-for指令來使用 但是不能結合v-show使用
07 v-on事件的綁定指令
?????????v-on事件綁定:
????????<標簽 v-on:事件名稱='驅動函數(傳實參)'></標簽>
????????????????如果不傳參一般括號不寫直接寫函數名
? ? ? ? 使用步驟:
? ? ? ? ? ? ? ? 1.在需要綁定事件的標簽上面定義v-on
? ? ? ? ? ? ? ? 2.v-on:不帶on的事件名稱='事件驅動函數名'
? ? ? ? ? ? ? ? 3.在vue構造函數的對象里面和data同級的位置定義methods
? ? ? ? ? ? ? ? 4.在methods里面定義驅動函數
? ? ? ? 簡寫:
? ? ? ? ? ? ? ? @事件名稱='事件驅動函數'
? ? ? ?在事件驅動函數中 如果想要獲取data里面的變量進行操作那么直接this.data里面的變量名即可
? ? ? ?在vue中驅動函數內部的this指向的是vue對象 不是dom對象
08 事件中的event對象
? ? ? ? 事件中的event對象獲取方式有兩種情況:
? ? ? ? ? ? ? ? 1.在標簽上面綁定事件時 沒有形參 @事件名稱='驅動函數'
? ? ? ? ? ? ? ? ? ? ? ? 這個時候驅動函數的形參上面直接定義單個形參接收event對象
? ? ? ? ? ? ? ? 2.如果標簽上面綁定事件時有傳自定義參數 這個時候我們還想要使用event對象,那么
? ? ? ? ? ? ? ? ? ? 第一個實參必須是$event? ?后面是自己傳遞的參數
????
