vue-模板

vue-模板
1.插入值：
1.1插入不变文本的指令：v-once
<span v-once>This will never change: {{ msg }}</span>
1.2插入html
<div v-html="rawHtml"></div>
1.3 v-bind指令：
<button v-bind:disabled="someDynamicCondition">Button</button>
1.4script表达式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
表达式只能是单个
2.指令：指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上
2.1指令的参数：
2.1.1 v-bind参数
<a v-bind:href="url"></a>
2.1.2 v-on参数
<a v-on:click="doSomething">
3.修饰符：修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>
表示 v-on这个指令由提交事件触发调用
4.过滤器：过滤器设计目的就是用于文本转换
4.1：过滤器函数总接受表达式的值作为第一个参数
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
4.2：过滤器可以串联
{{ message | filterA | filterB }}
4.3：过滤器可以接受参数：
{{ message | filterA('arg1', arg2) }}
5.缩写：
v-bind缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on缩写
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
总结：
1.只执行一次的指令：v-once
2.插入html的指令：v-html
3.vue对javascript的支持
4.指令参数
5.指令修饰符
6.过滤器
7过滤器串联
8过滤器参数
9.缩写