Vue庫的使用


1.在頁面引入vue.js文件庫地址
Vue和React:不允許直接操作dom節點,所有的dom節點都為:虛擬dom
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
一般下載到本地修改為vue.min.js引入
2.實例化
var vm=new Vue{
el:'dom對象',
data:{
屬性:'值'
}                          }

實例掛載dom對象
特性:所有vue實例對象方法或屬性,都必須用$符號 或者方法el也可以
vm.$amount('')

new Vue({}).$mount('選擇器')
3.作用域

-全局
-子樹
-組件
-實例

4.數據綁定

vue指令
指令名:v-
實例化的屬性:model
vm層:頁面view可視化+data數據
雙向綁定:v-model

修飾符 .
v-model增強指令修飾.+功能

v-model.lazy
.lazy:實現oninput事件切換onchange 懶監聽事件

v-model.trim
.trim:自動過濾輸入內容最開始和最后的 空格,中間的會保留一個空格,多的會被過濾掉

number修飾符數字類型:v-model.number

值綁定語法
innerText指令:v- 文字內容綁定text
v-text=""

運算:三目、&&、|| 得到是一個值

5.循環
v-for循環:遍歷指令
遍歷數組對象
用數組對象屬性得到屬性值
采用數組的for...in=>for(let item in list)
v-for="item in list"

if {}else if {}else{}需要符合條件,否則不會渲染

v-if=""
v-else-if=""
v-else=""

v-show:顯示與否指令
通過display控制元素是否展示

v-show=""

if和show區別
根據業務不同,使用不同命令;
如果數據變化比較頻繁使用v-show,否則使用v-if


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM