Vue入門1

<div id="app">
    <p>{{message}}</p>
    <h1>{{details()}}</h1>
</div>
引入：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

實例化：
<script>
var app = new Vue({
    el : '#app',
    data : {
        message : '123123',
    },
    methods: {
        details: function() {
            return  this.site + " - 學的不僅是技術，更是夢想！";
        }
    }
});
</script>

注：vue實例中的
1）el 是dom元素的id
2）data 定義了屬性
3）methods 用於定義函數，return 來返回函數值
4）{{}}用於輸出對像的屬性和返回值
5）vue中數據的拷貝是淺拷貝

var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
// 它們引用相同的對象！
document.write(vm.site === data.site) // true
// 設置屬性也會影響到原始數據
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob

v-html 用於輸出html代碼

<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
      el: '#app',
      data: {
        message: '<h1>菜鳥教程</h1>'
      }
});
</script>

v-bind 用於進行屬性的綁定
v-bind:+html屬性能更新html的屬性

<div id="app2">
  <span v-bind:title="message">
       鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>
<script>
var app2 = new Vue({
    el : '#app2',
    data : {
        message : '123123123 ' + new Date().toLocaleString()
    },
});
</script>

vue中判斷用v-if && v-show用來判斷是否展示元素

<div id="app"><p v-if="seen">現在你看到我了</p></div>
<script>
new Vue({
    el: '#app',
      data: {
        seen: true
    }
});
</script>

<div v-if="type === 'A'"></div>
<div v-else-if="type === 'B'"></div>
<div v-else-if="type === 'C'"></div>
<div v-else></div>

在 <template> 元素上使用 v-if 條件渲染分組,最終的渲染結果將不包含 <template> 元素。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show 只是簡單地切換元素的 CSS 屬性 display。
<h1 v-show="ok">Hello!</h1>

v-once 只渲染元素和組件一次

<span v-once>不會改變{{message}}</span>

v-for循環 
1)把一個數組對應爲一組元素

<ul id="example-2">
    <li v-for="item in items">
        {{ item.message }}
    </li>
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});
</script>

2)一個對象的 v-for

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
      <div v-for="(value, name) in object">
          {{ name }}: {{ value }}
    </div>
</ul>
<script>
var vm =new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
});
</script>

數組相關方法：基於js中數組的方法

修改數組中單個元素方法：
1. vm.items[indexOfItem] = newValue
2. 使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：
vm.$set(vm.items, indexOfItem, newValue)

修改object中單個元素方法：

Vue.set(object, propertyName, value)

或vm.$set(vm.items, indexOfItem, newValue)

組件v-for

v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值

<div id="app">
    {{message}}
    <input v-model="message">
</div>
<script>
var app = new Vue({
    el : '#app',
    data : {
        message : '123123',
    },
});
</script>

表單相關v-model.值綁定

v-model修飾符
.lazy 在輸入時就於後臺的數據進行同部，在change事件同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number 自動將輸入值轉換爲number
.trim 過濾輸入中首尾的空格

v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
用v-on:click監聽是否點擊

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉字符串</button>
</div>
<script>
new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      methods: {
        reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
        }
      }
});
</script>

<!-- 阻止單擊事件繼續傳播 -->
<a v-on: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>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

v-on 在監聽鍵盤事件時提供了按鍵的修飾符

<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

 支持的按鍵別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名：

.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta