2. 程式人生 > >Vue.js常用指令介紹跟舉例應用

Vue.js常用指令介紹跟舉例應用

阿新 • • 發佈：2018-11-01

什麼是vue.js指令？
指令是帶有v-字首的特殊屬性。
vue.js指令的用途？
在表示式的值改變時，將某些行為應用到DOM上。
官方文件：https://cn.vuejs.org/v2/api/#指令

指令介紹
v-show：控制一個元素的display屬性顯示或者隱藏
v-on：為html元素繫結事件監聽
v-model：將使用者的輸入同步到檢視上,用在checkbox上時true為選擇，false為取消選擇，必須繫結到表單上
v-for：遍歷data中資料，並在頁面進行資料顯示
v-bind：繫結HTML元素的屬性
v-text： 更新元素的textContent
v-if：根據表示式結果控制一個元素顯示或者移除
v-else：為 v-if 或者 v-else-if 新增“else 塊”
v-cloak：保持在元素上直到關聯例項結束編譯。防止介面出現{{}}等問題
v-pre：不編譯這個元素和它的子元素，加快整體編譯速度
v-once：只編譯一次
v-html： 只顯示v-html繫結的元素

舉例應用
v-show
語法： v-show = ‘表示式’

  1. 根據表示式結果的真假，確定是否顯示當前元素
  2. true表示顯示該元素；false表示隱藏該元素；
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div" v-show='false' style="width: 100px;height: 100px;background-color: gold;"></div>
		<div id="div2" v-show='true' style="width: 100px;height: 100px;background-color: red;"></div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div
	});
	var vm2 = new Vue({
		el:div2
	});
</script>

v-on
語法： v-on:事件名稱= ‘’函式名稱()’
簡寫： @事件名稱= ‘’函式名稱()’
注： 函式定義在methods配置專案中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<div  v-show='bol' style="width: 100px;height: 100px;background-color: gold;"></div>		
				<button v-on:click='fn()'>v-on</button>
				<button @click='fn()'>v-on</button>
			<h1>{{ bol }}</h1>
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div,
		data:{
			bol:'true'
		},
		methods:{
			fn: function (){
				this.bol = !this.bol
			}
		}
	});		
</script>

v-model
語法：v-model = ‘變數’
注：v-model指令必須繫結在表單元素上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<input type="text" v-model='msg'/>
			<h1>{{ msg }}</h1>
			<input type="checkbox" v-model='bol1'/>{{ bol1 }}
			<input type="checkbox" v-model='bol2'/>{{ bol2 }}	
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:div,
		data:{
			msg:'leition',
			bol1:true,
			bol2:false
		}
	});		
</script>

v-for
語法： v-for =’ (值，鍵) in 陣列’

  1. 值表示每次遍歷得到的元素
  2. 鍵表示值的索引，可選引數
  3. 無需鍵的時候語法為 v-for =‘值 in 陣列’
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<ul>
				<li v-for='(v,k) in arr'>{{ k +'---'}}{{ v }}</li>
				<li v-for='v, in arr'>{{ v }}</li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#div',
		data: {
			arr: ['a','b','c']
		}
	})
</script>

v-bind
語法： v-bind:屬性名 = ‘表示式’

  1. 繫結一個屬性：<img v-bind:src=‘myUrl’ /》
  2. 繫結多個屬性：<img v-bind:src=’{src:myUrl,title:msg}’ /》
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.bgcolor{
				background-color: red;
			}
			.textcolor{
				color: orange;
			}
		</style>
	</head>
	<body>
		<div id="div">
		<!--單個樣式，為真則使用red樣式,為假則不使用--> 
			<button v-bind:class = '{bgcolor: true}'>button</button>
			<button v-bind:class = '{bgcolor: flase}'>button</button>
		<!--多個樣式，為真則使用red樣式,為假則不使用--> 
			<button v-bind:class = '{bgcolor: true,textcolor:true}'>button</button>
			<button v-bind:class = '{bgcolor: flase,textcolor:true}'>button</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#div',		
	})
</script>

v-text
語法：v-text = ‘變數’

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<p v-text='msg'></p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天氣不錯喲'
		}
	})
</script>

v-if
語法 v-if = ‘表示式’

  1. 表示式結果為true，表示顯示這個元素
  2. 表示式結果為false，表示移除這個元素
<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-if = true>今天天氣不錯</p>
			<p v-if = false>今天天氣不錯</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
</script>

v-else和v-else-if
語法 v-else = ‘表示式’

  1. 前一兄弟元素必須有 v-if 或 v-else-if
  2. 為 v-if 或者 v-else-if 新增“else 塊”/“else if塊”
<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-if = false>今天天氣不錯</p>
			<p v-else = true>今天有暴雨</p>
		</div>
		<div id="div2">
			<p v-if = false>今天天氣不錯</p>
			<p v-else-if = true>今天有雪</p>
			<p v-else = true>今天有暴雨</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
	var vm2 = new Vue({
		el:'#div2'
	})
</script>

v-cloak
不需要表示式,直接新增在容器上。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div" v-cloak>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div'
	})
</script>

v-pre
不需要表示式,跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-pre>{{ msg }}</p>
			<p>{{ msg }}</p>
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天氣不錯喲'
		}
	})
</script>

v-once
不需要表示式，只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-once>{{ msg }}</p>
			<p>{{ msg }}</p>
			<input type="text" v-model="msg">
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天氣不錯喲'
		}
	})
</script>

v-html
語法：v-html = ‘元素’
更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用元件來替代。

<html>
	<head>
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<div id="div">
			<p v-html="msg">{{ msg }}msg</p>
			<p>{{ msg }}msg</p>
			<input type="text" v-model="msg">
		</div>		
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#div',
		data:{
			msg:'今天天氣不錯喲'
		}
	})
</script>

指令練習地址：https://blog.csdn.net/qq_39383675/article/category/8256374

相關推薦

Vue.js常用指令介紹跟舉例應用

什麼是vue.js指令？ 指令是帶有v-字首的特殊屬性。 vue.js指令的用途？ 在表示式的值改變時，將某些行為應用到DOM上。 官方文件：https://cn.vuejs.org/v2/api/#指令 指令介紹 v-show：控制一個元素的display屬性顯示或者隱藏 v-on：為

Vue.js常用指令匯總（v-if//v-show//v-else//v-for//v-bind//v-on等）

ont ner 技術分享 數組 div 區別 art space alt 有時候指令太多會造成記錯、記混的問題，所以本文在記憶的時候會采用穿插記憶的方式，交叉比對，不易出錯。 本文主要講了一下六個指令： v-if//v-show//v-else//v-for//v-bi

Vue.js常用指令：v-for

一、什麼是v-for指令 在Vue.js中，我們可以使用v-for指令基於源資料重複渲染元素。也就是說可以使用v-for指令實現遍歷功能，包括遍歷陣列、物件、陣列物件等。 二、遍歷陣列 程式碼示例如下： <!DOCTYPE html> <html lang="en"> &

Vue.js常用指令：v-show和v-if

一、v-show指令 v-show指令可以用來動態的控制DOM元素的顯示或隱藏。v-show後面跟的是判斷條件，語法如下： v-show="判斷變數"  例如： v-show="true"，表示顯示DOM元素。 v-show="false"， 表示隱藏DOM元素。 看下面的示

Vue.js常用指令：v-on

一、v-on指令 v-on指令在Vue.js中用來處理對應的事件。用法： v-on:事件型別="函式體" 例如：點選按鈕的時候執行play事件 <button v-on:click="play">點選事件</button> 注意： 在使用v-on指令繫

Vue - vue.js 常用指令

Vue - vue.js 常用指令 目錄:　 一. vuejs模板語法之常用指令　 　　1. 常用指令: v-html 　　2. 常用指令: v-text 　　3. 常用指令: v-for 　　4. 常用指令: v-if 　　5. 常用指令: v-show 　　6. v-if和v-show的效

Vue.js常用指令彙總（v-if、v-for等）

有時候指令太多會造成記錯、記混的問題，所以本文在記憶的時候會採用穿插記憶的方式，交叉比對，不易出錯。 本文主要講了一下六個指令： v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 條件渲染指令，根據其

Vue.js——常用的指令

ack scrip ems src special 一個 分享圖片 spa 視圖 1、v-on：指令監聽DOM事件，並在觸發時運行一些javaScript代碼。 <div id=‘myView‘> <img src="img/se.png" v-

Vue.js 模板指令

methods -o style ems 元素 隱藏 div 更新 ext 1. 數據渲染：v-text、v-html（保存了html結構）、{{}}（自動更新）； 2. 控制模塊隱藏：v-if：直接不渲染 DOM 元素； v

86 vue.js常用屬性

主要內容:https://pizzali.github.io/B%A4/ 1 vue.js的使用方式及文字插值 <div id="app">{{ greeting }}</div> <script> new Vue({ el: "#

vue.js v-if 在a標籤應用

a標籤新開啟頁面時加上target="_blank"  寫在href前面  '    <a v-if="item.type === 1 && item.parentId === 0 && item.name

Vue.js 常用外掛

better-scroll:移動端非常好用的滾動元件 npm install --save better-scroll axios:Vue官方推薦網路請求框架 npm install axios fastclick：解決移動端的點選延遲問題 npm install fastclick -

Vue.js中ref ($refs)用法舉例總結

原文地址：http://www.cnblogs.com/xueweijie/p/6907676.html   <div id="app"> <input type="text" ref="input1"/> <button @click

IPFS （二）常用指令介紹1

1、基本命令 命令 介紹 add 新增一個檔案到IPFS cat 預覽檔案內容在控制檯 get

Vue.js(三) 指令(Directive)

一： 指令(Directive): 是Vue對HTML標籤新增加的、拓展的屬性(也稱之為特性), 這些屬性不屬於標準的html屬性，只有Vue認為是有效的，能夠處理它。 指令的職責是當表示式的值改變時，將其產生的連帶影響，響應式(Reactive)地作用於 DOM

ES6常用功能介紹及舉例說明

雖然ES6規範不是最近才釋出，但我認為很多開發人員仍然不太熟悉。 主要原因是在規範釋出之後，Web瀏覽器的支援可能很差。 目前，規範釋出已經超過2年了，現在很多瀏覽器對ES6支援良好。 即使您（或您的客戶）不使用最新版本的Web瀏覽器，也可以使用轉換器（如Babel），在應用程式的構建過程中

Vue.js——v-指令詳解，component元件

其實，2016年至今，Vue發展逐漸佔據主體，其“vue”為法語名，實則中文名為“view”，它主要是基於“MVVM”進行設計並開發的。 M——Model        模型，用於資料儲存 V——Vi

【RSLogix5000】—（2.1）—RSLogix5000常用指令介紹——原理

這幾天腰疼哇，不知道是不是在廠房配電室地板睡覺睡的。。。。。當然，也有可能是。。。。。嘎嘎。。。。 今天主要介紹那些基本的指令吧，具體軟體的應用我也在熟悉中，還有如果有RSLogix5000（20.01版本）、RSLinx等軟體不能授權的可以私密我，我把我的那個破解授權的東東給你啊。。。 一、位指令 X

vue.js常用的傳值方式：父傳子，子傳父

引用官網的一句話：父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息 1.父元件像子元件進行傳值 父元件： <template> <div class="hello

Linux作業系統安裝與常用指令介紹

Linux最初是由芬蘭赫爾辛基大學學生Linus Torvalds由於自己不滿意教學中使用的MINIX作業系統，所以在1990年底由於個人愛好設計出了LINUX系統核心。後來釋出於芬蘭最大的ftp伺服器上，使用者可以免費下載，所以它的周邊的程式越來越多，Linux本身也逐漸發展壯大起來，之後Linux在不到三