声明式UI：Vue.js简单语法总结

此文档为了对比各个声明式UI编程语法，避免混淆。

0. 声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

1. 访问变量

<div id="app-1">
  <p >{{message}}</p>
</div>

var app1 = new Vue({
  el: '#app-1',
  data: {
    message: "hello world!"
  },
  methods: {
    hello: function () {
      // this 是app1示例，this.message是直接访问data定义的变量
      this.message = this.message + "6666666666"
    }
  }  
})

2. 条件 (v-if)

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

var app3 = new Vue({
  el: '#app-2',
  data: {
    seen: true
  }
})

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
<h1 v-else-if>Oh no 😢</h1>

执行简单的判断，但注意不要使用 {{ }}

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

3. 循环 (v-for)

<div id="app-3">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

4. 监听器 （v-on）

<div id="app-4">
  <p>{{ message }}</p>
    
  <!-- 完整语法 -->
  <button v-on:click="reverseMessage">反转消息</button>
  <!-- 缩写 -->
  <button @click="reverseMessage">反转消息</button>  
</div>

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

5.绑定(v-bind)

5.1 绑定属性

v-bind 指令可以用于响应式地更新 HTML attribute：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

5.2 绑定class

绑定 v-bind:class 实现动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

active 这个 class 存在与否将取决于数据 isActive

渲染为：

<div class="active"></div>

可以绑定为对象

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

5.3 绑定class数组

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

还可以这样写：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

5.4 绑定style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

6. 双向绑定(v-model)

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

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

7. 计算属性（computed）

<div id="app-7">
  <p> 原文: "{{ message }}"</p>
  <p> 模板内简单运算： {{ message.split('').reverse().join('') }} </p> 
  <p> 复杂逻辑采用computed: "{{ reversedMessage }}"</p>
</div>

var app7 = new Vue({
  el: '#app-7',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

8. 侦听器（watch）

监听数据变量的变化

<div id="app-8">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

var app8 = new Vue({
  el: '#app-8',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          //TODO Http请求获取回答
      }
  },
})