关于vue.js的部分总结
1.MVVM和MVC的区别:
MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型
模型:后端传递的数据
试图:所看到的页面
视图模型:mvvm模式的核心,它是连接view和model的桥梁。
两个实现方向:
1)模型===》视图:后端传递的数据转化成所看到的页面,实现方式(数据绑定)
2)视图===》模型:即将所看到的页面转化成后端的数据,实现的方式是(DOM 事件监听)
MVC:MVC是Model-View-Controller的简写,即模型-视图-控制器
controller指的是页面业务逻辑,使用MVC的目的就是将M和V代码分离 使用MVVM模式有几大好处:
1). 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2). 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
3). 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
4). 可测试性。可以针对ViewModel来对界面(View)进行测试 2.vue的生命周期
八个:创建前、创建后、载入前、载入后、更新前、更新后、销毁前、销毁后
生命周期的作用:让我们在控制整个Vue实例的过程时更容易形成好的逻辑
DOM 渲染在 载入后(mounted) 中就已经完成了。 3.vue实现双向绑定原理
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。 4.Vue组件间的参数传递
1)父组件与子组件传值
父===》子:子组件通过props方法接受数据;
子===》父:子组件通过$emit方法传递参数,触发父组件event
2)非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件
VUEX项目较大时 5.Vue与React的区别 6.vue路由的钩子函数
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。
一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to、from、next
to:route即将进入的目标路由对象
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
全局导航钩子:
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子:
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件:
beforeEnter 7.vuex是什么?怎么使用?哪种功能场景使用它?
只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。
在main.js引入store,注入。新建了一个目录store,….. export 。
场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车 vuex 的mutation和action的特性是什么?有什么区别?
mutation用于修改state的数据,是同步的。
action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作 8.css只在当前组件起作用
在style标签中写入scoped即可:<style scoped></style> 9.v-if 和 v-show 区别
v-if按照条件是否渲染,v-show是display的block或none
v-show的值无论为true或false,元素都会存在与html代码中,而只有当v-if的值为true,元素才会存在HTML中
v-show指令只是设置了元素css的style值 10.$route和$router的区别
$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数
$router是“路由实例”对象包括了路由的跳转方法,钩子函数等 11.vue.js的两个核心是什么?vue几种常用的指令?
数据驱动、组件系统
指令:v-for、v-if、v-bind、v-on、v-show、v-else 12.vue常用的修饰符?
prevent:提交事件不再重载页面
stop:阻止事件冒泡
self:当事件发生在该元素本身而不是子元素的时候会触发
capture:事件侦听,事件发生的时候会调用 13.对keep-alive的了解
keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
keep-alive加入了两个属性:include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) <keep-alive include='include_components' exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
参数解释:
include - 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。 13.vue.js是什么?
是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,
Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 14.vue.js特性
MVVM、组件化、指令系统、支持虚拟DOM
虚拟dom:虚拟DOM是用Object来代表一颗节点,这个Object叫做VNode,然后使用两个VNode进行对比,根据对比后的结果修改真实DOM。
每次渲染都会生成一个新的VNode,然后和上一次渲染时用的VNode进行对比。然后将这一次新生成的VNode缓存,用来进行下一次对比。
虚拟dom的缺点:
1. 代码更多,体积更大
2. 内存占用增大
3. 小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom快 15.vue.js的特点
简洁:页面由HTML模板+Json数据+Vue实例组成
数据驱动:自动计算属性和追踪依赖的模板表达式
组件化:用可复用、解耦的组件来构造页面
轻量:代码量小,不依赖其他库
快速:精确有效批量DOM更新
模板友好:可通过npm,bower等多种方式安装,很容易融入 16.Vue 项目时为什么要在组件中写 key,其作用是什么?
在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。
在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,
从而减少不必要的元素重渲染。 17.computed 和 watched 的区别:
computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。 18.axios是什么?怎么使用?描述使用它实现登录功能的流程?
请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,
失败则是在.catch函数中
关于vue.js的部分总结的更多相关文章
- Vue.js 和 MVVM 小细节
		
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
 - Vue.js 2.0 和 React、Augular等其他框架的全方位对比
		
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
 - 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
		
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
 - vue.js学习笔记
		
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
 - 从Vue.js窥探前端行业
		
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
 - vue.js初探
		
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
 - vue.js几行实现的简单的todo list
		
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
 - Vue.js——60分钟组件快速入门(上篇)
		
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
 - Vue.js——60分钟快速入门
		
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
 - Vue.js——vue-router 60分钟快速入门
		
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
 
随机推荐
- React vs. Angular vs. Vue
			
原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...
 - java的servlet执行过程是怎么样的?
			
java的servlet执行过程是怎么样 答: Servlet执行过程:程序第一次访问,会调用servlet的init()方法初始化(只执行一次),每次程序执行都会根据请求调用doGet()或者d ...
 - 查看QML数据类型
			
assist输入: QML Types A Abstract3DSeries AbstractActionInput AbstractAnimation AbstractAxis AbstractAx ...
 - centOS 8 安装Hadoop
			
1.安装环境 本教程使用 CentOS 8 64位 作为系统环境,请自行安装系统. 本教程基于原生 Hadoop 2,在 Hadoop 2.8.5 版本下验证通过,可适合任何 Hadoop 2.x.y ...
 - Python - Django - 使用 Bootstrap 样式修改书籍列表
			
展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bo ...
 - 为什么要用k8s
			
经过几次面试,发现有的公司没有用过k8s,有的公司正在用,但是都问了共同的问题:k8s的好处在哪里.所以总结了一下几点 1.故障迁移:当某一个node节点关机或挂掉后,node节点上的服务会自动转移到 ...
 - Java中使用队列Queue
			
示例代码: Queue<Integer> queue = new LinkedList<Integer>(); for (int i = 1; i <= 100; i + ...
 - iOS-检测网络可连接性
			
#pragma mark - 监测网络的可链接性+ (void)netWorkReachabilityWithURLString:(NSString *)strUrl{ AFHTTPReques ...
 - .Net Core 常用开发工具
			
组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 Visual ...
 - 斑马打印机和欧姆龙CP1H串口通信打印
			
欧姆龙CP1HPLC和斑马打印机通信 1. PLC 1.1PLC型号 CP1H 1.2通信方式 232通信,使用232扩展卡槽CP1W-CIF01. CP1W-CIF01是RS232选件板,通信距离最 ...