（4）打鸡儿教你Vue.js

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

v-html
<div id="app">
 <div v-html="message"></div>
</div>

<script>
new Vue({
 el: '#app',
 data: {
  message: '<h1>dashu</h1>'
 }
</script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

{{ message.split('').reverse().join('') }}

<div id="app">
 <pre><a v-bind:href="url"></a></pre>
</div>

<script>
new Vue({
 el: '#app',
 data: {
  url: ''
 }
})
</script>

<a v-on:click="doSomething">

<form v-on:submit.prevent="onSubmit"></form>

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

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

字符串第一个字母转为大写：
<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'dashu'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

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

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>