day01 vue的基础使用-CSDN博客

本文链接：https://blog.csdn.net/Radsta/article/details/133931630

一、Vue知识点总结第一天

一、什么是vue？

核心理念：数据驱动视图，组件化开发
1、用于构建用户页面的渐进式框架
2、自底向上逐层应用
3、Vue核心库只关心视图层

二、为什么学习流行框架？

1、轻量级框架：只关注视图层
2、简单易学：国人开发中文文档，易于理解和学习
3、视图、数据、结构分离；使操作数据更简单
4、不需要进行逻辑代码的修改。只需要操作数据就能完成相关操作
5、虚拟DOM：不在使用原生的dom节点，极大解放dom操作
6、运行速度更快

三、框架和库的区别：

3.1框架

1、完整的解决方案
2、对项目侵入性较大
3、更换框架需要重构整个项目

3.2库

1、提供一小部分功能
2、对项目侵入性较小
3、更换功能切换其他库即可

四、MVC和MVVM的区别：

4.1MVC

1、model-View-Controller（后端分层开发概念）
v（view 视图层）展示数据，发送请求->C（controller调度层）接收数据，相应数据->M（model模型层）处理数据和数据库进行交换数据->数据库

4.2MVVM

V（view视图层）展示数据->VM（view-model）连接view和model->M（model 模型层）进行数据处理

五、vue的代码结构

<script>
 let vm = new Vue({
 el: "#app", // 控制区域
 data: { // 存放数据
 	}
 methods: { // 存放的⽅法
 	}
 })
</script>

六、差值表达式、v-text、v-html

6.1差值表达式{{}}

可以插入内容进行简单的计算

6.2、v-text、v-html

v-text：类似于js中的innerText覆盖元素中的内容
v-html：类似于js中的innerHTML，可识别富文本

6.3、v-text和v-html的异同

相同点：都会覆盖元素
不同点：v-html可以解析富文本

七、v-bind

v-bind:src（属性绑定）；简写:src

八、v-on

v-on:事件类型（事件绑定）；简写@:事件类型

九、事件修饰符

9.1、.stop

阻止冒泡从里往外

9.2、.prevent

阻止默认事件

9.3、.capture

阻止捕获事件

9.4、.self

事件本身才触发

9.5、.once

事件触发一次

十、v-model数据双向绑定

原理：通过劫持结合发布的订阅者模式和object.defineproprety（）劫持各个属性的setter和getter；当数据发生变化时就发送消息给订阅者触发监听。

十一、vue中样式的使用

11.1、使用class样式

1、数组 :class=“[class1,class2]”
2、三目表达式 :class=“age<18?class1:class2”
3、对象 :class{red:ture}
对象的键是属性的名字，值是Booleam类型
4、数组内置对象 :class=“[{‘red’:true},{fs30:false}]”

11.2、使用内联样式

1、直接写在元素上通过:style的形式，书写样式对象

<div :style="{color : 'red','font-size' : '30px'}">

2、将样式对象，定义到data中，并直接引用到:style中

<body>
 <div id="app">
 <div :style=style1>红⾊字体</div>
 <div :style=style2>字号30px、字体加粗</div>
 </div>
</body>
<script>
 let vm = new Vue({
 		el: "#app",
 		data: {
 			style1: 'color:red',
 			style2: {
 				fontSize: "30px",
 				"font-weight": 700
 						}
 				},
		 methods: {}
 })
</script>

3、在:style中通过数组，引用多个data上的样式对象
4、在:style 中通过函数返回对象

十二、v-for和key属性

12.1、遍历数组

<body>
 <div id="app">
 <!-- item：数组的每⼀项 index：数组的索引（索引从0开始） -->
 <div v-for="(item,index) in list" :key="item">{{item}}</div>
 </div>
</body>
<script>
 let vm = new Vue({
 	el: "#app",
 	data: {
 		list: [
 				1, 2, 3, 4
 				]
 		},
 	methods: {}
 })
</script>

12.2、遍历对象

<body>
 <div id="app">
 <!-- value：值 key：键 index：索引 -->
 <div v-for="(value,key,index) in obj" :key="value">{{value}}</div>
 </div>
</body>
<script>
 let vm = new Vue({
 	el: "#app",
 	data: {
 	obj: {
 		name1: '⼩明',
 		name2: '⼩红',
 		name3: '⼩花',
 		name4: '⼩亮',
 		}
 	},
 	methods: {}
 })
</script>

12.3、遍历数字

<!-- 索引从1开始 -->
<div v-for="num in 10">{{num}}</div>

12.4、key

1、key只能是字符串或者数字 2、key值是唯一的 3、key作用：提高重排效率，就地复用

十三、v-if和v-show（显示隐藏元素）

v-if通过删除dom元素来实现，v-show是设置display:none来实现
只修改⼀次的时候可以使⽤v-if，频繁切换的时候可以使⽤v-show