插值模板

插入文本

使用{{}}插入文本

<div id="app">
  <p>{{ message }}</p>
</div>
 
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
</script>

插入原生Html

使用v-html进行绑定原生html

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

绑定属性

使用v-bind:property绑定属性:

根据class1是不是true进行设置class属性，class1是true则修改其class属性，否则不变

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

绑定表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

绑定指令：

v-if

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

绑定属性：

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
    new Vue({
      el: '#app',
      data: {
        url: 'http://www.runoob.com'
      }
    })
</script>

绑定事件

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

绑定用户输入

通过v-model进行数据的双向绑定

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

绑定过滤器

使用过滤器filters可以实现对数据的预处理

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

缩写形式：

对于v-bind和v-on进行缩写：

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

作者：dayAndnight2018

链接：https://blog.csdn.net/Day_and_Night_2017/article/details/85247914

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。