vue基礎語法學習

vue基礎語法

vue與react相似之處：以數據驅動視圖的前端框架，改變數據，頁面視圖同時發生改變。

v-if與v-show的區別：

<template v-if="loginType == 'username'">    <!-- template作爲包裝元素，不會渲染到dom結構中 -->
    <label>用戶名</label>
</template>
<template v-if="loginType == 'email'">
    <label>郵箱</label>
</template>

<!-==================->
<h1 v-show="ok">hello</h1>  <!-- 當ok爲true時，h1的display屬性爲block，否則爲none，但始終存在在dom結構中 -->

v-show的元素會始終渲染並保持在dom中，v-show是簡單的切換元素的display屬性；
v-if 的元素則根據if的條件判斷語句來選擇渲染在dom中，當條件語句爲true時添加到dom中，否則移除

---

v-for

用v-for指令根據一組數組的選項列表進行循環渲染

<ul id="example">
    <li v-for="item in array">{{item.title}}</li>
</ul>

var vm=new Vue({
    el: '#example',
    data: {
        array: [
            {
                title:'first'
            },
            {
                title:'second'
            }
        ]
    }
});

渲染結果:

first
second

利用v-for迭代一個對象的屬性

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  <li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

結果如下：

John
Doe
30

組件和v-for

在自定義的組件中，可以像普通元素一樣使用v-for，但是不能直接傳遞數據到子組件中，因爲組件有自己獨立的作用域，需要用props傳遞：

<my-component v-for="(item,index) in items" v-bind:data="item" v-bind:index="index"></my-component>

數組的變異方法(會改變原始數組)：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

非變異方法（不會改變原始數組）

• filter()
• concat()
• slice()

這些非變異方法不會改變原始數組，但是總是會返回一個新的數組

注意事項：
由於javascript的限制，vue不能檢測以下變動的數組：

1. 當利用索引直接設置一個項時，如：vm.items[indexOfItem] = newValue
2. 當修改數組的長度時，如：vm.items.length = newLength;

避免第一種情況：以下兩種方式將達到效果，同時觸發狀態更新：

<!--Vue.set-->
Vue.set(example1.items,indexOfItem, newValue);

<!--Array.prototype.splice-->
example1.items.splice(indexOfItem,1,newValue);

避免第二種情況：

example1.items.splice(newLength);

事件修飾符：在事件處理程序中調用event.preventDefault()或者event.stopPropagate()
- .stop
- .prevent
- .capture
- .self
- .once

<a @click.stop="doThis"></a>    <!--阻止單擊事件冒泡-->
<form v-on:submit.prevent="onSubmit"></form>  <!--提交事件不再重載頁面-->
<a v-on:click.stop.prevent="doThat"></a>   <!-- 修飾符可以串聯  -->
<form v-on:submit.prevent></form>      <!-- 只有修飾符 -->
<div v-on:click.capture="doThis">...</div>    <!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.self="doThat">...</div>  <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->