vue学习笔记(五)——指令

13条指令

1. v-text  (数据绑定语法-插值)

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.v-html  (数据绑定语法-插值,普通HTML,注意安全)

<div v-html="html"></div>

3.v-show  (条件渲染,触发过渡效果)

<h1 v-show="ok">Hello!</h1>

4.v-if  (条件渲染)

5.v-else  (条件渲染)  

<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

6.v-else-if  (条件渲染)

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

7.v-for  (列表渲染)

<div v-for="item in items">
{{ item.text }}
</div> //也可以为数组索引指定别名(或者用于对象的键):
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div> //迫使其重新排序的元素,您需要提供一个 key 的特殊属性:
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>

8.v-on  (绑定事件监听器)

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter"> <!--在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器)-->
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

9.v-bind  (动态绑定,class,style,props) 

<!-- 绑定一个属性 -->
<img v-bind:src="data:imageSrc">
<!-- 缩写 -->
<img :src="data:imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

10.v-model  (表单控件绑定, input, select, textarea, lazy, number, trim)

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

11.v-pre  (跳过编译过程) 

<span v-pre>{{ this will not be compiled }}</span>

12.v-cloak  (这个指令保持在元素上直到关联实例结束编译。)

[v-cloak] {
display: none;
} <div v-cloak>
{{ message }}
</div>

13.v-once  (数据绑定-插值,用于优化更新性能)  

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
上一篇:Shell脚本实现超简洁的在Linux服务器上安装nginx、resin、java、tomcat、redis等程序


下一篇:Java基础进阶:内部类lambda重点摘要,详细讲解成员内部类,局部内部类,匿名内部类,Lambda表达式,Lambda表达式和匿名内部类的区别,附重难点,代码实现源码,课堂笔记,课后扩展及答案