GSO vue(01)

MVC 和MVVM

第一個Vue實例

<div id="app">
		<p>{{msg}}</br>
		{{hanshu()}}
		</p>
</div> 
<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'歡迎學習Vue',	                 
			},
			methods:{
				hanshu:function(){
					return "千里之行，始於足下";
				}
			}
		});
	</script>

創建一個Vue的實例,當我們導入包之後,在瀏覽器內存中, 就多了一個Vue構造函數，我們new出來的這個vm對象,就是我們MVVM中的調度者。

• el表示當前這個Vew實例,要控制頁面哪個元素，這意味着我們接下來的改動全部在以上指定的 div 內
• data 用於定義屬性，data就是MVVM中的M,用來保存頁面數據，data的數據改變會立即應用到實例
• methods 用於定義的函數，可以通過 return 來返回函數值。
• {{ }} 插值表達式用於輸出對象屬性和函數返回值。

指令

使用v-cloak防止頁面加載時出現 vuejs 的變量名

 [v-cloak]
    	{
    		display:none;
    	}
    <p v-cloak>----{{msg}}-----</p>

v-text和v-html會覆蓋標籤中的文本或html標籤
(v-text默認無閃爍問題，經測v-html有）

 <h4 v-text="msg">----------</h4>
   <h4 v-html="msg1"></h4>

v-bind 主要用於屬性綁定（識別並解析data定義的屬性,所有對象會被當做data的屬性）（可簡寫’v-bind:‘爲’:’）

data:{
				mytitle:"vue定義的標題"
			}
<input type="button" id="" value="按鈕" v-bind:title="mytitle+'123'" />

v-on 指令，它用於監聽 DOM 事件，相當於函數綁定，所有對象會被當做methods屬性的函數。（可簡寫’v-on:‘爲’@’）

methods:{
				dianJi:function(){
					alert("點擊");
				}
			}
<input type="button" name="" id="" value="按鈕" v-on:click="dianJi" />

Vue 實例還提供了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來

document.write(vm.$data === data) // true
document.write(vm.$el === document.getElementById('vue_det')) // true