Vue basics
Introduce vue.js
<script src="vue.js路径"></script>
<script>
// 这里写相关JS的代码
</script>
Instantiate vue object
const app = new Vue({
// 这里写相关的配置
})
Configuration
he
Mount point, which corresponds to the mount point that meets the requirements of the selector, as a template of vue (only when it becomes a template can you use template syntax)
new Vue({
el: "#app"
})
data
If we put the data in the data, then we can use the data directly in the page template. If it is in the related function in new Vue, we can use this.xxx to get the corresponding data
new Vue({
el: "#app",
data: {
msg: "消息"
}
})
/*
模板插值可以使用 {
{msg}}
new Vue的函数中可以使用 this.msg获取 this.msg="新的值"设置
*/
methods
We can prevent the functions and event functions involved in the project from being included in methods.
Event function binding
We need to use the v-on instruction, the specific operation is in the v-on content
Direct call
If you want to call another function in one function, you can use this.function name()
Interpolation
Interpolation can use { {}}
<html>{
{msg}}</html>
instruction
v-show
Set the display and hidden state of the element, which is at the css level (display)
v-text 、 v-html
Equivalent to innerText, innerHTML
v-if、v-else-if、v-else
We can determine whether to render html through conditional judgments (on some pages, the same position and different states can use this method to solve the corresponding rendering problem)
<div id="app">
<!-- 当arr有数据是渲染数据，没有数据时显示暂无数据 -->
<div v-if="!arr.length">暂无数据</div>
<div v-else>{
{arr}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
arr: []
}
})
</script>
v-for
When we want to traverse the rendering list of data, we can use v-for.
v-for must add the key. Try not to use v-for and v-if on the same label. You can use the template label
<!--
item是自定义的名字，表示数组中遍历出的每一个单个的内容
index是下标，也可以自定义名字
arr是data中的数据的属性名
-->
<div v-for="item in arr"></div>
<div v-for="(item, index) in arr"></div>
<div v-for="(value, key, index) in obj"></div>
v-bind
{
{}}Used to insert content in the page tag , if we want to interpolate in the tag attribute, we can usev-bind:属性="动态值"
v-bind can be abbreviated as:
<img :src="data中相关属性名">
class binding
There are many uses of class binding
<div :class="className"></div>
<div :class="[className1, className2, className3]"></div>
<div :class="{active: activeStatus}"></div>
<div :class="['box', {active: activeStatus}]"></div>
style binding
The binding of the style can be followed by an object, which contains relevant css properties and values
<div :style="{
width: '100px', height: '100px'}"></div>
v-model
v-model is an instruction to achieve two-way binding, v-model supports various elements of the form. v-model is to facilitate us to get the value value in the form
When you see the form element, add v-model, and set a separate object for a separate form in the data. All the attributes contained in the object are the value of each form element
<input v-model="value">
v-on
v-on in order to achieve event binding
<button @click="methods中的函数名">
<button v-on="{click: mehtods中函数, 其他事件类型: methods中函数}">
v-pre
Do not let vue render
v-once
Only render once, after rendering, you will lose the management with the data
v-cloak
Need to be used in conjunction with css
[v-cloak] {
display: none;
}