宣告式渲染

 Vue.js的核心是一個允許採用的簡潔的模板語法來宣告式地將資料渲染進DOM的系統：

1.文字插值

<div id="app">
		<p>{{message}}</p>
	</div>
	<script>
		const app=new Vue({
			el:"#app",
			data:{
				message:"hello vue.js"
			}
		});
	</script>

頁面顯示hello vue.js

說明：採用雙括號進行引用，表示是vue裡的message的值；

          el中的值與div中的id是對應的；

2.繫結元素v-bind

<div id="app-2">
		<span v-bind:title="message">
			滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
		</span>
	</div>
	
	<script>
		const app=new Vue({
			el:"#app-2",
			data:{
				message:"頁面加載於"+new Date().toLocaleString()
			}
		});
	</script>

說明：v-bind被稱為指令，指令帶有字首v-，以表示是vue提供的特殊屬性；

          這裡具體表示將這個元素節點的title特性和vue例項的message屬性保持一致；

3.條件與迴圈v-if，v-for

<div id="app-3">
		<p v-if="seen">現在你看見我了</p>
	</div>
	
	<script>
		const app3=new Vue({
			el:"#app-3",
			data:{
				seen:true
			}
		});
	</script>

<div id="app-4">
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>
	
	<script>
		const app4=new Vue({
			el:"#app-4",
			data:{
				todos:[
				{text:"學習Javascript"},
				{text:"學習Vue"},
				{text:"做個專案"}
				]
			}
		});
	</script>
 

4.事件監聽器v-on

<div id="app-5">
		<p>
			{{message}}
		</p>
		<button v-on:click="reverseMessage">
			逆轉訊息
		</button>
	</div>
	
	<script>
		const app=new Vue({
			el:"#app-5",
			data:{
				message:"hello vue"
			},
			methods:{
				reverseMessage:function(){
					this.message=this.message.split('').reverse().join('')
				}
			}
		});
	</script>

5.雙向繫結 v-model

<div id="app-6">
		<p>{{message}}</p>
		<input v-model="message">
	</div>
	<script>
		const app=new Vue({
			el:"#app-6",
			data:{
				message:"hello vue"
			}
		});
	</script>