vue学习笔记一 基本指令

发布时间：2019-11-15 15:47:55 修改时间：2019-11-15 15:47:55 阅读：5675 评论：0 0

指令：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]"

---