Vue_1.0

簡介

Vue是什么？按以往知識，我們把json物件的資料顯示到一個元素上去，可以通過JS或者JQuery（DOM）

如果通過Vue，僅需知道資料以及資料系結的id，

<!--js的方式-->
<div id="test">
</div>
<script>
//準備資料
var gareen = {"name":"蓋倫","hp":616};
//獲取 html dom
var dom = document.getElementById("test");
//顯示資料
dom.innerHTML= gareen.name;
</script>

<!--Vue的方式-->
<script src="vue.min.js"></script>
<div id="test">
  {{gareen.name}}
  {{gareen.hp}}
</div>
<script>
var gareen = {"name":"蓋倫","hp":616};
//通過vue.js 把資料和對應的視圖關聯
new Vue({
      el: '#test',
      data: {
        message: gareen
      }
    })
</script>

監聽事件

v-on（縮寫@）

<div id="test">
<div>一共點擊了{{num}}次數</div>
<!--這里v-on:可以直接縮寫成@   @click="count" 即可-->	
<button v-on:click="count">點擊</button>
</div>
<script>
new Vue({
      el: '#test',
      data:{
		  num:0
	  },
	  methods:{
		  count:function(){
			  this.num++;//這里記得加this，函式名自己取不一定是count
		  }
	  }    
    })
</script>

冒泡

<div id="father" v-on:click="doc">
father
	<div id="me" v-on:click="doc">
	me
		<div id="son" v-on:click="doc">
		son
		</div>
	</div>
</div>
<script>
    new Vue({
        el: "#father",//這里寫根節點 如果寫me 那么father的doc就無效了
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;//系結事件的元素
                alert(this.id)
            }
        }
    })
</script>

阻止冒泡

<div id="father" v-on:click="doc">
father
	<div id="me" v-on:click.stop="doc">//在@click后面加上.stop就可以阻止冒泡到father
	me
		<div id="son" v-on:click="doc">
		son
		</div>
	</div>
</div>
//下面的js部分一樣的

優先觸發

<div id="father" v-on:click="doc">//在@click后面加上.capture就可以優先觸發father
father
	<div id="me" v-on:click="doc">
	me
		<div id="son" v-on:click="doc">
		son
		</div>
	</div>
</div>
//當然如果me和father都設定了優先觸發 然后點擊son  順序是father->me->son（看來還是當爸爸的優先級比較高

只有自己能觸發

<div id="father" v-on:click="doc">
father
	<div id="me" v-on:click.self="doc">
	me
		<div id="son" v-on:click="doc">
		son
		</div>
	</div>
</div>
這個時候點擊son  冒泡程序會忽略掉me

只監聽一次（父元素依舊可以監聽

.once 和上面同理  表示只能監聽一次事件  但是它的父元素還是能監聽到的

阻止提交重繪

.prevent 阻止超鏈接和form會導致頁面重繪的操作

條件陳述句

v-if

<!-- v-if指令用于條件性地渲染一塊內容，這塊內容只會在指令的運算式回傳truthy值的時候被渲染，-->
<div id="div1">
  <button @click="toggle">切換隱藏顯示</button>
  <div v-if="flag"> 默認這一條是看得見的</div>
</div>
<script>
new Vue({
      el:'#div1',
      data: {
          flag:true
      },
      methods:{
          toggle: function(){
              this.flag=!this.flag;
          }
      }
    })
</script>

v-else

<div id="div1">
  <button @click="choujiang">中獎率%10</button>
  <div v-if="show"> 中了500萬！</div>
  <div v-else>謝謝惠顧！</div>    
</div>
<script>
new Vue({
      el: '#div1',
      data: {
          show:false
      },
      methods:{
          choujiang: function(){
             this.show=Math.random()<0.1;
          }
      }
    })
</script>

v-else-if

<div id="div1">
  <button @click="toutai"> 看看下輩子投胎是做什么的 </button>
  <div v-if="number>98"> 神仙</div> 
  <div v-else-if="number>50"> 普通公務員</div> 
  <div v-else> 流浪漢</div> 
</div>
<script>  
new Vue({
      el: '#div1',
      data: {
          number:0
      },
      methods:{
    	  toutai: function(){
        	 this.number=Math.random()*100
          }
      }
    })
//這個差不多也沒啥好說的
</script>