vue学习过程总结（03） - 菜鸟教程归纳

1.模板语法

　　1.1.文本插值，数据绑定。{{}}，如： <p>{{ message }}</p>

　　1.2.输出HTML代码。v-html，如： <div v-html="message"></div>

　　1.3.HTML属性值绑定。 v-bind，如：

<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-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

　　1.4.判断指令。v-if，如：

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

　　1.5.监听DOM事件。 v-on，如：

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

　　1.6.双向数据绑定。v-model，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。如：

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

2.修饰符

　　2.1.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。. （半角句号）。如：

<!--event.preventDefault() 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。-->
<form v-on:submit.prevent="onSubmit"></form>

3.过滤器

　　3.1.过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

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