vue学习笔记一 基本指令

• 指令：v-  ：Vue 提供的特殊特性

  1、文本：{ {...}}

  2、html: v-html 

  3、属性：v-bind

  4、表达式：

  5、参数：例 v-bind:href="url"

  6、v-on修饰符

  事件修饰符

  <!-- 阻止单击事件冒泡 -->

  <a v-on:click.stop="doThis"></a>

  <!-- 提交事件不再重载页面 -->

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

  <!-- 修饰符可以串联  -->

  <a v-on:click.stop.prevent="doThat"></a>

  <!-- 只有修饰符 -->

  <form v-on:submit.prevent></form>

  <!-- 添加事件侦听器时使用事件捕获模式 -->

  <div v-on:click.capture="doThis">...</div>

  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->

  <div v-on:click.self="doThat">...</div>

  <!-- click 事件只能点击一次，2.1.4版本新增 -->

  <a v-on:click.once="doThis"></a>

  按键修饰符

  <!-- 同上 -->

  <input v-on:keyup.enter="submit">

  <!-- 缩写语法 -->

  <input @keyup.enter="submit">

  <p><!-- Alt + C -->

  <input @keyup.alt.67="clear">

  <!-- Ctrl + Click -->

  <div @click.ctrl="doSomething">Do something</div>

  7、v-model修饰符：

  <!-- 在 "change" 而不是 "input" 事件中更新 -->

  <input v-model.lazy="msg" >

  <!-- 输入值转为 Number 类型 -->

  <input v-model.number="age" type="number">

  <!-- 自动过滤用户输入的首尾空格 -->

  <input v-model.trim="msg">

  8、过滤器： v-bind:id="rawId | formatId" 或 { { message | filterA | filterB }}

  缩写：例

  <!-- 完整语法 -->

  <a v-bind:href="url"></a>

  <!-- 缩写 -->

  <a :href="url"></a>

  <!-- 完整语法 -->

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

  <!-- 缩写 -->

  <a @click="doSomething"></a>

  9、条件判断： v-if 、v-else-if、v-else、v-show

  <!-- Handlebars 模板 -->

  { {#if ok}}

    <h1>Yes</h1>

  { {/if}}

  10、循环语句：v-for

  v-for="(value, key, index) in object"

  11、监听属性：watch 

  例：

  vm.$watch('counter', function(nval, oval) {

      alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

  });

  12、样式绑定： 

  class:

  v-bind:class="{ active: isActive, 'text-danger': hasError }"

  v-bind:class="[errorClass ,isActive ? activeClass : '']"

  style

  v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

  v-bind:style="[baseStyles, overridingStyles]"