技術標籤：vue學習vuejavascripthtmljs

1. vue.js特點

使用一個簡潔的語法模板將資料渲染進DOM系統

• 例項化vue物件，將資料掛載到DOM元素上
• v-if 等將vue例項與DOM結構繫結（具體表現形式為顯示/不顯示）
• v-bind 將元素屬性與vue例項繫結

1	v-bind:title="name"		//對dom元素的title值進行繫結，name為vue物件的data中的資料
2	v-on:click="reverse"	//點選即觸發方法，reverse為vue物件的methods中的方法
3	v-if="show"
 
				//控制dom元素的顯示與否，show為vue物件的data中的資料
4	v-for="item in items"	//在dom結構中遍歷顯示元素，items為vue物件的data中的陣列

2. 元件化應用構建

• 例項化vue物件

var app = new Vue({
el:"#app",
data:{
foods:[
		{id:1,name:"apple"},
		{id:2,name:"banana"},
		{id:3,name:"meats"}
]}})

• 建立元件

1	<script>
 

		Vue.component("item-li",{
		props:["item"],
		template:"<li>item.name</li>"})
	</script>

• 在DOM結構中將元件和vue例項進行繫結（依靠props屬性）

<div id="app">
	<ol>
		<item-li 
				 v-for="food in foods"
				 v-bind:item="food">
 
  //將vue物件與props屬性繫結
		</item-li>
    </ol>
</div>

總結

• 元件化構建看似複雜，但隨著dom結構的複雜度增加，元件化可大大減少html程式碼的數量和複雜度。
• 其次，元件化將dom結構和JavaScript聯結起來，所需要渲染資料的修改更加簡單（無需在html中一一查詢修改）