前端框架及项目面试 vue使用

news/2024/7/10 2:18:34 标签: vue

vue_0">1.vue的基本使用

模板(指令、插值)
指令、动态属性
v-html:会有XSS风险,会覆盖子组件
computed:有缓存,data不变,则不会重新计算
watch如何深度监听?
watch监听引用类型,拿不到oldVal
class和style

2.条件渲染

v-if v-else的用法,可使用变量,也可以使用===表达式
v-show
如何遍历对象?——也可以用v-for
key 的重要性,key不能乱写,但是必须得有(如random或者index)
v-for和v-if不能一起使用

3.事件

event 参数,自定义参数,是原生的,事件被挂载到当前元素

4.事件修饰符

v-on:click.stop=“doThis” 阻止单击事件继续传播
v-on: submit.prevent=“onSubmit” 提交事件不在重载页面
v-on:click.stop.prevent=“doThat” 修饰符可以串联
v-on:submit.prevent 只有修饰符
v-on:click.capture=“doThis” 添加事件监听器时使用事件捕获模式,就是内部元素触发的事件现在此处理,然后才交由内部元素进行处理
v-on:click.self=“doThat” 只当在event.target是当前元素自身时触发处理函数,就是事件不是从内部元素触发的

5.按键修饰符

@click.ctrl=“onClick” 即使Alt或shift 被同一按下时也会触发
@click.ctrl.exact=“onCtrlClick” 有且只有Ctrl被按下的时候才触发
@click.exact=“onClick” 没有任何系统修饰符被按下的时候才触发

6.表单

v-model
常见表单项 textarea CheckBox radio select
修饰符 lazy number trim

7.Vue组件的使用

props和$emit 父组件到子组件传递一个信息
组件间通讯-自定义事件
组件的生命周期
7.1生命周期(单个组件)

  1. 挂载阶段
  2. 更新阶段
  3. 销毁阶段
    在这里插入图片描述
    生命周期(父子组件)
    index(组件)
    input(组件)
    List(组件)

8.Vue高级特性

不是每个都很常用,但用到的时候必须要知道

自定义 v-model

$nextTick

:data改变之后,dom不会立刻渲染, n e x t T i c k 会 在 D O M 渲 染 之 后 会 被 触 发 , 以 获 取 最 新 d o m 节 点 , 异 步 渲 染 , nextTick会在DOM渲染之后会被触发,以获取最新dom节点,异步渲染, nextTickDOMdomnextTick待DOM渲染完在回调,页面渲染时会将data的修改做整合,多次data修改只会渲染一次

slot 动态、异步组件:

基本使用:作用域插槽,具名插槽
动态组件: :is="component-name"用法
需要根据数据,动态渲染的场景,及组件类型不确定
异步组件:
import()函数
按需加载,异步加载大组件

如何缓存组件

keep-alive
频繁切换,不需要重复渲染
Vue常见性能优化

mixin

多个组件有相同的逻辑,抽离出来
mixin并不是完美的解决方案,会有一些问题

  1. 变量来源不明确,不利于阅读
  2. 多mixin可能会造成命名冲突
  3. mixin和组件可能出现多对多的关系,复杂度较高

vue3提出的Composition API旨在解决这些问题

9.Vuex使用

用于vue组件
dispatch
commit
mapState
mapGetters
mapActions
mapMutations

vuerouter_94">10.vue-router路由模式

hash模式(默认),如http://abc.com/#/user/10
H5 history模式,如 http://abc.com/user/20
后者需要server端支持,因此无特殊需求可选择前者
在这里插入图片描述
Vue-router路由配置 动态路由
在这里插入图片描述Vue-router路由配置 懒加载
在这里插入图片描述

11.Vue使用-总结

基本使用,组件使用
高级特性
Vuex和 Vue-router使用


http://www.niftyadmin.cn/n/874785.html

相关文章

数据库的数据传入页面_大数据从哪里来?

现代商业市场是一个数据驱动的环境,可以说不论技术怎么更新换代,数据都有着不可替代的地位,而且抛开数据谈大数据就是瞎扯,没有数据作支撑的大数据平台就是一个空壳。无论是公司内部的数据还是外部的数据都可以构成我们大数据平台…

前端框架及项目面试 Vue原理

1.Vue原理(大厂必考) 首先 原理 ! 源码 1.1 组件化 数据驱动视图(MVVM,setState):传统组件,知识静态渲染,更新还要依赖于操作DOM 数据驱动视图-Vue MVVM 通过修改数据,驱动视图 数据驱动视图…

输出结果为16的python表达式_数据分析课程笔记 - 01 - Python基础知识(一)

image.png 大家好呀,由于 python 是非常重要的数据分析工具,因此这套课程也是从 python 的基础知识讲起的,后面还会学习一些文件操作、爬虫相关的东西。所以我们需要把 python 基础打扎实。接下来的一周左右时间都会是 Python 基础知识相关&a…

51单片机基本刷屏测试实验_基于单片机的简易计时器设计..doc

基于单片机的简易计时器设计.摘 要:单片机自70年代问世以来得到蓬勃发展,目前单片机功能正日渐完善:单片机集成越来越多资源,内部储存资源日益丰富,用户不需要扩充资源就可以完成项目开发,不仅是开发简单&a…

微信小程序云开发之初体验

首先安装开发者工具,在微信工具平台里找,稳定版下载微信开发者工具 1.创建项目 一开始是默认目录,在哪创建项目可以修稿项目名称和目录,填写自己的AppID 如果不填写可以使用测试号,测试号有一些功能无法使用 然后进入…

微信小程序云开发的基础之开通云开发

1.文件夹结构功能 .wxml:类HTML,页面结构 .wxss:CSS,页面样式 .js:js,页面逻辑 .json:小程序自己的配置 2.页面主体pages文件 在app.json里面pages里哪个页面代码在第一行哪个就在小程序启动的时候显示 调换位置的效果如下: pages里的about…

sqlplus中调用shell_shell调用sqlplus查询oracle(转)

[oraclehb shell_test]$ cat echo_time#!/bin/sh一.最简单的调用sqlplussqlplus -S "sys/unimas as sysdba" << !select to_char(sysdate,yyyy-mm-dd) today from dual;exit;![oraclehb shell_test]$ ./echo_timeTODAY----------2011-03-21-S 是silent mode&am…

python协程实现一万并发_python多进程+协程实现并发

小练习&#xff0c;假设一个队列中有100000个URL地址&#xff0c;每个请求需要1秒钟&#xff0c;尝试用4个进程&#xff0c;每个进程中开启1000个协程去请求&#xff01;统计运行时间 from gevent import monkey monkey.patch_all(threadFalse) import gevent import time from…