Vue JS 自學筆記
2020-09-15 22:27:06 企業開發
var app = new Vue({
el:'#app',
methods:{
dolt:function(){
//邏輯
}
}
})
補充：
傳遞自定義引數，事件修飾符
<div id="app">
<input type="button" @click="doIt(p1,p2)"/>
<input type="text" @click.enter="sayHi"/>
</div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
- 事件系結胡方法寫成函式呼叫的形式，可以傳入自定義引數
- 定義方法時需要定義形參來接收傳入的實參
- 事件的后面跟上
.修飾符可以對事件進行限制
.enter可以限制觸發的按鍵為回車
4. v-show
v-show指令的作用是:根據真偽切換元素的顯示狀態- 原理是修改元素的
display,實作顯示隱藏
- 指令后面的內容，最終都會決議為布林值
- 值為
true元素顯示，值為false元素隱藏
- 資料改變之后，對應元素的顯示狀態會同步更新
<div id="app">
<img src=https://www.cnblogs.com/ingram03/p/"地址" v-show="true">
var app = new Vue({
el:"#app",
isShow:false,
age:16
})
5. v-if
根據表達值的真偽，切換元素的顯示和隱藏(操縱dom元素)
v-if指令的作用是：根據運算式的真偽切換元素的顯示狀態- 本質是通過操縱
dom元素來切換顯示狀態
- 運算式的值為
true,元素存在于dom樹中，為false，從dom樹中移除
- 頻繁的切換使用
v-show,反之使用v-if,前者的切換消耗小
<div id="app">
<p v-if="true">我是一個P標簽</p>
<p v-if="isShow">我是一個P標簽</p>
<p v-if="運算式">我是一個P標簽</p>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
7. v-bind
設定元素的屬性(比如:src,title,class)
v-bind指令的作用是：為元素系結屬性- 完整的寫法是
v-bind:屬性名
- 簡寫的話可以直接省略
v-bind,只保留:屬性名
- 需要動態的增刪
class建議使用物件的方式
<div id="app">
<img v-bind:src=https://www.cnblogs.com/ingram03/p/"imageSrc">
![]()
![]()
8. v-for
根據資料生成串列結構
v-for指令的作用是：根據資料生成串列結構- 陣列經常和
v-for結合使用
- 語法是
(item,index) in 資料
item和index可以結合其他指令一起使用- 陣列長度的更新會同步到頁面上，是回應式的
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{ item }}
</li>
<li v-for="(item,index) in objArr">
{{ item.name }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
9. v-model
獲取和設定表單元素的值(雙向資料系結)
v-model指令的作用是便捷的設定和獲取表單元素的值- 系結的資料會和表單元素值相關聯
- 系結的資料 表單元素的值
<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data:{
message:"programmer"
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/50557.html
標籤：JavaScript
上一篇：Proxy使用詳解
下一篇：彈性盒模型
