Vue基础知识——常用指令

v-show：

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

例如：提交

v-if:

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

例：提交

v-else | v-else-if:

A

B

C

Not A/B/C

v-for:

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名

例：

{{ item.text }}

v-on:

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

缩写：@

预期：Function | Inline Statement | Object

参数：event

修饰符：

.stop - 调用 event.stopPropagation()，阻止事件冒泡。

.prevent - 调用 event.preventDefault()，阻止原生事件的发生。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

v-bind:

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

修饰符：

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)

例：     

v-model:

在表单控件或者组件上创建双向绑定。

限制： </code> components</p> <p><strong>修饰符</strong>：</p> <p><strong><span><code>.lazy</code></span></strong> - 取代 <code>input</code> 监听 <code>change</code> 事件</p> <p><strong><code>.number</code></strong> - 输入字符串转为有效的数字</p> <p><strong><code>.trim</code> </strong>- 输入首尾空格过滤</p> <p>例：<input v-model="message" placeholder="edit me"></p> <p><p>Message is: {{ message }}</p></p> <p> </p> <p><span>Multiline message is:</span></p> <p><p style="white-space: pre-line;">{{ message }}</p></p> <p><br></p> <p><textarea v-model="message" placeholder="add multiple lines">

 

Jack

John

Mike

Checked names: {{ checkedNames }}

 

<

option disabled value="">请选择

A

B

C

Selected: {{ selected }}