解析vue.js中常用v-指令
Vue中 v-text on if for model bind show 的解釋 v-text
v-text:元素的InnerText屬性,必須是雙標(biāo)簽 跟{{ }}效果是一樣的 使用較少
注意: v-text 只能用在雙標(biāo)簽中
v-html:
元素的innerHTML
v-html 其實(shí)就是給元素的innerHTML賦值
v-on
其實(shí)v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown…
以下click為例
注意：所有的v-on都可以簡(jiǎn)寫為@，比如說v-click可以簡(jiǎn)寫為@click
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。通常來講就是監(jiān)聽dom觸發(fā)一些操作，這些操作（比如點(diǎn)擊）觸發(fā)后執(zhí)行的動(dòng)作（js）可有直接寫在后面
v-on:click="item+=1"
v-if
v-if : 判斷是否插入這個(gè)元素,相當(dāng)于對(duì)元素的銷毀和創(chuàng)建
v-for
v-for 使用方式 v-fo="(item,index) in data" index 索引 item索引數(shù)據(jù)
1.迭代普通數(shù)組
在data中定義普通數(shù)組
data:{
list:[1,2,3,4,5,6]
}
<p v-for="(item,i) in list">--索引值--{{i}} --每一項(xiàng)--{{item}}</p>
2.迭代對(duì)象數(shù)組
在data中定義對(duì)象數(shù)組
data:{
list:[1,2,3,4,5,6],
listObj:[
{id:1, name:'zs1'},
{id:2, name:'zs2'},
{id:3, name:'zs3'},
]
}
//在html中使用 v-for 指令渲染
<p v-for "(uesr,i) in listObj">
// id --{{user.id}}---name-->{{user.name}}
v-model
可以使用 v-model指令在 ( 標(biāo)簽有多種類型，如 button、select 等等)及 元素上進(jìn)行雙向數(shù)據(jù)綁定
v-model 會(huì)忽略所有表單元素的 value、checked 、 selected 特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data選項(xiàng)中聲明初始值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>vue</title>
</head>
<body>
<div id="app">
<input v-model="message">
<p>The input value is : {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Word!'
}
})
</script>
</body>
</html>
v-bind
用于動(dòng)態(tài)更新html上元素的屬性,如id class,href,src等等
縮寫：v-bind:href 縮寫為 :href
<a :href="{{url}}">aa</a>
下面是關(guān)于v-bind一些代碼演示 v-bind。
<style>
.active{
border: 1px solid red;
}
</style>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"伏地魔",
isActive:false
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
}
},
})
v-show
隱藏元素 如果確定要隱藏, 會(huì)給元素的style加上display:none。是基于css樣式的切換
v-bind與v-model的區(qū)別
有一些情況我們需要 v-bind 和 v-model 一起使用：
<input :value="name" v-model="body">
data.name 和 data.body，到底誰跟著誰變呢？甚至，它們會(huì)不會(huì)產(chǎn)生沖突呢？
實(shí)際上它們的關(guān)系和上面的闡述是一樣的，v-bind產(chǎn)生的效果不含有雙向綁定，所以 :value的效果就是讓input的value屬性值等于data.name的值，而v-model 的效果是使input和data.body建立雙向綁定，因此首先 data.body 的值會(huì)給input的value屬性，其次，當(dāng)input中輸入的值發(fā)生變化的時(shí)候，data.body 還會(huì)跟著改變。
上文提到過下面兩句是等價(jià)的：
<input v-model="message"> <input v-bind:value="message" v-on:input="message = $event.target.value" />
到此這篇關(guān)于Vue中的v-指令使用小結(jié)的文章就介紹到這了,更多相關(guān)Vue中v-指令使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時(shí)常常會(huì)遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說明
這篇文章主要介紹了Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決
這篇文章主要介紹了vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之router.push()，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程，可以向任意給定的導(dǎo)航守衛(wèi)傳遞next，但是next的使用過程容易出錯(cuò)，需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次2023-04-04
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,接下來就詳細(xì)的給大家介紹一下vue大文件視頻切片上傳的處理方法,需要的朋友可以參考下2023-08-08