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的部分总结的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  4. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  5. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  6. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  7. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  8. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  10. Vue.js——vue-router 60分钟快速入门

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

随机推荐

  1. React vs. Angular vs. Vue

    原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...

  2. java的servlet执行过程是怎么样的?

    java的servlet执行过程是怎么样   答: Servlet执行过程:程序第一次访问,会调用servlet的init()方法初始化(只执行一次),每次程序执行都会根据请求调用doGet()或者d ...

  3. 查看QML数据类型

    assist输入: QML Types A Abstract3DSeries AbstractActionInput AbstractAnimation AbstractAxis AbstractAx ...

  4. centOS 8 安装Hadoop

    1.安装环境 本教程使用 CentOS 8 64位 作为系统环境,请自行安装系统. 本教程基于原生 Hadoop 2,在 Hadoop 2.8.5 版本下验证通过,可适合任何 Hadoop 2.x.y ...

  5. Python - Django - 使用 Bootstrap 样式修改书籍列表

    展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bo ...

  6. 为什么要用k8s

    经过几次面试,发现有的公司没有用过k8s,有的公司正在用,但是都问了共同的问题:k8s的好处在哪里.所以总结了一下几点 1.故障迁移:当某一个node节点关机或挂掉后,node节点上的服务会自动转移到 ...

  7. Java中使用队列Queue

    示例代码: Queue<Integer> queue = new LinkedList<Integer>(); for (int i = 1; i <= 100; i + ...

  8. iOS-检测网络可连接性

    #pragma mark - 监测网络的可链接性+ (void)netWorkReachabilityWithURLString:(NSString *)strUrl{    AFHTTPReques ...

  9. .Net Core 常用开发工具

    组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 Visual ...

  10. 斑马打印机和欧姆龙CP1H串口通信打印

    欧姆龙CP1HPLC和斑马打印机通信 1. PLC 1.1PLC型号 CP1H 1.2通信方式 232通信,使用232扩展卡槽CP1W-CIF01. CP1W-CIF01是RS232选件板,通信距离最 ...