How to use Vue to achieve tab effect and Vue knowledge points

        <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