2022-08-28 第六小组 高佳誉 学习笔记
VUE
重点
- 定义
- MVVM设计模式
- 指令
思维导图
知识点
1. 定义
第三方开发的，基于MVVM设计模式的，渐进式的，纯前端js框架
渐进式的：可以逐步在项目中使用vue的部分功能，可以轻松和其他技术混搭------强烈不建议
纯前端js框架：与后端node.js毫无关系。只靠浏览器就可以执行
以数据操作（增删改查）为主的项目，都可以用vue框架来实现。比如：电商、新闻、微博、知乎、协同办公、管理系统、官网。
框架和库的区别：库指的是工具的集合，我们可以选中其中某些来使用。eg:函数库 jquery
框架：可以帮我们自动化的完成很多重复性的任务。避免重复编码。
原生 浏览器自带的 dom
2. MVVM设计模式
对前端三大内容进行了重新划分
界面 view
包含了html+css,它支持变量、分支、循环等程序必要的要素
模型对象 Model
专门为界面保存所需的变量和函数的特殊对象。
ViewModel对象
专门负责将界面和模型对象绑定起来。
它可以自动将模型对象中的变量值和函数，送到界面上所需的位置
它能监视程序中变量的变化，只要变量值发生变化，它自动保持界面上显示的值与程序中的变量值始终一致。
3. v-bind指令
元素的属性值随着程序自动变化，用：代替{{}}，这里：承担了{{}}的功能，它也是js语法
格式：<元素 v-bind:属性名=“变量或js表达式”> ------原版
<元素 :属性名="变量或js表达式"> -------简化版
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>今天的空气质量：</h3>
<!-- 需求：pm25<100 1.png,pm25<200 2.png,pm25<300 3.png,其他4.png-->
<!-- <img src="img/1.png"> -->
<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
</div>
<script>
new Vue({
el:"#app",
data:{
//pm25后面的数值不同，图片也不同
pm25:200
}
})
</script>
</body>
</html>
4. v-show指令
定义：专门控制一个元素显示隐藏的指令
何时用：只要希望用程序控制一个元素显示隐藏时
格式：<元素 v-show="变量或条件表达式">
原理：只要new Vue()扫描到v-show所在的元素，就先计算“”中的变量或条件·表达式。
a.如果条件为true,当前元素正常显示。
b.如果条件为false,new Vue()自动给当前元素加display:none,让原宿1隐藏。
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
#pop{
position:fixed;
top:20%;
left:50%;
width:300px;
height:100px;
margin-left:-150px;
margin-top:-50px;
background-color:lightBlue
}
#pop>a{
float:right;
margin-right:20px;
text-decoration:none;
}
</style>
</head>
<body>
<!--
寻找哪里可能随程序变化
本例中: div的显示隐藏状态随程序自动变化，所以用v-show标记出来。
寻找哪里可能触发事件
本例中: 点button，会让div显示；点a，让div隐藏 -->
<div id="app">
<button @click="show">click me</button>
<div id="pop" v-show="isShow">
<a href="javascript:;" @click="hide">x</a>
</div>
</div>
<script>
new Vue({
el:"#app",
//3.创建模型对象
//3.1 创建data对象，保存所有界面中所需要的变量
//本例中，界面只需要一个isshow变量来标记div是否显示
data:{
isShow:false //开局，div默认不显示
},
//3.2创建methods对象，保存界面所需的所有事件处理函数
methods:{
show(){//事件处理函数中，通过修改data中的变量值，来遥控界面中的变化
this.isShow=true;
},
hide(){
this.isShow=false;
}
}
})
</script>
</body>
</html>
5. v-for指令
定义：专门反复生成一组连续的结构相同的元素的特殊指令
何时用：只要在页面中需要连续反复生成多个结构相同的元素时
格式：<要反复生成的元素 v-for="(元素，下标i) of/in 数组">
注意：v-for一定要写在反复生成的元素上，不要写在父元素上。
按照严格的规定，of前的两个变量必须包裹在（）中
vue中的v-for统一了js中的for of和for in，所以，用of/in都可以，效果是一样的.
v-for即可遍历索引数组，又可遍历对象
of/in前的两个变量，每个变量都可随意修改，但是顺序不能变，第一个变量接值，第二个变量接下标或属性
原理：new Vue()扫描到v-for时，就会自动遍历of或in后的数组或对象中每个成员
每遍历数组或对象中的一个成员，就会创建当前元素的一个副本。
同时，还会将当前成员的值，赋值给of/in前的第一个变量，再将当前成员的下标或属性名，赋值给of/in前的第二个变量
of/in前的变量，虽然没有定义在data中，但是依然可以用于当前元素及其子元素中的绑定或指令中。
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"> </script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(name,i) of arr">第{{i+1}}阶段：{{name}}</li>
</ul>
<hr/>
<!-- for in循环知识点 -->
<li v-for="(value,key) of lilei">{{key}}：{{value}}</li>
</div>
<script>
new Vue({
el:"#app",
data:{
arr:["lili","zhaozhao","wangwang"],
lilei:{
sname:"Li lei",
sage:11,
className:"初一二班"
}
}
})
</script>
</body>
</html>
掌握程度
掌握的情况较为良好练 自我建议：勤加巩固。
收获
明辨是非遵从的只是自己内心的是与非，这无关紧要，但要明确的知道自己身边的朋友应该是什么样的
学习效果展示
浙公网安备 33010602011771号