v-text
v-text is mainly used to update textContent, which can be equivalent to the text attribute of JS.
<span v-text="text"></span>
// 等同于下方语句：
<span>{{text}}</span>v-html
The double brace method will interpret the data as plain text, not HTML. In order to output real HTML, you can use the v-html command. It is equivalent to JS's innerHtml property.
Note: Content is inserted as normal HTML - will not be compiled as a Vue template.
<div v-html="html"></div>
v-show
Equivalent to css's dispaly attribute switching between "none" and "block" settings.
<div v-show="isShow">hello world</div>
v-if
v-if can implement conditional rendering. Vue will render elements based on the true and false conditions of the expression value. .
<div v-show="isShow">hello world</div>
The above code, if isShow is false, the div is rendered, otherwise it is not rendered.
Note:
v-if needs to be distinguished from v-show. The elements of v-show will always be rendered and saved in the dom. It just simply switches the dispaly attribute of css.
v-if has higher switching overhead.
v-show has higher initial rendering overhead.
So, if you want to switch very frequently, it is better to use v-show; if the conditions are unlikely to change during runtime, it is better to use v-if.
v-else
v-else is used with v-if, it must follow v-if or v-else -if after, otherwise it has no effect.
Similar to JS’s if .. else.
<div v-if="isSow">值为true的时候显示的内容</div> <div v-else>值为false的时候显示的内容</div>
v-else-if
v-else-if acts as the else-if block of v-if and can be used in a chain repeatedly. Similar to JS's if .. else if .. else
<div v-if="type==='A'"> A </div> <div v-if="type==='B'"> B </div> <div v-if="type==='C'"> C </div> <div v-else> Not A,B,C </div>
v-for
Use the v-for instruction to render by traversing the array .
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
items: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
// 补充：
// 也可以自行指定参数，最多可以接受3个参数
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
// 迭代对象
<ul>
<li v-for="value in object">
{{ index }}. {{ key }} : {{ value }}
</li>
// 迭代整数
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>v-on
Bind event listener. The event type is specified by parameters. The expression can be the name of a method or an inline statement, and can be omitted if there are no modifiers.
v-on can also be abbreviated as "@", such as:
v-on="show" can be abbreviated as: @show
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="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">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>You can also use modifiers, as follows :
.stop - Call event.stopPropagation().
.prevent - Calls event.preventDefault().
.capture - Use capture mode when adding event listeners.
.self - The callback is only triggered when the event is triggered from the element itself to which the listener is bound.
.{keyCode | keyAlias} - The callback is only fired when the event is triggered from a specific key.
.native - Listen to native events on the root element of the component.
.once - The callback is triggered only once.
.left - only fires when the left mouse button is clicked.
.right - only triggered when the right mouse button is clicked.
.middle - only triggered when the middle mouse button is clicked.
.passive - add a listener in { passive: true } mode
v-bind
Dynamically bind one or more attributes, or a component prop to an expression. Often used to dynamically bind classes and styles. And href etc.
can be abbreviated as: " : ", such as:
v-bind:class=" isActive : 'active' :' ' ", can be abbreviated as: :class=" isActive : ' active' :' ' "
<div v-bind:class=" isActive : 'active' :' ' "></div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive : true,
}
})
</script>
//渲染结果为： <div class="active"></div>Bind multiple classes, the details are as follows:
<div v-bind:class="[ isActive : 'active' :' ' , isError: 'error' :' ' ]">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive : true,
isError: true,
}
})
</script>
//渲染结果为： <div class="active error"></div>Other examples, see the code below for details:
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<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>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>v-model
#Create two-way binding on a form control or component.
v-model will ignore the initial values of the value, checked, and selected attributes of all form elements. Because it selects Vue instance data as the specific value.
<div id="app">
<input v-model="somebody">
<p>hello {{somebody}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>In this example, enter another name directly into the browser input, and the content of the p below will change directly accordingly. This is two-way data binding.
Available modifiers:
.lazy - By default, v-model synchronizes the value and data of the input box. You can use this modifier to switch to resynchronization in the change event.
.number - Automatically convert the user's input value into a numerical type
.trim - Automatically filter the leading and trailing spaces entered by the user
How to use modifiers: For example:
<input v-model.trim="somebody">
v-pre
v-pre is mainly used to skip the compilation process of this element and its sub-elements. Can be used to display the original Mustache tag. Skip a large number of nodes without instructions to speed up compilation.
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>This directive is used to remain on the element until the end of the associated instance for compilation.
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>Explanation:
will flash when the page is loaded. It will first display:
<div>
{{message}}
</div>and then compile to:
<div> hello world! </div>
The v-cloak command can To solve the problem of interpolation flickering above, as follows: In fact, what is used is to hide the content through the style attribute when the interpolation is not loaded.
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>++++++++ {{ msg }} ----------</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello',
}
})
</script>v-once
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> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>上面的例子中，msg,list即使产生改变，也不会重新渲染。
v-slot
提供具名插槽或需要接收 prop 的插槽。
可简写为：#
slot 和 scope-slot 是在 vue@2.6.x 之前的语法，而从 vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代前两者。
使用具名插槽来自定义模板内容（vue@2.6.x已经废弃）
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 slot 特性：
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>接下来，使用 v-slot 指令改写上面的栗子：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>使用 # 简写代替 v-slot
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>相关推荐：
更多编程相关知识，请访问：编程教学！！
The above is the detailed content of Understand common instructions in vue.js (summary). For more information, please follow other related articles on the PHP Chinese website!
Why does vue.js report an error?
What are the uses of vue.js slots?
How to jump with parameters in vue.js
How to solve the problem that this copy of windows is not genuine
Network topology diagram
What to do if the computer fakes death
What are the gsm encryption algorithms?
How to import mdf files into database
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
