![](https://img-blog.csdnimg.cn/d16554ea5fd5447a926dfb74263b86aa.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue精华讲解
文章平均质量分 75
快速入门Vue,快速上手,精华内容讲解
冷丁_
转iOS中,热爱编程的小白~
展开
-
Yaml注入配置文件
Yaml注入配置文件yaml文件更强大的地方在于,他可以给我们的实体类直接注入匹配值!demo 测试Yaml注入配置文件1、在springboot项目中的resources目录下新建一个文件 application.yml2、编写一个实体类 Dog;@Componentpublic class Dog { @Value("旺财") private String name; @Value("3") private Integer age;}3、思考,以前是如原创 2022-09-24 21:42:25 · 599 阅读 · 0 评论 -
Vue 404处理与钩子函数
Vue 404处理与钩子函数Vue路由模式有两种hash:路径带 # 符号,如 http://localhost/#/loginhistory:路径不带 # 符号,如 http://localhost/login如果不想要url中有#号,可以改为history模式index.jsexport default new Router({ mode: 'history', routes: [ ]});404 demo1.创建一个NotFound.vue视图组件NotFoun原创 2022-08-21 15:31:54 · 321 阅读 · 0 评论 -
Vue路由参数传递详解
Vue路由参数传递详解这里做一个demo演示如果请求带有参数该怎么传递方式一:取值方式1.修改路由配置,主要是router下的index.js 中的path属性,增加了:id ,用来接受参数id{ path:'/main', component:Main, children:[ { path:'/user/profile/:id', name:'UserProfile', compone原创 2022-08-19 21:03:46 · 1261 阅读 · 0 评论 -
Vue路由嵌套详解
Vue路由嵌套详解嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。demo1.创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件;<template><h1>个人信息</h1></template><script>export default { name: "UserProfile"}</script><style scoped>原创 2022-08-19 21:03:33 · 3204 阅读 · 0 评论 -
Vue+ElementUI实战
Vue+ElementUI实战使用之前创建vue-cli项目的方法1.创建一个名为hi-vue的工程vue init webpack hi-vue2.安装依赖,我们需要安装element-ui、sass-loader和node-sass# 进入工程目录cd hello-vue# 安装 element-uinpm i element-ui -S# 安装依赖npm install# 安装 SASS 加载器cnpm install sass-loader node-sass --sav原创 2022-08-18 23:03:14 · 818 阅读 · 0 评论 -
Vue-Router详解
Vue-Router详解Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反 掌。包含的功能有:嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中自动降级自定义的滚动条行为安装vue-router 是一个插件包,所以我们还是需要用 npm/c原创 2022-08-18 23:02:54 · 336 阅读 · 0 评论 -
webpack的简单使用
webpack的简单实用什么是webpack本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。简单的来说,WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。demo完成一个demo ,简单测试一下webpack的打包功能。首先配置webpack环境Mac安装webp原创 2022-08-17 23:48:44 · 273 阅读 · 0 评论 -
Vue-Cli详解
Vue-Cli详解vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板 ;预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;主要的功能:统一的目录结构本地调试热部署单元测试集成打包上线一、配置Vue-Cli环境mac 终端命令配置环境一般需要比较高的权限,最后进入管理员模式,执行命令su 并输入密码1.首先如果npm的版本不是最新版本,在安装东西时会报错,首先更新np原创 2022-08-17 23:48:28 · 540 阅读 · 0 评论 -
Vue自定义事件$emit()详解
Vue自定义事件$emit()详解在组件绑定数据后,我们如果想实现一个点击删除按钮就删除这个数据的功能,那么我们需要删除vue中的数据。如何实现?vue实例和vue组件互不相干,组件和组件之间的操作可以用插槽,组件如何调用Vue实例中的方法?数据项在 Vue 的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit(‘自定义事件名’, 参数),操作过原创 2022-08-16 22:39:13 · 2187 阅读 · 0 评论 -
Vue插槽slot详解
Vue插槽slot详解在 Vue 中我们使用 元素,作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中;比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?demoslot.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2022-08-16 22:38:54 · 281 阅读 · 0 评论 -
Vue中computed -计算属性详解
Vue中computed -计算属性详解计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性有 计算 的能力(计算是动词),这里的 计算 就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!demo这里我们编写一个demo,让页面输出当前的时间,将计算属性和普通的方法进行对比compute.html<!DOCTYPE html><html lang="en"><hea原创 2022-08-13 11:38:43 · 547 阅读 · 1 评论 -
Axios详解
Axios详解Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 A JAX 异步通信。其主要功能如下从浏览器中创建XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [ JS中链式编程 ]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF(跨站请求伪造)Axios官网就是一个github Github为什么要使用 Axios由于 Vu原创 2022-08-13 11:38:25 · 664 阅读 · 0 评论 -
Vue组件详解
Vue组件详解组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板。通常一个应用会以一棵嵌套的组件树的形式来组织:第一个Vue组件使用 Vue.component() 方法注册组件:说明:Vue.component():注册组件my-component-li:自定义组件的名字template:组件的模版当我们需要传递参数都组件时,需要使用props属性!注意:默认规则下 props 属性里的值不能为大写:component.html代码<!DOCTYPE htm原创 2022-08-12 20:54:36 · 292 阅读 · 0 评论 -
Vue中双向绑定数据详解
Vue中双向绑定数据详解Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓。你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。对v-model的理解v-model本质上是一个语法糖。如下代码本质上是<input :原创 2022-08-12 20:53:56 · 1035 阅读 · 0 评论 -
Vue中v-on指令详解
Vue中v-on指令详解v-on 监听事件v-on可以简写为@程序中的事件包括Vue事件、前端页面本身的一些事件!我们这里的click是vue的时间,可以绑定到Vue中的methods中的方法事件。因此写为v-on:click,不写为之前的on-clickdemo1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titl原创 2022-08-08 21:41:15 · 1444 阅读 · 0 评论 -
Vue基础语法一(判断、循环指令)
Vue基础语法一(判断、循环指令)1、v-bind现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!我们还可以使用 v-bind 来绑定元素特性!demo01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&原创 2022-08-04 19:42:45 · 403 阅读 · 0 评论 -
第一个Vue程序
第一个vue程序原创 2022-07-19 23:07:27 · 502 阅读 · 1 评论