vue.js框架 2（模板語法）

原創

2020-06-23 04:42

vue.js框架

1、v-指令

v-	解釋
v-model	雙向綁定，即其中一方改變值，另一方也隨之改變
v-bind:	(綁定元素)其中一種寫法，v-bind可以簡寫爲：,v-bind:會把=後面的當js代碼處理
v-on	綁定事件，v-on可以簡寫爲@
v-html	渲染html代碼
v-cloak	可以設置樣式，這些樣式會在 Vue 實例編譯結束時，從綁定的 HTML 元素上被移除。
v-text	和v-cloak差不多可以解決閃爍問題，功能和{{ }} 一致
v-for	迭代
v-if	重新創建或刪除元素
v-show	切換元素的display：none樣式
…	…

v-html 例：使用 v-html 指令用於輸出 html 代碼：

<body>
<script src="vue.min.js"></script>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>v-html輸出的標籤</h1>'
  }
})
</script>
</body>

v-bind:class例：以下實例判斷 use 的值，如果爲 true 使用 class1 類的樣式，否則不使用該類：

<body>
<script src="vue.min.js"></script>

<div id="app">
  <label>修改顏色</label>
  <input type="checkbox" v-model="use">
  <br>
  <div v-bind:class="{'class1': use}">看我的顏色</div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

v-cloak例：當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。

<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<p v-cloak>{{ message }}</p>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					message: '你好vue.js!'
				}
			})
		</script>
	</body>