vue.js经常使用语法

一、文本：使用 {{...}}（双大括号）的文本插值

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

二、html

　　使用v-html指令输出html的值

三、属性：属性的值使用v-bind

　　如下实例判断 class1 的值，若是为 true 使用 class1 类的样式，不然不使用该类：

 <div v-bind:class="{'class1': true}">
    v-bind:class 指令
  </div>

四、表达式：支持js

五、指令：带有 v- 前缀的特殊属性。

      用于在表达式的值改变时，将某些行为应用到 DOM 上。 例子， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

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

七、修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

八、用户输入

　v-model实现双向绑定，在 input、select、textarea、checkbox、radio 等表单控件元素自动更新绑定的元素的值。

九、按钮的事件咱们可使用 v-on 监听事件

十、过滤器

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>

　　过滤器能够串联：

{{ message | filterA | filterB }}

　　过滤器是 JavaScript 函数，所以能够接受参数：

{{ message | filterA('arg1', arg2) }}

十一、缩写

　　Vue.js 为两个最为经常使用的指令提供了特别的缩写

　　v-bind

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

　　v-on

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