VUE知识点2

VIP文章管理人

于 2022-10-25 09:07:38 发布

阅读量303

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52957570/article/details/127506683

版权

1. 什么是vue

Vue.js是一套构建用户界面的渐进式框架。其核心理念是，组件化开发，数据驱动视图。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.什么是mvc和mvvm

（1）MVC 是后端的分层开发概念;

其中M是model层：负责操纵数据库。V是view层：视图层，发送请求，接收响应。C是controller，是业务逻辑处理层，接收请求和返回响应。
（2）MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

其中中M为model层：数据层保存数据，V是view层是页面的HTML结构。VM是一个调度者，链接M与V

3.框架和库的区别

（1）框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
（2）库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

4.插值表达式

{ {msg}}

5.vue指令界面防止闪烁

v-cloak

6.vue指令v-html和v-text的区别

1.v-html：可以解析富文本，可以渲染html界面
2.v-text：会替换掉元素里的内容

7.vue指令-属性绑定及简写

v-bind 简写：

8.vue指令-事件绑定及简写

v-on 简写@

9.vue事件修饰符

1.阻止冒泡
@事件类型.stop=“方法”
2.阻止默认事件
@事件类型.prevent=“方法”
3.添加事件侦听器时使用事件捕获模式
@事件类型.capture=“方法”
4.事件只触发一次
@事件类型.once=“方法”
5.只当事件在该元素本身触发时触发回调
@事件类型.self=“方法”

10.vue指令-双向数据绑定

v-model

原理：采用数据劫持结合‘发布者——订阅者’模式，通过Object.defineProperty()对每个属性的get和set进行拦截。在数据发生变化的时候发布消息给订阅者，触发相应的监听回调

11.vue指令-循环渲染

v-for

12.vue指令-显示隐藏

v-show

13.vue指令-v-for如何遍历对象、数组、数字

1.遍历数组，参数(item,index) in list
<div v-for=‘(item,index) in list’ :key='index'></div>
list是在data中定义的数组，循环的次数为数组中元素的个数

2.遍历对象，参数(value,key,index) in obj
<div v-for=‘(value,key,index) in obj’ :key='index'></div>
obj是在data中定义的对象，循环的次数为对象中属性的个数

3.遍历数字，num in 10
<div v-for=‘num in 10’ :key='num'></div>

14.vue指令-v-for为什么设置key