（4）打鸡儿教你Vue.js

模板语法：

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

html
使用 v-html 指令用于输出 html 代码

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>

v-on 指令，它用于监听 DOM 事件：

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

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<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>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创立双向数据绑定

v-on 监听事件

<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>

请点赞！由于你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群