Vue
文章平均质量分 71
早睡早起长头发
这个作者很懒,什么都没留下…
展开
-
【Vue】模板语法——内置指令
指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下几大类:① 内容渲染指令:v-text、v-html② 属性绑定指令:v-bind③ 事件绑定指令:v-on④ 双向绑定指令:v-model⑤ 条件渲染指令:v-if、v-show⑥ 列表渲染指令:v-for⑦ 其他指令:v-once、v-pre、v-cloak注意:在vue中使用v-开头的都是Vue指令。原创 2023-02-03 20:14:49 · 1667 阅读 · 1 评论 -
【Vue】模板语法——文本插值
在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能地推导出需要重新渲染的组件的最少数量,并应用最少的 DOM 操作。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。这种 {{ }} 语法的专业名称是插值表达式(英文名为:Mustache),在实际开发中用的最多。在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还。只是内容的占位符,不会覆盖原有的内容。原创 2023-02-01 19:03:03 · 1540 阅读 · 0 评论 -
【Vue】Vue不同版本的基本使用
vue2.x 中绝大多数的 API 与特性,在 vue3.x 中同样支持。2.多个容器不能对应一个实例,实例只会找到第一个对应的容器;一个容器不能对应多个实例,只有第一个实例能找到对应的容器。所以,容器和实例只能。的功能例如:组合式 API、多根节点组件、更好的 TypeScript 支持等。的旧功能如下:过滤器、不再支持 $on,$off 和 $once 实例方法等。1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象。vue cli(vue脚手架)、vite(新一代的架构工具)。原创 2023-02-02 22:05:32 · 1071 阅读 · 0 评论 -
【Vue】Vue的简介和特性
Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架。专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API简洁。1. 构建用户界面前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、好用的网页。原创 2023-01-31 15:16:13 · 2164 阅读 · 0 评论 -
【axios】axios在vue中的使用
文件中进行如下配置:把 axios 挂载到 Vue.prototype 上,供每个 .vue 组件的实例直接使用,之后的vue组件中都不需要再单独导入axios,可以直接调用 this.$http.xxx。文件全局配置 axios 的请求根路径,在vue组件的URL中就不需要再写完整的请求地址。按照之前的写法,如果URL发生更改,那么需要将每个vue组件中的URL都进行修改。如果把 axios 挂载到 Vue 原型上,无法实现 API 接口的复用。上面的方法,需要在每个组件中都导入axios,太麻烦。原创 2023-01-27 11:53:07 · 850 阅读 · 0 评论 -
【Vue2】ref 引用
② 当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的.focus() 方法即可。通俗的理解是:等组件的DOM 更新完成之后,再执行 cb 回调函数。每个 vue 的组件实例上,默认都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。,需要拿到页面上某个DOM元素的引用,此时可以使用ref引用。② Vue中,也可以使用ref 引用页面上的。原创 2023-02-04 20:12:50 · 2595 阅读 · 0 评论 -
【Vue】vue-devtools调试工具安装和配置
在浏览器中访问一个使用了 vue 的页面,打开浏览器的开发者工具,切换到 Vue 面板,即可使用 vue-devtools 调试当前的页面。vue 官方提供的 vue-devtools 调试工具,能够方便开发者对 vue 项目进行调试与开发。2. 配置 Chrome 浏览器中的 vue-devtools。3. 使用 vue-devtools 调试 vue 页面。1. 安装 vue-devtools 调试工具。修改完配置项,须重启浏览器才能生效!原创 2023-01-30 20:30:14 · 924 阅读 · 0 评论 -
【Vue】前端工程化与 webpack
在实际开发过程中,webpack 默认只能打包处理以 .js后缀名结尾的模块。其他非 .js 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错。loader 加载器的作用:协助 webpack 打包处理特定的文件模块。比如:css-loader 可以打包处理 .css 相关的文件less-loader 可以打包处理 .less 相关的文件。原创 2023-01-29 22:29:17 · 744 阅读 · 0 评论 -
【Vue】双向数据绑定原理 vue2.0 与 vue3.0
一、什么是双向数据绑定?二、双向数据绑定原理 vue2.0三、Vue 3.0使用ES6的新特性porxy四、思考原创 2022-08-20 18:53:57 · 761 阅读 · 0 评论 -
【Vue】Vuex状态管理器的使用
一、Vuex是什么?二、什么时候使用Vuex?三、Vuex的核心概念和API1.state 2.mutations 3. actions 4. getters 5. modules四、Vuex的运作流程五、应用举例1.安装2.创建store3.在main.js文件中使用store4.创建Home.vue组件5.在App.vue中导入Home.vue六、vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex1. …mapState 2. …mapGetters原创 2022-08-19 21:56:23 · 4334 阅读 · 0 评论 -
【Vue】Vue的路由
一、Vue的路由1.路由2.前端路由3.VueRouter路由4.VueRouter的组成5.VueRouter常用的函数二、VueRouter的使用1、安装vue-router2、创建路由文件3、声明路由请求接口4、声明路由出口三、动态路由1.动态路由的路径格式2.在URL中带查询参数3.通配符匹配四、嵌套路由五、命名路由六、命名视图1.给路由视图添加name属性2.在路由表中,指定components属性的值七、导航守卫1.路由导航的方式2.导航守卫原创 2022-08-19 21:48:02 · 3995 阅读 · 0 评论 -
【vue】axios和vue-axios请求模块
一、axios模块二、axios使用方法1.创建服务器端Express项目2.创建服客户端Vite项目3.在vite客户端安装axios三、axios的五种请求1.无参的get请求2.带参的get请求3.post请求4.put请求5.patch请求6.delete请求四、axios的数据封装格式五、vue-axios模块1.安装2.在main.js文件中进行全局的配置原创 2022-08-19 16:28:24 · 1584 阅读 · 0 评论 -
【Vue】Vue的过渡动画
一、过渡动画二、transition组件三、transition的显示的CSS类名四、transition的隐藏的CSS类名五、互斥动画六、设置动画过程中的监听回调七、列表过渡动画原创 2022-08-18 20:20:31 · 1559 阅读 · 0 评论 -
【Vue】Vue的插槽
一、插槽(slot)将父组件中的内容与子组件的模板进行混合使用。可以弥补视图的不足。二、使用插槽的目的使组件更具有扩展性。三、插槽的使用1.匿名插槽(默认插槽)2.具名插槽3.作用域插槽...原创 2022-08-18 20:09:13 · 314 阅读 · 0 评论 -
【Vue】Vue3中新增的特性
一、组合式API:setup1.是一个函数,可以返回对象,对象的属性和方法可以在模板中直接使用2.所有的组合API函数都在此使用, 只在初始化时执行一次二、初始化函数:ref。作用是初始化组件中使用的变量。语法是:const 变量名 = ref(初始值)三、构建响应式数据方法:reactive。作用是将数据打包成对象四、Vue3的计算属性五、Vue3的setup语法糖:不需要使用exports default进行组件的默认...原创 2022-08-18 18:07:51 · 452 阅读 · 0 评论 -
【Vue3】使用Vite构建工具构建Vue3项目
一、利用cmd和vscode创建二、利用webstorm创建原创 2022-08-17 22:23:56 · 6401 阅读 · 0 评论 -
【Vue】使用Vue脚手架(vue-cli)构建Vue3项目
一、利用cmd和vscode创建二、利用cmd和webstorm创建原创 2022-08-17 21:29:41 · 1896 阅读 · 0 评论 -
【Vue3】Vue组件之间的三种通信
一、父子组件之间的传值 1.父组件向子组件传值 2.子组件向父组件传值 3.在组合式API(setup)中使用this所出现的问题(子传父) 二、兄弟组件之间的传值 三、跨级组件之间的通信原创 2022-08-16 21:29:09 · 1069 阅读 · 0 评论 -
【Vue3】Vue的组件
一、组件的创建1.创建组件的模板2.注册组件二、组件中数据和事件的传递1.给组件添加外部属性2.处理组件事件原创 2022-08-16 21:12:14 · 424 阅读 · 0 评论 -
Vue项目:《51购商城》系统分析
Vue项目:《51购商城》系统分析原创 2022-08-16 21:29:30 · 1343 阅读 · 7 评论 -
【Vue3】Vue的事件类型
一、常用事件:click:单击dblclick:双击focus:获取焦点blur:失去焦点change:元素内容改变select:元素内容被选中mousedown:鼠标按键被按下mouseup:鼠标按键抬起mousemove:鼠标在组件内移动 mouseout:鼠标移出组件 mouseover:鼠标二、Vue中的按键修饰符:对特殊键识别时需要使用按键修饰符。.........原创 2022-08-15 18:12:25 · 575 阅读 · 0 评论 -
【Vue3】Vue的事件监听和处理
一、事件监听是通过v-on指令(用@符号代替)绑定事件处理程序二、多事件的处理对于同一个用户交互事件,需要调用多个方法进行处理1.获取事件类型:$event2.多事件处理的语法格式:@事件名 = “方法1,方法2”三、事件修饰符1.DOM的事件原理:首先会从父组件开始依次传递到子组件 — 事件捕获其次当事件传递到最内层的子组件时,会逆向再进行一次传递,从子组件依次向上传递 — 事件冒泡2.Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段3.capture:如果需要监听原创 2022-08-15 17:29:08 · 4415 阅读 · 0 评论 -
【Vue3】Vue组件的样式绑定
一、为Html标签绑定class属性v-bind,为class属性绑定一个对象,在对象中可以设置对象是否可用1.绑定class属性,由绑定的变量来决定应用哪个样式2.可以将样式直接设置成Vue组件中的数据对象二、绑定内联样式...原创 2022-08-15 16:55:10 · 662 阅读 · 0 评论 -
【Vue3】表单数据的双向绑定:v-model
一、单行文本框的绑定二、多行文本区的绑定三、复选框的绑定四、单选按钮的绑定五、下拉列表框的绑定六、常用的两个修饰符原创 2022-08-04 20:17:02 · 3883 阅读 · 0 评论 -
【Vue2&3】Vue组件的属性和方法
当我们点击按钮向服务器发起数据请求时,在请求的数据回来之前多次单击按钮是无效的且会消耗资源,或者页面中某个按钮会导致页面的刷新,我们需要限制用户对该按钮进行频繁的操作,为了避免该情况的发生,我们将使用Vue中的限流来解决该问题。1.使用限流函数即在指定的时间间隔内不允许重复执行同一个函数。2.使用Lodash库进行函数限流是一款高性能的JavaScript实用工具库,提供了大量的数组、对象、字符串等边界的操作方法,使开发者更简单的使用JavaScript,在Lodash库中提供了debounce函数进.原创 2022-08-03 18:19:21 · 457 阅读 · 0 评论