vue指令

vue指令

v-text

更新元素的文本内容。如果要更新部分的文本内容，需要使用 {{ Mustache }} 插值。

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

v-html

输出html代码，

v-if

用于条件性的渲染DOM元素

<h1 v-if="awesome">Vue is awesome!</h1>

v-else-if

用于表示v-if的“v-else-if块”

v-else

用于表示v-if的“else块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-show:

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

v-show 不支持 <template> 元素，也不支持 v-else。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for

基于一个数组来渲染一个列表，在 v-for 块中，我们可以访问所有父作用域的 property。

语法形式： item in items，items 是源数据数组，而 item 则是被迭代的数组元素的别名。

​ (item, index) in items，index 表示当前项的索引。

​ value in object，遍历一个对象，object是源数据对象，value代表对象的值

​ (value,name) in object，name代表对象的键名

​ n in 10，把模板重复对应次数。

也可以用of来代替in，这样更接近JavaScript迭代器的语法。

v-on（缩写： ‘@’ ）

用于监听DOM事件，并在触发时运行一些JS代码。

<button v-on:click="counter += 1">Add 1</button>

<!--greet为下面methods中定义的方法 -->
<button v-on:click="greet">Greet</button> 

<!--在内联中传值 -->
<button v-on:click="say('hi')">Say hi</button>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">

事件修饰符：

• .stop ：组织单击事件继续传播
• .prevent：提交事件不在重载页面
• .capture：添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .self：只当在 event.target 是当前元素自身时触发处理函数，事件不是从内部元素触发的
• .once：点击事件将只会触发一次
• .passive

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符：

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta(图标键)

v-bind(缩写：‘:’)

绑定HTML attribute

<div v-bind:id="dynamicid"></div>

v-model

用于在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

文本

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

文本域

<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message }}</p>

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

复选框

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

单选按钮

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

选择框

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

修饰符

• .lazy：懒加载，在“change”时而非“input”时更新
• .number：将用户的输入值转为数值类型
• .trim：去空格

v-slot（缩写：‘#’）

提供具名插槽或需要接收 prop 的插槽。

子组件：

<template>
    <div>
       <h1> content </h1>
       <slot name="header"></slot>
    </div>		
</template>

<script>
export default{
	name:"child",
}
</script>

父组件：

<child>
	<template v-slot:header>
        <h1>
            content
        </h1>	
	</template>
</child>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-cloak

结束编译后显示内容。

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过