vue基本語法01賦值、表示式、指令、修飾符、簡寫、過濾、監聽

@shirley發表於2020-10-08

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;
				}
			}

相關文章