VUE快速入门手册

阳光穿透心脏的1/2处 2024-05-03 14:31 165阅读 0赞

![在这里插入图片描述][b2c82ce3a6f0488cadcae695cdb7c0fa.jpeg_pic_center]

> Author： 无聊大侠hello word  
> 有一点思考，有一点想法，有一点理性！  
> CSDN@无聊大侠hello word

#### 文章目录 ####

*  前言
 *  一、VUE入门
 *  二、语法

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## 一、VUE入门 ##

**Vue介绍**

> **VUE：**vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

> **MVVM：**MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

> MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。

> Vue.js是一个提供了MVVM风格的双向绑定的javascript库，专注于view层。它的核心是MVVM中的VM，也即是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。

> 虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发，因此会经常使用vm（ViewModel的缩写）这个变量名表示Vue实例。

**Vue特点：**

> 1.  采用组件化模式，提高代码复用率，且让代码更好维护
> 2.  声明式编码，让编码人员无需直接操作DOM，提高开发效率
> 3.  使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

**入门示例**

> 1.  创建一个html页面，引入vue的库（vue官方提供了两种方式的库：开发模式库会>提示警告和报错信息，生产模式库是压缩后的比较小）。
> 2.  创建一个带有id的`<div>`，作为容器
> 3.  在js中编写vue代码，使用构造函数new Vue()创建一个Vue的VM
> 4.  使用el属性，让vue接管该id的区域
> 5.  在data属性中加入需要绑定的变量和变量的值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>快速入门</title>
            
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			{
       {message}}
    		</div>
    	</body>
    	<script>
    		//view model
    
    		// 创建VUE对象
    		new Vue({
          
    			el: "#app", // 由vue接管id为app的区域
    			data: {
           // data中的数据供el管理的容器内部使用
    				message: "hello vue!" // 变量名可以自定义，和页面中的变量名对应即可
    			}
    		});
    	</script>
    </html>

> 其中el表示element，值通常为一个css选择器，例如el:“\#app”、el:“.app”，也可以是直接找到的element对象el: document.getElementById(‘app’)。

> 运行之后，在浏览器控制台可以看到两个提示：

>  **1. 提示在浏览器安装vue的开发工具**   
> 解决方式：根据提示，在浏览器安装vue工具devtools  
>   
> **2. 提示当前使用的是vue开发模式库，不要在生产模式使用**   
> 在页面将vue.config的生产模式提示配置为false：>Vue.config.productionTip=false;，该属性在Vue 2.2.0之后才有  
>   
> **浏览器还会出现一个报错信息，找不到小图标favicon.ico，加入该图标即可。**  
> 提示：浏览器的报错信息在按F5刷新后可能就看不到了，这是因为浏览器并没有全部刷新，可以按住 shift + F5 强制刷新浏览器。
> 
>   
> VS Code可以安装一个Live Server插件，使当前工作空间的静态资源以WebServer形式运行

**容器和Vue对象是一对一的关系：**

> 1.  当两个Vue对象接管同一个容器时，只有第一个生效

<body>
        <div id="app">
            {
       {message}}
        </div>
    </body>
    <script>
        // 两个Vue对象接管同一个容器时，只有第一个生效。
        new Vue({
          
            el: "#app", 
            data: {
           
                message: "hello vue!" 
            }
        });
        
        new Vue({
          
            el: "#app", 
            data: {
           
                message: "vue" 
            }
        });
    </script>

> 1.  当一个Vue对象对应多个容器时，只对第一个容器接管

<body>
        
        <div class="app">
            {
       {message}}
        </div>
        
        <div class="app">
            {
       {message}}
        </div>
    </body>
    <script>
        new Vue({
          
            el: ".app", 
            data: {
           
                message: "hello vue!" 
            }
        });
    </script>

> 1.  多个Vue对象和多个容器，一一对应，可以正常的一对一接管

<body>
        <div id="app1">
            {
       {message}}
        </div>
        
        <div id="app2">
            {
       {message}}
        </div>
    </body>
    <script>
        // 可以正常接管app1容器
        const vm1 = new Vue({
          
            el: "#app1", 
            data: {
           
                message: "hello vue!" 
            }
        });
        
        // 可以正常接管app2容器
        const vm2 = new Vue({
          
            el: "#app2", 
            data: {
           
                message: "VUE" 
            }
        });
    </script>

**Vue代码和MVVM模型对应关系：**

> **M：**模型（Model），对应data中的数据  
> **V：**视图（View），页面模板  
> **VM：**视图模型（ViewModel），Vue实例对象

## 二、语法 ##

**插值表达式**

> 数据绑定最常见的形式就是使用"Mustache"语法（双大括号）的文本插值。vue提供了完全的javascript表达式支持。

{
        {
         2 + 1}} 
    
    {
        {
         ok ? 'YES' : 'NO'}}
    
    {
        {
         Date.now() }}

> 插值表达式的限制是：每个绑定只能包含单个表达式，所以下面的语句不会生效：

{
        {
         var a = 1}}
    
    {
        {
         if(ok) {
         return message } }}

**常用系统指令**

> **v-on :**  
> 可以使用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
> 
>   
> 例如：使用v-on:click处理onclick事件
> 
> 1.  在vue接管的div中添加一个button标签，标签使用v-on:click=“fun1(‘hello vue v-on’)”，为该button绑定一个点击事件，触发方法fun1，方法传值hello vue v-on。
> 2.  在vue的js代码中，添加methods属性，并在该属性内添加触发的方法定义

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>v-on:click</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       {message}}  
                
                
                
                
    			<button v-on:click="fun1('hello vue v-on')">vue的onclick</button>
    		</div>
    	</body>
    	<script>
    		//view model
    		new Vue({
          
    			el: "#app",
    			data: {
          
    				message: "hello vue"
    			},
    			methods: {
          
    				fun1:function (msg) {
          
                    // 或者简写为 
                    // fun1(msg) {
          
    					alert("hello");
    					this.message = msg;
    				}
    			}
    		})
    	</script>
    </html>

> 使用v-on:keydown绑定按键按下事件，使用$event作为参数获取事件对象：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>v-on:keydown</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    
    	<body>
    		<div id="app">
                
                
                
    			<input type="text" v-on:keydown="fun($event)">
    		</div>
    	</body>
    	<script>
    		new Vue({
          
    			el: "#app",
    			methods: {
          
                    // vue 中的event对象，和传统js中的event对象是一样的
    				fun:function(event) {
          
    					if(event.keyCode == 13) {
          
    						alert(1);
    					}
    				}
    			}
    		})
    	</script>
    </html>

> **v-on 可以简写为@，例如：**

> vue中为v-on提供了事件修饰符来处理dom事件细节，如event.preventDefault()、event.stopPropagation()。

> **vue 中阻止事件传播：**

> `<div id='parent'>内部有一个<div id='child'>`，此时如果鼠标移动到child上时，会先触发child绑定的鼠标移入事件；执行完child鼠标移入事件绑定的function后，会继续向上传播给parent，再触发parent上绑定的鼠标移入事件。

> 在传统js中，如果在执行了child的鼠标移入事件后，不想继续传播给parent，可以通过调用event对象的stopPropagation()终止事件的传播。

> 例如：

function childMouseOver() {
        
        alert('鼠标移动到child上了');
        event.stopPropagation();  // 终止事件的传播
    }
    
    function parentMouseOver() {
        
        alert('鼠标移动到parent上了');
    }

> 因为vue的event对象和传统js的event对象是相同的，所以在vue中，如果要阻止事件的传播，也可以使用该语句：

event.stopPropagation();

**事件修饰符**

> **vue通过由点（.）标示顿指令后缀来调用修饰符：**  
> ● .stop：阻止事件冒泡（向上层传播）。同js的event.stopPropagation()  
> ● .prevent：阻止事件的默认行为，例如`<a>`标签的跳转等。同js的event.preventDefault()  
> ● .capture：使用事件的捕获模式  
> ● .self：只有event.target是当前操作的元素时才触发事件  
> ● .once：事件只触发一次  
> ● .passive：事件的默认行为立即执行，无需等待事件回调执行完毕。例如：在有滚动条的页面使用@wheel监控鼠标的滚轮滚动事件，不加.passive时，需要等该事件绑定的函数执行完毕后，滚动条才会向下滚动；加上.passive后，即使滚轮绑定的函数没有执行完，滚动条也会立即开始滚动。

> 表单提交前验证（表单提交前，验证方法如果不通过，则不进行提交）：

> **传统的js：**
> 
> 1.  绑定一个方法到onsubmit事件，onsubmit需要使用return xxxxx()，否则即使验证不通过也依然会提交
> 2.  绑定的方法需要有一个明确的boolean类型返回值，验证通过返回true，验证不通过返回false

<!DOCTYPE html>
    <html>
    	<body>
    		<div id="app">
                
    			<form action="https://www.baidu.com" method="post" onsubmit="return checkForm()">
    				<input type="submit" value="提交">
    			</form>
    		</div>
    	</body>
    	<script>
    		function checkForm() {
          
    			alert(1);
    			// 表单验证必须有一个明确的boolean类型返回值
    			return false;
    		}
    	</script>
    </html>

> vue使用.prevent方式阻止表单提交：

<div id="app">
        
        <form @submit.prevent action="https://www.baidu.com" method="post">
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        // 需要vue接管该区域
        new Vue({
        
            el: '#app'
        });
    </script>

> vue调用.stop修饰符的方式阻止事件冒泡传播：child在parent里面，鼠标移入child时除了触发child的鼠标移入事件，也会冒泡给parent。但是加上.stop后，在执行完child的方法后，不再向上冒泡执行parent的方法。

> **vue使用.capture使用事件的捕获模式：**
> 
>   
> 未使用.capture时：事件捕获阶段：点击事件会先捕获到外面的div1，后捕获到里面的div2。事件冒泡阶段：先执行里面的div2的事件方法，再冒泡执行div1的事件方法。

<body>
        <div id="app">
            <div id="div1" @click="showMsg(1)">
                div1
                <div id="div2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
        
            el: '#app',
            methods: {
        
                showMsg(msg) {
        
                    console.log(msg);
                }
            }
        });
    </script>

> **在div1加上.capture，启用捕获模式：**
> 
>   
> 因为在捕获阶段是先捕获的外面的div1，所以加上.capture后，会先执行外面div1的绑定事件方法，后执行里面的div2事件方法

<body>
        <div id="app">
            <div id="div1" @click.capture="showMsg(1)">
                div1
                <div id="div2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
        
            el: '#app',
            methods: {
        
                showMsg(msg) {
        
                    console.log(msg);
                }
            }
        });
    </script>

> **事件修饰符可以流式处理，连续使用多个：**
> 
>   
> 例如：先阻止冒泡，再阻止弹窗

<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点击提示信息</a>

**按键修饰符**

> ● .enter  
> ● .tab  
> ● .delete（捕获“删除”和“退格”键）  
> ● .esc  
> ● .space  
> ● .up  
> ● .down  
> ● .left  
> ● .right  
> ● .ctrl  
> ● .alt  
> ● .shift  
> ● .meta（Windows按键）

> vue调用.enter获取回车键、调用delete获取删除键：

<body>
        <div id="app">
            test:<input type="text" @keydown.enter="fun1" @keydown.delete="fun2">
            <br>
            
    		test2:<input type="text" @keydown.alt.67="fun3">
        </div>
    </body>
    <script>
        new Vue({
        
            el: '#app',
            methods: {
        
                fun1: function () {
        
                    alert("按下了回车键");
                },
                fun2: function () {
        
                    alert("按下了删除键");
                },
                fun3: function () {
        
                    alert("同时按下了alt和C");
                }
            }
        });
    </script>

> 也可以使用按键的键名，例如：

@keydown.Enter // 此处的Enter是按键键名，vue中的enter是vue为该按键起的别名
    // 获取键名和键值的方式：
    let keyName = event.key;
    let keyCode = event.keyCode;
    
    // 该方式对单个单词的键名有效，例如Enter、Control
    // 对于多个单词组成的键名，需要将单词转成小写，单词间使用横线连接
    @keydown.CapsLock  // 该写法无效，因为CpasLock是两个单词
    @keydown.caps-lock // 该写法可以正常识别

> 或者使用键值进行修饰（不推荐）:
> 
>   
> 虽然部分浏览器还支持这种写法，但是将来可能会被移除。不推荐使用这种写法。不同用户的键盘键值可能也有差异。

@keydown.13 // 按下回车键

> 也可以自定义按键别名：（也不推荐）

Vue.config.keyCodes.自定义键名 = 键码

> 对于tab键，不适合使用keyup事件，因为tab键本身就会切换焦点，按下tab键后焦点就移动到其他地方去了。所以对于tab键，一般使用keydown事件。
> 
>   
> ctrl、alt、shift、meta是系统修饰键，配合keydown可以正常使用。但是如果配合keyup事件，需要按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发。
> 
>   
> methods中的this：

<body>
        <div id="app">
            <button v-on:click="showInfo">提示信息</button>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
        
            el: '#app',
            methods: {
        
                // 此处不建议使用箭头函数，因为如果使用箭头函数则this变为window，而不是Vue实例。
                // 如果是组件，那么this就是组件。使用了箭头函数就不再指向组件就会报错。
                showInfo(event) {
          // 和普通的绑定事件函数一样，该函数也有一个默认event事件参数
                    console.log(event.target.innerHTML); // 可以通过event事件获取相关内容
                    console.log(this);  // 此处的this是Vue实例
                }
            }
        });
    </script>

> methods中定义的函数最终也会被加进vm对象属性上。
> 
>   
> 所以，理论上，把showInfo写在data中也可以正常运行：

但是不推荐这么做。因为data中的内容vue是需要做数据代理的，但是methods中的内容不需要做数据代理也能运行。如果把函数写在data中，就会消耗资源让vue对函数做了没有意义的数据代理。

**v-text 和 v-html**

> 传统js的innerText和innerHTML：

window.onload = function () {
        
    	// innerText会将<h1>作为字符串输出
        document.getElementById("div1").innerText = '<h1>text</h1>';
        // innerHTML会解析<h1>，将innerHTML字符串加粗
        document.getElementById("div2").innerHTML = '<h1>innerHTML</h1>';
    }

> vue里面使用v-text、v-html进行处理：

<div id="app">
        
        <div v-text="message"></div>
        
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
        
            el: "#app",
            data: {
        
                message: "<h1>text</h1>"
            }
        });
    </script>

**v-bind**

> 插值语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
> 
>   
> 例如：将html的color属性设置成变量

<font size="5" color="{
        {myColor}}">text</font>

> 想要给Html标签属性设置变量，需要使用v-bind指令：

<body>
        <div id="app">
            <font size="5" v-bind:color="myColor1">text1</font>
            <font size="5" v-bind:color="myColor2">text2</font>
        </div>
    </body>
    <script>
        new Vue({
        
            el: '#app',
            data: {
        
                myColor1: "red",`在这里插入代码片`
                myColor2: "green"
            }
        });
    </script>

> v-bind指令也可以进行简写：

<font size="5" v-bind:color="myColor2">text2</font>
    
    <font size="5" :color="myColor2">text2</font>

> 绑定class属性时，普通的class和v-bind:class可以自动合并：

<div class="basic" :class="a"></div>
    
    
    <script>
        new Vue({
        
            data: {
        
                a: ['test1', 'test2', 'test3']
            }
        })
    </script>
    
    
    <div class='basic' :class='["test1", "test2", "test3"]'></div>
    
    
    <div class='basic' class='[a, b, c]'></div>
    <script>
        new Vue({
        
            data: {
        
                a: 'test1',
                b: 'test2',
                c: 'test3'
            }
        })
    </script>

> 绑定class的对象写法：

<div class='basic' :class="classObj"></div>
    <script>
        new Vue({
        
            data: {
        
                classObj: {
        
                    test1: true,  // 使用test1样式
                    test2: false  // 不使用test2样式
                }
            }
        });
    </script>
    
    
    <div class='basic' :class="{test1:true, test2:false}"></div>

> v-bind绑定style：

<body>
        <div id="app">
            
            <div id="basic2" style="font-size:40px;">aaa</div>
            
            
            <div id="basic" :style="{fontSize: fsize + 'px'}">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
        
            el: '#app',
            data: {
        
                fsize: 40
            }
        });
    </script>

> 也可以写成

<body>
        <div id="app">
             
            <div id="basic" :style="styleObj">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
        
            el: '#app',
            data: {
        
                // 将样式变量写成对象形式
                styleObj: {
        
                    // 属性名使用小驼峰写法
                    fontSize: '40px',
                    color:'red',
                    backgroundColor:'orange'
                }
            }
        });
    </script>

> style数组写法：

<body>
        <div id="app">
             
            <div id="basic" :style="[styleObj, styleObj2]">aaa</div>
        </div>
    </body>
    <script>
        const vm = new Vue({
        
            el: '#app',
            data: {
        
                styleObj: {
        
                    fontSize: '40px'
                }
                styleObj2: {
        
                    color:'red',
                    backgroundColor:'orange'
               
            }
        });
    </script>

**v-model**

> v-bind是单向的数据绑定：

<input type="text" v-bind:value="user.username"> <br>

> 使用v-model进行对象属性双向绑定：
> 
>   
> v-model只能用在表单类输入元素上。
> 
>   
> v-model:value可以简写为v-model，因为v-model收集的就是value属性值。

<body>
        <div id="app">
            <form action="" method="post">
                用户名: <input type="text" v-model:value="user.username"> <br>
                
                密码: <input type="text" v-model="user.password"> <br>
            </form>
        </div>
    </body>
    <script>
        new Vue({
        
            el: '#app',
            data: {
        
                user: {
        
                    username: 'tom',
                    password: '123456'
                }
            }
        });
    </script>

**v-for**

> 使用v-for遍历数组：

<body>
        <div id="app">
            
            <li v-for="(item) in list1">{
        {
        item}}</li>
            
            <li v-for="(item) in list2">{
        {
        item.username + ":" + item.age}}</li>
        </div>
    </body>
    <script>
        new Vue({
        
            el: '#app',
            data: {
        
                list1: ['tom', 'jane', 'marry'],
                list2: [
                    {
        username: 'tom', age: 10},
                    {
        username: 'jane', age: 30},
                    {
        username: 'marry', age: 18},
                ]
            }
        });
    </script>

> 也可以遍历成2个参数，第1个参数为项目值，第2个参数为在数组中的下标：

<li v-for="(item, index) in list1">{
        {
        index + ": " + item}}</li>

> 遍历对象：

<body>
    		<div id="app">
                
    			<li v-for="(value, key) in list3">{
        {
        key + ":" + value}}</li>
    		</div>
    	</body>
    	<script>
    		new Vue({
        
    			el: '#app',
    			data: {
        
    				list3: {
        
    					id: 1,
    					name: 'tom',
    					age: 19
    				}
    			}
    		});
    	</script>

> 遍历字符串：

<div id="app">
        <ul>
            <li v-for="(char, index) in str">{
        {
        index}}:{
        {
        char}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
        
            data: {
        
                str: "hello"
            }
        });
    </script>

> 遍历指定次数：

<li v-for="(value,index) in 5">{
        {
        index}}:{
        {
        value}}</li>

> 双层循环

<body>
        <div id="app">
            <table>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>年龄</td>
                </tr>
                
                <tr v-for="(item, index) in list2">
                    <td>{
        {
        index}}</td>
                    
                    <td v-for="(value, key) in item">{
        {
        key + ":" + value}}</td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        new Vue({
        
            el: '#app',
            data: {
        
                list2: [
                    {
        username: 'tom', age: 10},
                    {
        username: 'jane', age: 30},
                    {
        username: 'marry', age: 18},
                ]
            }
        });
    </script>

> v-for为每个数据添加key：

<body>
        <div id="app">
            <h2>人员列表</h2>
            <ul>
                
                <li v-for="p in persons" :key="p.id">{
        {
        p.name}}-{
        {
        p.age}}</li>
            </ul>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
        
            el: '#app',
            data: {
        
                persons: [
                    {
        
                        id: 1,
                        name: '张三',
                        age: 18
                    },
                    {
        
                        id: 2,
                        name: '李四',
                        age: 20
                    },
                    {
        
                        id: 3,
                        name: '王五',
                        age: 30
                    }
                ]
            }
        });
    </script>

> 也可以将索引值定义为key：

<li v-for="(p,i) in persons" :key="i">{
        {
        p.name}}-{
        {
        p.age}}</li>

Key的内部原理：

在虚拟DOM中，key是虚拟DOM对象的标识。

当状态中的数据发生变化时，Vue会根据“新数据”生成“新的虚拟DOM”，随后Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较，比较规则为：

*  旧虚拟DOM中找到了与新虚拟DOM相同的key：
    
     *  若虚拟DOM中内容没变，直接使用之前的真实DOM
     *  若虚拟DOM中内容变了，则直接生成新的真实DOM，随后替换到页面中之前的真实DOM
 *  旧虚拟DOM中未找到与新虚拟DOM相同的key：
    
     *  创建新的真实DOM，随后渲染到页面

用index索引值作为key可能会引发的问题：

*  若对数据进行逆序添加（不从尾部追加）、逆序删除（不是从后往前删除）等破坏顺序的操作，会产生没有必要的真实DOM更新，结果界面效果没有问题，但是效率变低
 *  如果同时数据中还包含输入类的DOM，则会产生错误的DOM更新，致使界面错乱

开发中如何选择key：

*  最好使用每条数据的唯一标识作为key，例如id等
 *  如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

当v-for标签中没有写key时，vue会默认使用index作为key。

v-for里面可以使用of代替in，效果一样：

<li v-for="p in persons" :key="p.id">{
        {
        p.name}}-{
        {
        p.age}}</li>
    <li v-for="p of persons" :key="p.id">{
        {
        p.name}}-{
        {
        p.age}}</li>

示例：列表过滤并排序：

<body>
        <div id="app">
            <h2>列表过滤并排序</h2>
            <input type="text" placeholder="请输入名字" v-model="keyWord">
            <button @click="sortType = 1">年龄升序</button>
            <button @click="sortType = 2">年龄降序</button>
            <button @click="sortType = 0">原顺序</button>
            <ul>
                <li v-for="(p,index) of fillPersons">
                    {
        {
        p.name}}-{
        {
        p.age}}-{
        {
        p.sex}}
                </li>
            </ul>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
        
            el: '#app',
            data: {
        
                keyWord:'',
                sortType:0, // 0:原顺序，1：升序，2：降序
                persons: [
                    {
        id:'001', name:'马冬梅', age: 19, sex:'女'},
                    {
        id:'002', name:'周冬雨', age: 20, sex:'女'},                
                    {
        id:'004', name:'温兆伦', age: 22, sex:'男'},
                    {
        id:'003', name:'周杰伦', age: 21, sex:'男'}
                ]
            },
            computed: {
        
                fillPersons() {
        
                    const arr = this.persons.filter((p) => {
        
                        return p.name.indexOf(this.keyWord) !== -1;
                    });
                    if(this.sortType) {
        
                        arr.sort((a,b) => {
        
                            return this.sortType === 1 ? b.age-a.age : a.age-b.age;
                        });                    
                    }
                    return arr;
                }
            }
        });
    </script>

**v-if**

> 条件渲染指令：v-if、v-else-if、v-else，v-show。
> 
>   
> v-show做条件渲染，判断是否展示该标签：

<h2 v-show='true'>aaa</h2>
    
    <h2 v-show='1 == 2'>aaa</h2>
    
    <h2 v-show='a'>aaa</h2>
    <script>
        new Vue({
        
            data: {
        
                a: true
            }
        });
    </script>

> v-if做条件渲染：

<h2 v-if='true'>aaa</h2>

> v-if如果为false时，该标签不再渲染出来。v-show为false时，会将该标签设置为display:none。
> 
>   
> 如果变量的值变化频繁，建议使用v-show，因为v-show的标签已经渲染出来，只是设置了display属性是否展示。
> 
>   
> else的用法：

<div v-if="n === 1">
        Angular
    </div>
    <div v-else-if="n === 2">
        React
    </div>
    <div v-else-if="n === 3">
        Vue
    </div>
    <div v-else>
        abc
    </div>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[b2c82ce3a6f0488cadcae695cdb7c0fa.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/a5740674c3984071bc1c8e8a0771866c.jpeg