Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
一、Vue的數(shù)據(jù)綁定
1. 單向數(shù)據(jù)綁定：將Model綁定到View上，當通過JavaScript代碼改變了Model時，View就會自動刷新。不需要進行額外的DOM操作就可以實現(xiàn)視圖和模型的聯(lián)動
? a. 數(shù)據(jù)只保存一份
? b. data—->DOM
? （1）插值表達式：{{ 表達式 }}，將表達式的值在View中顯示出來
? （2）v-bind：將標簽的屬性綁定到指定的變量上。簡寫方式： 屬性名=“變量名”
2. 雙向數(shù)據(jù)綁定：是Vue的核心特征之一。將Model綁定到View上，同時將View和Model進行綁定。即當Model的數(shù)據(jù)發(fā)生改變時，View會自動更新；當View的數(shù)據(jù)發(fā)生改變時，Model的數(shù)據(jù)也會更新。
強調(diào)：在Vue中只有表單元素才能實現(xiàn)雙向綁定（input、textarea、select），實現(xiàn)指令是v-model
? （1）文本框(text’的綁定：和普通的變量進行綁定
? （2）復選框(checkbox)的綁定：綁定的變量必須是數(shù)組
? （3）單選框(radio)的綁定：綁定普通的變量
? （4）下拉列表(select)的綁定：當下拉列表為單選時，綁定的變量為普通變量；當下拉列表為多選時，綁定的變量自動轉(zhuǎn)換為數(shù)組
3. 值綁定的時機（數(shù)據(jù)同步的時機）：v-model指令可以實現(xiàn)Model和View的數(shù)據(jù)同步
? （1）.lazy（懶加載）：在input失去焦點或按下回車鍵時才進行更新
<label>
用戶名：<input type="text" v-model.lazy="userName">
</label>（2）.number：將輸入的數(shù)據(jù)轉(zhuǎn)換成Number類型。在input中輸入的雖然是數(shù)字，但實際是string，為了將字符串轉(zhuǎn)換為數(shù)字，加上該修飾符實現(xiàn)自動轉(zhuǎn)換
<label>
年齡：<input type="number" v-model.number="userAge">
</label>
<p>年齡：{{userAge}},數(shù)據(jù)類型：{{typeof(userAge)}}</p>（3）.trim：會自動過濾掉輸入的首尾空格
<label> 用戶名：<input type="text" v-model.trim="userName"> </label>
二、Vue的事件綁定
通過v-on指令綁定，v-on：原生的事件名(@原生事件名)
1. 方法處理器方式：v-on：原生事件名 = 函數(shù)名
<script src="../js/vue.js"></script>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- <button @click="changeMsg">修改</button> -->
<button v-on:click="changeMsg()">修改</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Hello World!'
},
methods:{
changeMsg(){
this.msg='曲江池'
}
}
})
</script>
</body>2. 內(nèi)聯(lián)語句處理器方式：本質(zhì)是內(nèi)聯(lián)了javascript語句
<script src="../js/vue.js"></script>
<body>
<div id="app">
<p>{{msg}}</p>
<button v-on:click="changeMsg('大雁塔')">修改</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Hello World!'
},
methods:{
changeMsg(info){
this.msg=info
}
}
})
</script>
</body>3. 在內(nèi)聯(lián)語句中訪問原生的DOM事件
<script src="../js/vue.js"></script>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- <button v-on:click="changeMsg('大雁塔')">修改</button> -->
<br><br>
<a rel="external nofollow" v-on:click="say($event)">百度一下</a>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Hello World!'
},
methods:{
changeMsg(){
this.msg='曲江池'
},
// say(event){
// event.preventDefault()
// },
say:function(event){
event.preventDefault()
}
}
})
</script>
</body>4. 事件綁定中的修飾符
? （1）.prevent：調(diào)用preventDefault()。阻止鏈接打開URL
<a rel="external nofollow" v-on:click.prevent>bilibili</a>
（2）.stop：調(diào)用stopPropagation()。阻止事件傳播（阻止事件冒泡）
?（3）鍵值修飾符：在監(jiān)聽鍵盤事件時，需要知道鍵的keyCode，記憶不方便，可以通過修飾符來記錄鍵值
? enter、tab、delete、esc、space、up、down、left、right
<script src="../js/vue.js"></script>
<body>
<div id="app">
<button v-on:keyup.up="say">提交</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'鍵盤修飾符',
},
methods:{
say(){
alert(this.msg)
}
}
})
</script>
</body>三、Class和Style的綁定
1. 對象語法：給v-bind:class傳遞一個對象，來動態(tài)地改變class屬性值
<script src="../js/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
.class1 {
background-color: #ff0;
}
.class2 {
background-color: #f00;
}
</style>
<body>
<div id="app" v-bind:class="colorName" v-on:click="changeColor"></div>
<script>
const vm = new Vue({
el: '#app',
data:{
colorName:{
class1:true,
class2:false
}
},
methods: {
changeColor() {
this.colorName.class1 = !this.colorName.class1
this.colorName.class2 = !this.colorName.class2
}
}
})
</script>
</body>2. 數(shù)組語法：可以把一個數(shù)組傳給v-bind:class，以應用一個class列表
<script src="../js/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
.class1 {
background-color: #ff0;
}
.class2 {
background-color: #f00;
}
</style>
<body>
<div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor"></div>
<script>
const vm = new Vue({
el: '#app',
data: {
c1: 'class1',
c2: '',
},
methods: {
changeColor() {
this.c1 = (this.c1 == '' ? 'class1' : '')
this.c2 = (this.c2 == '' ? 'class2' : '')
}
}
})
</script>
</body>3. 內(nèi)聯(lián)樣式綁定：直接綁定style（v-bind:style)
（1）對象表示法
<script src="../js/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
.class1 {
background-color: #ff0;
}
.class2 {
background-color: #f00;
}
</style>
<body>
<div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor">
<div v-bind:style="{color:fontColor,fontSize:mySize}">白樺林</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
c1: 'class1',
c2: '',
fontColor:'blue',
mySize:'18px'
},
methods: {
changeColor() {
this.c1 = (this.c1 == '' ? 'class1' : '')
this.c2 = (this.c2 == '' ? 'class2' : '')
}
}
})
</script>
</body>（2）數(shù)組表示法
<script src="../js/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
}
.class1 {
background-color: #ff0;
}
.class2 {
background-color: #f00;
}
</style>
<body>
<div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor">
<div v-bind:style="[colorStyle,fontStyle]">白樺林</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
c1: 'class1',
c2: '',
colorStyle:{color:'red'},
fontStyle:{fontSize:'32px'}
},
methods: {
changeColor() {
this.c1 = (this.c1 == '' ? 'class1' : '')
this.c2 = (this.c2 == '' ? 'class2' : '')
}
}
})
</script>
</body>到此這篇關于Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解的文章就介紹到這了,更多相關Vue數(shù)據(jù)與事件綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2023-04-04
今天小編就為大家分享一篇Vue-component全局注冊實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue + AnimeJS實現(xiàn)3d輪播圖的詳細代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實現(xiàn)3d輪播圖,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
前幾天朋友在做vue項目開發(fā)時，有人反映?IOS?上面的滑動點擊有點問題，讓我們來幫忙解決，于是我就重寫了代碼，下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺，需要的朋友參考下吧2018-03-03
最近在學習Vue,感覺methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關于3分鐘迅速學會Vue中methods方法使用技巧的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗功能
這篇文章主要介紹了vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術實現(xiàn)全屏功能的封裝,讓不同技術棧的同學都可以輕松掌握,好了,讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
前端開發(fā)的時候,在項目中引入組件以及使用是非常常見操作,下面這篇文章主要給大家介紹了關于Vue全局提示組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
Element中el-select下拉框?qū)崿F(xiàn)選中圖標并回顯圖標
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標并回顯圖標，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-12-12