Vue基礎之Vue的模板語法

時間 2020-12-08

標籤 javascript css html vue java app dom ide 函數欄目 JavaScript 简体版

原文原文鏈接

Vue基礎之Vue的模板語法

數據綁定

01 數據綁定最多見的形式就是使用插值表達式（兩個大括號!）【也就是小鬍子語法！mustache】

<body>
	<!-- Vue.js的應用能夠分爲兩個重要的組成部分
	一個是視圖!
	另外一個是腳本!！ -->
	<!-- 下面的就是視圖！ -->
	<div id="app">
		<h1>{{message}}</h1>
	</div>
	<!-- 下面的就是腳本！ -->
	<script type="text/javascript">
	// 
		
	var app = new Vue({
		
		el:'#app', // 這個就是你要操做的元素！
		data: {
			message: 'lvhang'
		} // data用於保存數據！插值表達式！咱們在視圖中聲明瞭那些變量， 就須要在data中註冊同名的變量，而且對變量進行賦值！
		
	}) 
	</script>

</body>

02 經過便用v-once指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留這會影響到該節點上的其它數據綁定：

<body>
		<div id="app">
			<h1 v-once>{{message}}</h1>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang!'
				}
			})
			app.message = 'lvchengcxin'
		</script>
	</body>

如何輸出原始的HTML

v-html

<body>
		<div id="app">
			未加v-html屬性！
			<div id="">
				<h2>{{message}}</h2>
			</div>
			加上v-html屬性！
			<div id="">
							<h2 v-html="message"></h2>
						</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: '<h2 style="color: red;">lvchengxin</h2>'
				}
			})
		</script>
	</body>

使用Vue的語法爲HTML綁定屬性！

v-bind

<body>
		<div id="app">
			<!-- 這樣就能夠爲某一個元素動態的綁定屬性了!！ -->
			<div id="" v-bind:class="dynamicId">
				v-bind:某一個標籤具備的屬性="某一個變量的值"
				栗子：
				v-bind:class"dynamicId" 就是爲當前的標籤綁定一個class屬性！
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang',
					dynamicId: 'app2'
				}
			})
		</script>
		<style type="text/css">
			/* 咱們在爲你上面綁定的元素添加一個樣式! */
			.app2 {
				color: red;
			}
		</style>
	</body>

在模板語法中使用JavaScript表達式

01 變量的算術運算！

<body>
		<div id="app">
			<p>{{number1 + 10}} 結果爲11</p>
			<p>{{ ok ? 'YES' : 'NO' }} 
			<br />三元表達式的判斷! ok 是一個變量  類型是 布爾類型！要在data裏面進行定義!
			</p>

			<p>進行復雜的函數運算！<br />b
			在Vue的表達式中能夠徹底支持JavaScript的表達式!<br />			{{ message.split('').reverse().join('') }}</p>

			<div v-bind:id="'list-' + id"></div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang',
					dynamicId: 'app2',
					number1: 1,
					ok: 3 < 2,
					message: 'lvhang'
				}
			})
		</script>

	</body>

指令

指令（Directives）是帶有v-前綴的特殊特性。指令特性的值預期是單個JavaScript表達式指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM

指令的參數!

一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML attribute：

指令的修飾符！

修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

<body>
<div id="app">
	<!-- 指令（Directives）是帶有v-前綴的特殊特性。指令特性的值預期是單個JavaScript表達式 -->
	<!-- （v-for是例外狀況，稍後咱們再討論），指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM，回顧咱們在介紹中看到的例子： -->
	<!-- 這裏，v-if指令將根據表達式seen的值的真假來插入移除<p>元素. -->
	<p v-if="seen">如今你看到我了</p>
	<!-- 一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML attribute： -->
	<a v-bind:href="url">...</a>
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : false,
		url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
	},
	methods:{
		click1 : function () {
			console.log('click1......');
		},
		click2 : function () {
			console.log('click2......');
		}
	}
});
</script>
<style type="text/css">

</style>
</body>