Vue study notes

vue_study.md

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

** 指令：**

• v-bind 可省略

<span v-bind:title="message">
<span :title="message">

将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致

• v-if

<p v-if="seen">现在你看到我了</p>

• v-for

    <li v-for="todo in todos">
      {{ todo.text }}
    </li>

• v-on 绑定一个事件监听器. 可简写为@

<button v-on:click="reverseMessage">逆转消息</button>
<button @click="reverseMessage">逆转消息</button>

• v-model 双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

生命周期

https://cn.vuejs.org/images/lifecycle.png

生命周期钩子:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

模板语法

• 插值

{{ 文件或JavaScript 表达式 }}

• 一次性地插值

<span v-once>这个将不会改变: {{ msg }}</span>

• 原始 HTML

<div v-html="rawHtml"></div>

• 属性

<button v-bind:disabled="isButtonDisabled">Button</button>
<div v-bind:id="dynamicId"></div>