First of all, when you see this picture, the structure on the left will not be analyzed. The order of explanation is explained in the previous chapter.
The red part in the middle is divided into 3 parts, the first part is a template, which contains html; the second part is a script language, which contains js or ts language, lang="ts" is ts syntax, and setup is unique to vue3 One, you need to pay attention to the writing, otherwise an error will be reported; the third is the html style, and scoped is only effective in the current area. These 3 blocks can be arranged arbitrarily, depending on your habits. Since it is a template syntax, the focus is on the template. Writing code in the template has the same effect as the code written in html, but it is just a syntactic sugar.
One, the variable problem
define variable
var, a variable that acts on the global, may not be assigned a value when it is defined
let, acts on the variables inside the module, and it is not necessary to assign a value when it is defined
const, which acts as a constant inside the module and must be assigned a value when it is defined
<template>
{
{a}}
{
{b}}
{
{c}}
</template>
<script lang="ts" setup>
let a = '测试let'
const b = '测试const'
var c = '测试var'
let a1
const b1 = '' //必须赋值
var c1
</script>
<style scoped>
</style>
string placeholder
<template>
<!-- {
{a}}
{
{b}}
{
{c}} -->
{
{b}}
</template>
<script lang="ts" setup>
// let a = '测试let'
// const b = '测试const'
// var c = '测试var'
// let a1
// const b1 = '' //必须赋值
// var c1
let a = '测试let'
let b = `测试占位符${a}`
</script>
<style scoped>
</style>
Second, the interpolation method
The { {}} above is the interpolation method
Three, instruction
Instructions are preceded by v-
v-html, insert a piece of html code
<template>
<span v-html="rawHtml"></span>
</template>
<script lang="ts" setup>
let rawHtml = '<span style="color: red">这里会显示红色！</span>'
</script>
<style scoped>
</style>
v-show, according to the true or false value of the expression, to display or hide html elements
<template>
<!-- <span v-html="rawHtml"></span> -->
<h1 v-show="yes">123</h1>
<h1 v-show="yes1">456</h1>
</template>
<script lang="ts" setup>
// let rawHtml = '<span style="color: red">这里会显示红色！</span>'
let yes = true
let yes1 = false
</script>
<style scoped>
</style>
v-if /v-else-if/v-else, these three are used for conditional judgment
<template>
<!-- <span v-html="rawHtml"></span> -->
<h1 v-show="yes">123</h1>
<h1 v-show="yes1">456</h1>
<h1 v-if="yes">789</h1>
<h1 v-if="yes1">456</h1>
<h1 v-if="score>=80">优秀</h1>
<h1 v-else-if="score>=70">良好</h1>
<h1 v-else>及格</h1>
<h1 v-if="score1>=80">优秀</h1>
<h1 v-else-if="score1>=70">良好</h1>
<h1 v-else>及格</h1>
</template>
<script lang="ts" setup>
// let rawHtml = '<span style="color: red">这里会显示红色！</span>'
let yes = true
let yes1 = false
let score=80
let score1=60
</script>
<style scoped>
</style>
Among them, the functions of v-if and v-show are the same, both of which control whether to display elements in html.
However, v-if has higher switching overhead, and v-show has higher initial rendering overhead, so if you need to toggle the display and hiding of elements very frequently, use v-show. Use v-if if the condition rarely changes at runtime.
v-for renders a list by looping, and the looping object can be an array or an object.
<template>
<li v-for="(b,index) in books">{
{index}}-{
{b.title}}</li>
<h1 v-for="b of books">{
{b.title}}</h1>
<h2 v-for="(b,index) of books">{
{index}}-{
{b.title}}</h2>
<h3 v-for="(b,index) of books" :key="index">{
{index}}-{
{b.title}}</h3>
</template>
<script lang="ts" setup>
let books = [{
title: 'vue2'
},
{
title: 'vue3'
},
{
title: 'vue4'
}
]
</script>
<style scoped>
</style>
It can be seen that: key="index" is required in H3, so that there will be no warning prompts, and there are warning prompts in front of the other three
v-bind, used to respond to the attributes of updated html elements, dynamically bind one or more attributes to expressions
<template>
<button v-bind:disabled="isButtonDisabled">按钮</button>
<button :disabled="isButtonDisabled1">按钮</button>
</template>
<script lang="ts" setup>
let isButtonDisabled = true
let isButtonDisabled1 = false
</script>
<style scoped>
</style>
v-model, used to create two-way data binding on form <input>, <textarea> elements, it will automatically select the correct method to update elements according to the control type. That is, when the data on the interface changes, the internally defined variables also change accordingly.
<template>
<input type="text" v-model="a" />
</template>
<script lang="ts" setup>
let a = 123
</script>
<style scoped>
</style>
v-on is used to monitor DOM events, which is needed when using events.
<template>
<div>
<button v-on:click="a">按钮</button>
<button @click="b">按钮1</button>
</div>
</template>
<script lang="ts" setup>
let a = (() => {
alert(123);
});
let b = (() => {
alert(456);
})
</script>
<style scoped>
</style>
v-text, used to update the text content of the element
<template>
<span v-text="a"></span>
<span>{
{a}}</span>
</template>
<script lang="ts" setup>
let a = 123
</script>
<style scoped>
</style>
v-once, literally means that it is only rendered once, and will not be rendered later. For example, after initializing 4 values in the array, you cannot add values to it afterwards. It is of little significance and is rarely used.
v-pre, there is no need to compile this element, it will display whatever it is originally.
<template>
<div>
<h1 v-pre>{
{a}}</h1>
</div>
</template>
<script lang="ts" setup>
let a = 123
</script>
<style scoped>
</style>