如何用Vue实现选项卡效果以及Vue知识点

<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>

css代码如下所示

<style>
			.block {
				width: 400px;
				height: 400px;
				border: 1px solid pink;
			}

			.active {
				color: pink;
				font-weight: 700;
			}
</style>

此效果的实现主要利用了v-on v-if实现选项卡的切换 以及：class实现点击之后颜色的改变

写在中间 引入Vue的相关知识点

1.什么是Vue?

概念：Vue是渐进式 JavaScript框架，用于构建用户界面的渐进式框架。

Vue的创始人是尤雨溪，2014年Vue.js发布→2016年Vue2.x发布⭐→2022年Vue3.x发布。

虽然现在Vue3已经发布，但是还是要把Vue2学会，Vue2是很重要的，建议学完Vue2再学Vue3。

vue的官网

2.如何使用Vue

有两种方式 ：1.直接引用script 2.安装脚手架

导入与实例化

1. 模板：

<div id="app">
     <h1>{
         
  {msg}}</h1>
</div>

2. 引入：<script src="./js/vue.js"></script>

3.实例化⭐：❗❗❗Vue 首字母大写

new Vue({  
            el: "#app", //指定模板返回（element)
            data: {
               msg: "你好vue"
                   }, //指定数据
        })

3.Vue模板语法

指令： 指令是带有 v- 前缀的特殊 attribute，指令的属性值预期是单个 JavaScript 表达式。

作用：指令是联系模板与vue实例的桥梁，如下图

特点：可以渲染实例的值 v-text="msg"

数学运算 var-text="msg.length"

使用js表达式 v-text="msg.length"

如果是文本需要加单引号 v-text=" 我在中国，+‘msg"

1.文本渲染指令

{ {}} v-text文本渲染指令 v-html html文本渲染指令

2.条件渲染指令

v-if v-else v-else-if v-show

面试题v-if与v-show区别⭐

相同点：都是用来控制显示与隐藏

区别：v-if是通过dom操作（注释掉了）实现隐藏，v-show通过css方式（display：none）隐藏

频繁切换用v-show反之少量切换v-if

3.遍历指令v-for

作用：可以对字符串，数字，列表，对象进行遍历

eg:<p v-for="(item,index) in list" v-key="item">{ {index+1}]-{ {item}]

item 遍历的元素（自定义的名称） index遍历的下标（键名） list被遍历的数据

v-key 值必须唯一，为了更好的优化渲染列表