<div id="app">
<h1>选项卡</h1>
<button @click="num=1" :class="num==1?'active':''">Vue</button>
<button @click="num=2" :class="num==2?'active':''">React</button>
<button @click="num=3" :class="num==3?'active':''">angular</button>
<div class="block" v-if="num==1">
Vue的文章列表
</div>
<div class="block" v-if="num==2">
React的文章列表
</div>
<div class="block" v-if="num==3">
angular的文章列表
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 1
}
})
</script>
The css code looks like this
<style>
.block {
width: 400px;
height: 400px;
border: 1px solid pink;
}
.active {
color: pink;
font-weight: 700;
}
</style>
The realization of this effect mainly uses v-on v-if to switch tabs and: class to change the color after clicking
Write the relevant knowledge points introduced in the middle of Vue
1. What is Vue?
Concept: Vue is a progressive JavaScript framework, a progressive framework for building user interfaces.
The founder of Vue is You Yuxi. Vue.js was released in 2014→Vue2.x was released in 2016⭐→Vue3.x was released in 2022.
Although Vue3 has been released now, it is still necessary to learn Vue2. Vue2 is very important. It is recommended to learn Vue3 after learning Vue2.
Vue's official website Vue official website
2. How to use Vue
There are two ways: 1. Directly refer to script 2. Install scaffolding
Import and instantiate
1. Template:
<div id="app">
<h1>{
{msg}}</h1>
</div>
2. Import: <script src="./js/vue.js"></script>
3. Instantiation ⭐: ❗❗❗Vue capitalizes the first letter
new Vue({
el: "#app", //指定模板返回(element)
data: {
msg: "你好vue"
}, //指定数据
})
3. Vue template syntax
Directives: Directives are special attributes prefixed with v- , and the attribute value of a directive is expected to be a single JavaScript expression .
Function: The instruction is the bridge between the template and the vue instance, as shown in the figure below
Features: can render the value v-text="msg" of the instance
math operation var-text="msg.length"
Use the js expression v-text="msg.length"
If it is text, you need to add single quotes v-text="'I am in China, +'msg"
1. Text rendering instructions
- { {}}
- v-text text rendering directive
- v-html html text rendering instruction
2. Conditional rendering instructions
- v-if
- v-else
- v-else-if
- v-show
The difference between interview questions v-if and v-show⭐
The same point: both are used to control display and hide
Difference: v-if is hidden through dom operation (commented out), and v-show is hidden through css (display: none)
Use v-show for frequent switching, otherwise switch v-if for a small amount
3. Traverse instruction v-for
Role: can traverse strings, numbers, lists, and objects
eg:<p v-for="(item,index) in list" v-key="item">{ {index+1}]-{ {item}]
item traversed element (custom name) index traversed subscript (key name) list traversed data
The v-key value must be unique, in order to better optimize the rendering list