vue基本語法01賦值、表示式、指令、修飾符、簡寫、過濾、監聽
vue基本語法01賦值、表示式、指令、修飾符、簡寫、過濾、監聽
一、vue賦值的三種方式
1、{{屬性名}}
<h2>{{data}}</h2>
2、v-html:能輸出原始碼資訊
<input v-model="name"/>
3、v-text:只能輸出文字資訊
<div v-text="sa" style="color: blue;"></div>
二、表示式
vue支援所有的js的方法各種表示式
字元:
<!-- 擷取字串 -->
{{str.substr(0,3).toUpperCase()}}<br />
數字
{{ number + 1 }}不能進行自動型別轉換<br />
三元運算子
{{ ok ? 'YES' : 'NO' }}<br />
字串拼接
<li v-bind:id="'list-' + id">我的Id是js動態生成的</li>
注:其中的變數在vue中宣告瞭的
三、指令
指令是指帶有“v-”字首的特殊屬性
核心指令:(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if
<div v-if="1==1">我是if</div>
v-else:上一個指令必須是v-if或者v-else if
<div v-else>我是v-else</div>
v-else-if:上一個指令必須是v-if
<div v-else-if="1==4">我是else if</div>
注意:在這些指令中只能識別變數,如果寫一個變數和一個字串比較,會自動識別字串為變數
v-show:當裡面的結果為false時,這個控制元件不會被顯示
<div v-show="false">asdasdsa1</div><br/>
v-for:類似JS的遍歷,遍歷陣列:
<div v-for="i in fore">
{{i}}
</div>
首先在vue例項中宣告fore陣列,即可,i為具體的物件
fore:['zs','ls','ww','yy','xx']
遍歷物件
首先宣告v物件陣列,其中v屬性值,k屬性名,i下標,要注意物件是先寫中括號
scores:[
{
cours:'語文',
score:'78'
},
{
cours:'數學',
score:'88'
},
{
cours:'英語',
score:'99'
},
]
<div v-for="v in scores">
<div v-for="(v,k,i) in v">
{{k}} :{{v}}
</div>
</div>
v-bind:用來繫結控制元件的屬性什麼的
v-on:用來繫結各種事件
v-model:也是用來繫結屬性等各種值;有一個特點就是,能自動更新對應的值
四、修飾符
有很多中修飾符,在這裡只是說明有修飾符這種,可以上官網上查詢對應的文件,每個修飾符都有它的特殊的作用
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點選一次 -->
<a v-on:click.once="doThis"></a>
還有按鍵修飾符,還可以查詢對應的數字呼叫即可
<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
Vue為最常用的按鍵提供了別名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<-- 全部的按鍵別名:
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta -->
五、監聽
watch:{
a:function(){
this.b=this.a*1000;
},
b:function(){
this.a=this.b/1000;
}
}
相關文章
- 【JavaWeb】EL表示式&過濾器&監聽器JavaWeb過濾器
- 正規表示式i修飾符(大小寫不敏感)
- 正規表示式模式修飾符模式
- 正規表示式 u 修飾符
- 正規表示式 m 修飾符
- Vue入門指南-04 事件機制和事件/按鍵修飾符和過濾器及監聽屬性(快速上手vue)Vue事件過濾器
- Vue過濾案例、按鍵修飾符、資料雙向繫結Vue
- Vue - 按鍵修飾符 && 系統修飾符Vue
- 正規表示式m修飾符(多行匹配)
- vue 事件修飾符Vue事件
- vue sync 修飾符Vue
- 程式語言語法:`=`表示賦值,`:`表示型別。賦值型別
- PHP正規表示式模式修飾符詳解PHP模式
- 第四講、Vue3.x中的事件方法詳解、事件監聽、方法傳值、事件物件、多事件處理程式、事件修飾符、按鍵修飾符Vue事件物件
- 正規表示式全域性匹配模式(g修飾符)模式
- 《前端》VUE學習(二)上(過濾器+鍵盤修飾符+自定義指令+鉤子函式+vue生命週期)--2020年5月25日前端Vue過濾器函式
- Vue事件修飾符詳解Vue事件
- c語言中const修飾符C語言
- 正規表示式的基本語法
- Vue的.sync修飾符的使用Vue
- 通過js正規表示式例項學習正規表示式基本語法JS
- Solidity語言學習筆記————19、函式可見性定義符、修飾符、保留字和語法Solid筆記函式
- GaussDB SQL基本語法示例-CASE表示式SQL
- Lambda表示式基本語法與應用
- Solidity語言學習筆記————20、函式修飾符Solid筆記函式
- 監聽器和過濾器過濾器
- Vue .sync修飾符與$emit(update:xxx)VueMIT
- vue 基礎入門筆記 08:鍵盤修飾符、自定義指令Vue筆記
- vue 基礎入門筆記 01:Vue 基本程式碼、插值表示式、v-on、v-bindVue筆記
- 【Vue】style和class 列表渲染 使用v-for進行迴圈 監控失效 雙向資料繫結 過濾案例 事件修飾符Vue事件
- Java 修飾符Java 修飾符
- java修飾符Java
- js正規表示式基本語法學習JS
- python70 前端框架之vue js的集中迴圈方式、key值的解釋、input事件、v-model雙向資料繫結、過濾案例、事件修飾符、按鍵修飾符、表單控制Python前端框架VueJS事件
- C++函式修飾符總結C++函式
- 03-修飾符-監聽屬性-傳送Ajax請求-生命週期鉤子
- Vue指令語法Vue
- vue scrollTop 無法賦值Vue賦值