GAARA

Vue3相较于Vue2在维护性、速度、体积和响应式系统上均有显著提升。Vue3引入了组合式API，使得代码组织更加灵活，同时支持更好的TypeScript集成。Vue3使用Proxy进行数据劫持，解决了Vue2中无法检测新增属性的问题。创建Vue3项目时，推荐使用create-vue脚手架，其底层基于Vite构建工具，提供了更快的开发体验。Vue3的项目结构包括vite.config.js、package.json、main.js等文件，其中main.js使用createApp函数创建应用实例。Vue3的组

Vuex是vue的状态管理工具,状态就是数据通俗来说,Vuex是一个插件,帮我们管理vue通用的数据(多组件共享的数据)共同维护一份数据,集中化管理响应式变化操作简洁,vuex的辅助函数立大功。

定义和特点:所有功能都在一个HTML中实现示例:网易云音乐多页面应用:京东和淘宝区别:两者的导航栏跳转方式明显不同单页只有一个HTML页面,按需更新性能高,开发效率快,用户体验好,但学习成本高,首屏加载慢,SEO较差多页即多个HTML页面,整页更新的特点让其性能较低,开发效率一般,用户体验一般,学习成本中等,但首屏加载快,SEO较好*SEO:搜索引擎优化,可以理解为搜索结果的友好度使用场景单页:系统类网站,内部网站,文档类网站,移动端网站多页:公司官网,电商类网站。

需求v-if==>标题文字和"编辑"按钮,点击后它们会消失,同时渲染v-elsev-else==>input文本框,要求让input出现的同时自动获得焦点初步逻辑//显示输入框://获取焦点//在input上绑定ref="inp"出现问题input成功被渲染,但无法自动获得焦点此时获取不到inp,打印出来是undefined原因分析Vue出于提升性能的考量,是异步更新DOM的.

v-model本质上是一个语法糖,在input文本框中,它是由value属性和oninput事件构成的在多选框中,它是由checked属性和onchange事件构成的在select下拉菜单中,它是由value属性和onchange事件构成的

文章目录1.v-if和v-show的区别2.this.$nextTick 是如何设计的？nextTIck是什么?回答使用场景3.vue是如何做样式穿透的?回答:为什么要样式参透scoped底层原理参考博文4.scope的原理回答5.路由导航守卫有哪些?回答注意事项参考博文6.ref是什么?回答7.什么是MVVM回答参考

0.介绍,官网安装和引入介绍:官网全局安装:`npm install mint-ui -S`全局引入:在项目中的main.js文件引入所有组件1.在网页中使用mintUI2.在vue项目中使用mintUI3.使用mintUI为电影院列表添加样式

1.什么是插槽?理解作用步骤2.插槽的种类3.匿名插槽在网页使用匿名插槽vue项目中使用匿名插槽2.具名插槽在网页中使用具名插槽:结果在vue项目中使用具名插槽3.作用域插槽在网页中使用作用域插槽结果:在vue项目中使用作用域插槽(匿名插槽)在vue项目中使用作用域插槽(具名插槽)

1.Getter:把Store中数据处理形成新数据Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 中的计算属性。Store 中数据发生变化，Getter 的数据也会跟着变化。2.使用vuex的getter筛选comingSoon的显示电影数store/index.js

0.实现场景:进入详情页时,底部选项卡隐藏1.使用中央事件总线控制tabbar的v-show的值2.使用vuex的state控制tabbar的v-show的值3.使用vuex的mutation控制tabbar的v-show的值4.使用mapState控制tabbar的v-show的值4.1.v-show="isShow"4.2.引入mapState,并在计算属性中使用它,得到同样效果:`computed:mapState(["showTabbar"]),`5.`...mapState(["sh

0.vuex工作流程图复习1.思路2.axios获取后台数据(仿nowPlaying页即可)3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映"和"即将上映"时直接缓存数据3.1.触发使用缓存数据的逻辑3.2.将axios请求写在action中,$this.store.dispatch的第一个参数就是action的名字3.3. 把数据提交到mutation中3.4. 把获取到的数据写入到comingSoon.vue页面中4.完整代码

0.vuex复习1.引入2.在state中存showTabbar后,直接可以引用3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值4.效果:实现进入详情页时隐藏tabbar5.为什么要使用mutation?6.使用mutation监听6.1.this.$store.commit()的第一个参数就是mutation的名字6.2.this.$store.commit()的第二个参数就是一个mutation如listentabbarShow(state,data)的第二

将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。

零.回顾一.基本组件0.有哪些基本组件?1.layout布局:通过基础的 24 分栏，迅速简便地创建布局有哪些布局?示例:使用row组件和col组件+span进行基础布局2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码容器组件的基本结构常见页面布局第一种第二种第三种第四种(常用)第五种示例:使用第四种布局二.表单组件1.有哪些表单组件?2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据有哪些表单?

state是公共状态router,//this.router===routerstore,//this.store===storethis.$store.state在{{}}中不用加this:{{$store.state}}store/index.jsstate;{cityId:1001,cityName:“sh”}carmer.vue我在:{{$store.state.cityName}}市

// 定义 Getterconst store = new Vuex.Store({ state: { count: 0 }, getters: { showNum: state => { return '当前最新的数量为[' + state.count + ']' } }})

定义路由守卫又称导航守卫，指是路由跳转前、跳转中、跳转后过程中的一些钩子函数。官方解释vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。路由守卫的分类全局路由、组件内路由，路由独享。

动态路由，动态即不是写死的，是可变的。可以根据不同的需求加载不同的路由，做到不同的实现及页面的渲染。命名路由有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。动态的路由存储可分为两种，一种是将路由存储到前端另一种则是将路由存储到数据库。

文章目录重定向:路径错误时回到指定的路径使用:二级路由定义示例一:Film路由下添加二级路由nowPlaying和comingSoon1.views下新建文件夹FIlm,创建两个子路由文件2.Film.vue中添加路由容器router-view3.router/index.js的Film的路由路径下添加children数组结果示例二:为子路由重定向目的router.index.js

什么是路由? 1. 一个路由就是一组映射关系（key - value）步骤(需提前安装vue-router)在vue项目中创建src/router文件夹,并创建index.js文件(路由器)在views下创建xxxx.vue路由(编写路由器中的路由们)在main.js中注册路由(import router from './router’和 router:router) 2. key 为路径, value 可能是 function 或 component

0.反向代理是什么?1、正向代理(forward proxy)2、反向代理(Reverse proxy)1.为什么要配置反向代理?2.如何实现vue中配置反向代理?2.1.安装和引入axios2.2.使用axios2.3. 配置文件vue.config.js

1.入口主页面:index.htrml

组成-. 模板页面 //页面模板JS 模块对象 export default { data() {return {}}, methods: {}, computed: {}, components: {} }样式 //样式定义3.单文件组件的使用 1. 引入组件 2. 映射成标签 3. 使用组件标签

1.介绍vue CLI是一个基于vuejs进行快速开发的完整系统,可以实现项目脚手架,可以实现零配置原型开发.vue CLI致力于将Vue生态中的工具基础标准化,确保各种构建工具,能够基于智能的默认配置,可稳衔接这样,用户可以专注于撰写应用上,不用纠结配置问题2.安装命令2.1.安装npm install -g @vue/cli或者yarn global add @vue/cli2.2.版本检查vue --version2.3.快速原型开发npm install -g @vue/

插槽就是在子组件中挖个坑,坑内内容由父组件决定,用来表示3.分类匿名插槽:没给插槽slot起名字具名插槽:给slot起名字(定义具名插槽:使用到name特性)作用域插槽:本质是携带信息的匿名插槽

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。应用场景通过使用保留的 元素，动态地绑定到它的 is 特性，可以实现动态组件。它的应用场景往往应用在路由控制或者 tab 切换中。标签元素:动态绑定多个组件到它的js属性:保留状态,避免重新渲染

1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它；// eventBus.jsimport Vue from 'vue'//通过一个空的Vue实例作为中央事件总线（事件中心）export const EventBus = new Vue() 2、导入eventBus，使用$emit发送数据；3、导入$on，使用$on接收数据；4、如果想移除事件，可以先导入eventBus，通过$off移除；（eventBus.$off ( 'add', {} )）

ref放在标签上,可以拿到原生节点ref放在组件上,可以拿到组件对象,从而实现父传子和子传父

父子组件通信父组件通过props向子组件传值，子组件通过$emit将数据发送给父组件；非父子组件通信又分为兄弟组件、隔代关系组件等通信方式一：事件总线通过eventBus（事件总线）实现跨组件传输，原理:将eventBus作为连接组件之间的桥梁，所有组件共用相同的事件中心，向事件中心发送或接收事件，并可以通知其他组件；eventBus使用步骤：1、初始化，创建一个事件总线并导出，以便其他模块可以使用并监听它；// eventBus.jsimport Vue from 'vue'

1.组件语法和全局&局部组件1.1.语法1.2.例子:全局组件和局部组件1.3.局部组件2.组件绑定事件的方法直接在写在组件注册中3.父子组件3.1.根组件root(不重要)3.2.全局定义的子组件和局部定义的子组件代码结果:siblings组件无法调用zjChild子组件4.注册组件时,template中的HTML结构必须包含一个根节点5.组件编写方式与Vue实例的区别

1.computed的用法例子: {{msg}} {{num}} {{fn()}} {{computedNum}} new Vue({ el:"#app", data:{ msg:"双击", num:6 }, methods:{ fn(){

文章目录1.v-for实现嵌套遍历代码:结果:2.v-for遍历数组和遍历对象代码:结果:总结:3.v-show和v-if代码:结果:cssjs输出:5.单选按钮6.复选框17.复选框28.vue中的防抖与节流1.v-for实现嵌套遍历代码:在这里插入代码片结果:我叫张三,我每天上午:睡觉看书我叫李四,我每天上午:看视频玩游戏2.v-for遍历数组和遍历对象代码:<div id="app"> <div v-for="(item,index) in arr"> 第{

概要1.v-once 只渲染一次2.v-pre 不会把{{msg}}转换3.获取实例中的data的数据的方法: vm.$data.num vm._data.num vm.num4.v-bindv-bind:title="msg"可以让msg的内容成为此div的innerHTML的悬停信息v-bind:style="{样式}"可以写样式v-bind可以省略不写,只写冒号和后面的单词v-bind:style="arr"实现样式的数组化5.v-on:事件名=函数名可以绑定事件,变

1.Vue生命周期定义2.Vue执行顺序3.vue内置方法的执行顺序

主要掌握1，vue指令。2，vue的选项API。3，vue组件。4，vue路由。5，vuex。