vue

/*
* vue筆記
* 2.x
* https://cdn.bootcss.com/vue/2.5.21/vue.js
* https://cdn.bootcss.com/vue/2.5.21/vue.min.js
* 不支持ie8及更低版本
* 不像ng一樣判斷, 沒有完整的MVVM模式
* 構建單頁面應用

* 建議: 原型與UI設計成可複用 \ 可嵌套的結構
*/

var app = new Vue({
	el: '#app',
	data: {
		list: [],
		obj: {},
		val: ''
	},
	methods: { // 該對象下的方法不用賦值給DOM, 只處理邏輯操作 (需要調用)
		getPaging: function () {
			this.list = [1, 2, 3];
		}
	},

	computed: {
		// 計算數據 (不需要調用)
		// {{ reversedMessage() }}
		reversedMessage: function () {
			// 數據變化時, 就返回該計算結果
			return list.join(',');
		}
	},

	watch: {
		// 監聽數據
		// 相比計算數據, 監聽數據更擅長異步及較大開銷的操作
		val: function () {
			this.list = [];
		}
	}
});

/*
* v-for="item in list"        遍歷數據
	:key="item.id"            組件使用需要key
	v-for="(item, index) in list"
	v-for="(item, key, index) in list"    (鍵值, 鍵名, 索引)
	<template> 相當於小程序的 <block>
	相比小程序可以與v-if同時使用


* v-if="list"                決定該元素裏的內容是否存在
	v-else-if
	v-else

* v-show

* v-once                    不允許後續更新該元素下的數據

* v-html="rawHtml"            模板數據爲普通文本, 這個可以解析其中的html

* v-on:click="getPaging"    監聽事件
	@click        縮寫
	@click="hellow($event)"    $event即原生的event

* v-bind:href                監聽屬性
	:href        縮寫
*/
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>

<div :style="styleObject"></div>
data: {
	styleObject: {
		color: 'red',
		fontSize: '13px'
	}
}

// 修改數據
Vue.set(vm.list, 1, 'a'); // data { list: [1, 'a', 3] }

// 添加數據
Vue.set(app.obj, 'xxx', 1); // data { obj: { xxx: 1 } }


/*
* 組件模板
*/
Vue.component('tpl-name', {
	props: ['list'], // 傳入的對象
	template: '<li>{{ list.name }}</li>'
});

// 調用模板
<li
	is="tpl-name"
	v-for="(item, index) in list"
	:key="item.id"
	:title="item.title"
	v-on:remove="list.splice(index, 1)"
></li>

// <tpl-name v-for="value in list"></tpl-name>

// 在模板數據中允許使用原生語法, 如 {   {   list.join(',')   }   }

/*
* 生命週期鉤子
* created, mounted, updated, destroyed
*/

// 表單
// <form @submit.prevent="addNewTodo"></form>

// v-model="val"                實現表單數據的雙向綁定
	<select v-model="selected">
	// <input v-model.trim="msg">        過濾首尾空白