在这里插入图片描述

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

文章目录

前言

📋前言📋
💝博客：【无聊大侠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>
        <!-- 引入vue的库 -->
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- vue的插值表达式，将vue的data定义的变量值显示到这里 -->
			{{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>
    <!-- Vue对象选中了多个容器，只对第一个容器生效 -->
    <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'}}
<!-- 其他js表达式 -->
{{ 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}}  
            
            <!-- 绑定的事件函数如果直接写成fun1，不加参数，则会默认传入一个event事件 -->
            <!-- 但是如果使用 fun1('aaa') 传入了一个参数，那么event就没有了 -->
            <!-- 如果还想传入event参数，可以写成 fun1('aaa', $event) -->
			<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">
            <!-- 绑定的方法只写了方法名，不写参数时，会默认传入一个event事件参数 -->
            <!-- <input type="text" v-on:keydown="fun"> -->
            <!-- 向vue方法传递event对象时，也可以使用$event进行传值 -->
			<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 可以简写为@，例如：

<input type="text" v-on:keydown="fun($event)">

<!-- 简写 -->
<input type="text" @keydown="fun($event)">

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">
            <!-- 此处的onsubmit需要使用 return checkForm()。 -->
			<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">
    <!-- 使用.prevent阻止表单提交 -->
    <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的方法。

<div id='child' @mouseover.stop="fun2($event)"></div>

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>
        <!-- alt+C 组合键 -->
		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中也可以正常运行： 

const vm = new Vue({
    el: '#app',
    data: {  // 把方法写在data中也可以正常运行
        showInfo(event) {
            console.log(event.target.innerHTML);
            console.log(this);
        }
    }
});

但是不推荐这么做。因为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">
    <!-- 功能类似innerText -->
    <div v-text="message"></div>
    <!-- 功能类似innerHTML -->
    <div v-html="message"></div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "<h1>text</h1>"
        }
    });
</script>

v-bind

插值语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。


例如：将html的color属性设置成变量 

<!-- 在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可以自动合并：

<!-- 如果a变量的值为normal，则最终生成的class会自动合并为：class='basic normal' -->
<div class="basic" :class="a"></div>

<!-- class绑定的变量a可以是数组，将数组中的每一项都加到class中 -->
<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的对象写法：

<!-- class绑定的变量是一个对象，对象内部属性是样式名称 -->
<div class='basic' :class="classObj"></div>
<script>
    new Vue({
        data: {
            classObj: {
                test1: true,  // 使用test1样式
                test2: false  // 不使用test2样式
            }
        }
    });
</script>

<!-- 也可以直接在class上绑定 -->
<div class='basic' :class="{test1:true, test2:false}"></div>

v-bind绑定style：

<body>
    <div id="app">
        <!-- 原始html写法 -->
        <div id="basic2" style="font-size:40px;">aaa</div>
        <!-- vue写法 -->
        <!-- style加上大括号做成对象，font-size换成小驼峰写法 -->
        <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是单向的数据绑定：

<!-- v-bind可以将vue中的变量绑定到标签属性上，但是标签值变化时不能更新vue中变量的值 -->
<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>
            <!-- v-model:value可以简写成v-model -->
            密码: <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">
            <!-- 第1个参数为值，第2个参数为key -->
			<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>

遍历指定次数：

<!-- 遍历5次：value为从1开始递增的数字，index为从0开始递增的数字 -->
<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>
                <!-- 第2层循环，遍历学生的每个属性 -->
                <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>
            <!-- 为列表项动态绑定key -->
            <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：

<!-- v-for第二个参数为index，可以将索引值定义为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，效果一样：

<!-- in 和 of 效果完全一样 -->
<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做条件渲染，判断是否展示该标签： 

<!-- v-show中使用布尔值 -->
<h2 v-show='true'>aaa</h2>
<!-- v-show使用表达式 -->
<h2 v-show='1 == 2'>aaa</h2>
<!-- v-show绑定变量 -->
<h2 v-show='a'>aaa</h2>
<script>
    new Vue({
        data: {
            a: true
        }
    });
</script>

v-if做条件渲染：

<!-- v-if中使用布尔值 -->
<h2 v-if='true'>aaa</h2>
<!-- v-if也可以使用表达式、变量 -->

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>

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

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign