vue文法學習總結

vue.js的指令都是以v-字首開頭的，而且必須寫在開始标簽中，作為标簽的屬性

指令的職責是，當表達式的值改變時，将其産生的連帶影響，響應式地作用于 DOM。

指定的文法

v-[:param][.sync][=value]

name:代表指令的名稱
	
	sync:代表的是系統修飾符
	
	value:代表的是資料的值
           

• v-if
• v-show
• v-else
• v-else-if
• v-for
• v-bind
• v-on
• v-on和v-bind的縮寫
• v-text和v-html插值操作
• v-model

v-if指令

v-if是條件渲染的指令,它根據表達式的真假來删除和插入元素。

eg:
	<div>
		<p v-if="yes">hello world<p>
		// v-if 指令将根據表達式yes的值的真假來添加或移除p元素
	</div>
           

v-show指令

v-show也是條件渲染指令，作用和v-if一樣都可以控制dom元素的隐藏和現實，但是和v-if指令不同的是，

使用v-show指令的元素始終會被渲染到HTML，它隻是簡單地為元素設定CSS的style屬性，即為該元素添加一個樣式display:none;

而元素的還在，而當元素本身就有display:none時，此時v-show将不會起作用，通俗的說當某個元素本來就隐藏的話，

即使他JavaScript表達式為true時他也不會顯示出來，原因就是v-show生成的style屬性不會覆寫之前的也不會修改元素本身自帶的。

v-else指令

v-else指令通常和v-if、v-else-if一起使用的,它用來表示"else"部分

<div>
		<p v-if="Math.random()>0.5">今天天氣真不錯</p>
		<p v-else>今天天氣真糟糕</p>
	</div>	
           

v-else-if指令

v-else-if指令通常和v-if、v-else一起使用,它用來表示"else if"部分

<div>
		<p v-if="score>90">優秀</p>
		<p v-else-if="score>80">良好</p>
		<p v-else-if="score>60">及格</p>
		<p v-else>不及格</p>
	</div>

           

v-for指令

v-for指令基于一個數組渲染一個清單。v-for指令通常需要(item,index) in items這種文法，用來周遊出數組中的每一個元素，items為源數組，item為周遊出數組元素的統稱

html代碼

<div id="app">
	 <p v-for="(x,index) in 9">
		{{x}}
	 </p>
	</div>
           

注意: x 預設從1開始的,而每個元素的索引則是從0開始的

js代碼

<script type="text/javascript">
			new Vue({
				el:'#app',
			})
		</script>
           

v-bind指令

操作元素的class清單或者内聯樣式

html代碼

<div>
		<p v-bind:class="{{open:is_open}}"></p>
	</div>
           

data:{
		is_blue:true
	}

           

v-on指令

用來監聽DOM事件，觸發時運作一些JavaScript代碼。如果事件的邏輯複雜時，通常把JavaScript代碼寫一個函數裡，v-on接收需要調用函數的名稱

html代碼

<div id="app">
		<button v-on:click="count++">
		您點選了{{count}}
		</button>
	</div>
           

js代碼

new Vue({
		el:'#app',
		data:{
			count:0
		}
	})
           

v-bind和v-on的縮寫

v-bind通常縮寫為 :+class名(style名)

代碼

<div>
			<p v-bind:class="{{open:is_open}}"></p>
		</div>
		
		// v-bind縮寫
		
		<div>
			<p :class="{{open:is_open}}"></p>
		</div>
		
		//v-on 縮寫
		<div>
			<p @click="count++"></p>
		</div>
           

v-on通常縮寫為 @+事件名

v-text和v-html

• v-text 和 {{}} 渲染出來内容

  v-text用于渲染普通文本

  1.在元素開始标簽上面添加v-text,如果标簽體裡面有内容的話則會覆寫掉标簽體原本的内容,隻顯示v-text渲染的文本

html代碼

<div id="app">
		<span v-text="msg"></span>
		<span>{{msg}}</span>
	</div>		
           

js代碼

<script>
			new Vue({
				el:'#app',
				data:{
					mesg:'hello'
				}
			})
		</script>

           

注意:如果标簽體内本來就有内容的話 v-text渲染的内容則會覆寫原來标簽體内的内容

• v-html

  v-html會将元素當成HTML标簽解析出來後再輸出，如果标簽體裡面有内容的話則會覆寫掉标簽體原本的内容

html代碼

<div id="app">
		<p v-text="msg"></p>
		<p>{{msg}}</p>
	</div>		
           

js代碼

<script>
			new Vue({
				el:'#app',
				data:{
					mesg:'<span>hello</span>'
				}
			})
		</script>

           

兩者的差別: v-text和{{}} 表達式渲染資料,不會解析标簽 v-html不僅可以渲染資料，而且可以解析标簽

v-model

• v-model實作标簽資料的雙向綁定的，通常使用到表單元素，如。v-bind隻能進行單向綁定

v-model="text" 
		等價于：  v-bind:value="text", v-on:input="text=$event.target.value"
	v-bind:value="text"  	
			簡寫：    :value
	v-on:input="text=$event.target.value"  
			簡寫 ：@input="text=$event.target.value"
           

html代碼

<div id="app">
			<input type="text" v-model="text">
			<span>{{text}}</span>			
		</div>
           

js代碼

<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				text:'',
			}
		})
	</script>