vue知识点总结

MVVM和MVC:

什么是mvvm和mvc

mvvm:model view view-model

mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

mvc:model view controller

mvvm 和 mvc 区别

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View

v-bind和v-model的区别

1.v-bind用来绑定数据和属性以及表达式,缩写为‘:‘

2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用

vue-router 有哪几种导航钩子?

三种

全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnter

active-class 是哪个组件的属性?

vue-router 模块的router-link组件

vue的优点:

1:低耦合

视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当       Model 变化的时候 View 也可以不变。

2:独立开发

  开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计         界面并生成 xml 代码。

3:可重用性

  可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。

4:可测试

  界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写

简述vue生命周期的理解:

共8个阶段:创建前后,载入前后,更新前后,销毁前后

创建前/后:beforecreate阶段,vue实例的挂载元素el还没有

载入前/后:beforemount阶段,1vue实例的el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染

更新前/后:当data变化时,会触发beforeupdate和updated方法

销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及dom的绑定,但是dom结构依然存在

路由之间跳转:

声明式(标签跳转)<router-link to="index">

编程式(js跳转) router.push(“index”)

懒加载(按需加载路由)

  wbepack中提供了require.ensure()来实现按需加载,以前引入路由是通过import的方式引入,改为const定义的方式进行引入

不进行页面按需加载引入方式:

import home form‘../../common/home.vue‘

进行按需加载的引入方式:

const home = r => require.ensure([],() = >r (require(‘../../commmon/home.vue‘)))

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令:在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令:directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数: el、binding

至少 4 种 vue 当中的指令和它的用法:

v-if(判断是否隐藏),v-for(把数据遍历出来),v-bind(绑定属性),v-model(实现双向绑定)

  

原文地址:https://www.cnblogs.com/3542446186qq/p/10816507.html

时间: 2024-10-04 12:33:26

vue知识点总结的相关文章

Vue面试中,经常会被问到的面试题/Vue知识点整理

看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数据模型转化成UI 展现出

vue知识点(工作中遇到)

1.vue点击按钮动态添加多个input,并获取输入的值 <template> <div> <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i"> <button @click="onAdd">添加</button> </div> </te

Vue知识点汇

Vue的核心特性之一是双向绑定,vue的响应式原理是实现了数据->视图 v-model是一个指令,限制在<input>.<select>.<textarea>.components中使用,修饰符.lazy(取代 input 监听 change 事件)..number(输入字符串转为有效的数字)..trim(输入首尾空格过滤). 原文地址:https://www.cnblogs.com/yk-ddm/p/10983087.html

vue知识点积累

vue中 列表组件写key,起作用是什么? <ul> <li v-for="item in items" :key="item.id">...</li> </ul> key作为一个特殊属性其作用用于虚拟DOM,对比新旧vnodes,重新排列数组,移除key不存在的元素,如果不使用key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. 原文地址:https://www.cnblog

Vue 知识点个人总结

Vue 脚手架 脚手架 3 的版本 ---- webpack 4 cnpm install -g @vue/cli-----全局安装组件 vue create myapp-----命令行创建项目 或者使用  vue ui--------界面UI创建项目 脚手架 2 的版本 ---- webpack 3 npm install -g @vue/cli-init vue init webpack myapp2 数据的双向绑定 原理 1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变

vue知识点-$route和$router

一.$route表示当前路由信息对象 表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录 路由信息对象:即$router会被注入每个组件中,可以利用它进行一些信息的获取 1)$route.path: 字符串,对应当前路由的路径,总是解析为绝对路径:'/foo/bar' 2)$route.params 一个key/value对象,包含了动态片段和全匹配片段 如果没有路由参数,就是一个空对象 3)$route.query 一个key/value对象,表示URL查

vue 知识点

vscode 常见的设置 1.保存时样式错乱问题 https://www.waitig.com/%E8%A7%A3%E5%86%B3vs-code%E4%BF%9D%E5%AD%98%E6%97%B6%E5%80%99%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96.html 2.全局安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org如果失败加上sudo

vue知识点

①一般更新依赖的时候不要指定淘宝的镜像,因为可能会导致项目不稳定.比如:修改内容后页面不能自动刷新.

Vue知识点-改变路由的哈希模式(去掉路由中的#)

1.改变路由的哈希模式(在路由中会出现#): 在src/router/index.js中 创建路由对象: const routes = [ {path:"",redirect:"/home"}, {path:"/home",component:Home}, {path:"/cart",comsponent:Cart}, {path:"/profile",component:Profile}, {path:&