1. 程式人生 > >Vue學習(二)——內容顯示和繫結事件

Vue學習(二)——內容顯示和繫結事件

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Vue入門</title>
   <script src="./vue.js"></script>
</head>
<body>
   <div id="root">

      <!-- 插值表示式:{{number}} -->
      <!-- v-text顯示文字內容 -->
      <!-- v-html可以自動轉義處理顯示dom節點中的內容 -->
      <!-- v-on:click 繫結事件,其實是監聽  簡寫為@click -->
      <h1 v-text="msg" @click="handleClick"></h1>
      <h1 v-html="content"></h1>

   </div>
   <script>
   new Vue({
    el:"#root", 
    data:{
    	msg:"Hello World",
     	msg2:'Hello Wanglu',
     	msg3:'',
     	content:'<span>123</span>'
  	},
    methods:{
    	handleClick:function(){
      		this.msg3=this.msg;
      		this.msg=this.msg2;    //改變的是Vue例項中的資料
        	this.msg2=this.msg3;
       }
   }
})
   </script>
</body>
</html>

注:學習筆記內容來自:https://www.imooc.com/learn/980
官網:cn.vuejs.org