Vue
关注
分享
扫一扫
文章平均质量分 65
Vue
二木成林
这个作者很懒，什么都没留下…
展开
-
Vue番外之如何提取Promise中的数据
提取Promise对象中的数据：axios.get('/url', { params: { id: 1} }).then(res => { // res就是提取的是Promise对象中的值 console.log(res)})原创 2021-03-12 22:08:48 · 3003 阅读 · 2 评论 -
Vue番外之封装函数
在vue中自定义函数并进行调用：首先创建一个js文件，并在里面写一个函数其中fun是调用的对象，而resp是需要封装的函数的函数名名，resp(res, func)是两个参数，其中res是一个对象，而func是一个待调用的函数。最后使用export default fun将该对象暴露出去，让其他得以访问。接着就是在vue文件中引入注意引入的路径，其中fun是调用的对象名。接下来就是引用里面的函数：通过fun.resp()调用刚才封装的函数。第一个参数是传入的res，第原创 2021-03-11 16:22:52 · 777 阅读 · 0 评论 -
Vue番外之在响应拦截器中跳转页面
需求是这样的：由于访问某些页面及请求需要用户登录，后台作了一个判断并返回了响应信息：前端根据这个响应来判断用户是否登录，如果用户没有登录则跳转到登录页面。如果在每个请求后的响应都做判断，那么前台的每一条请求都需要做这种判断，请求越多写的代码也就越多，而vue有一个响应拦截器，就跟Java的请求拦截器一样，可以拦截后台的所有响应。基本代码格式如下：然后在vue项目的main.js中进行配置，大概代码如下：import Vue from 'vue'import App from原创 2021-03-10 16:32:15 · 6539 阅读 · 2 评论 -
vue脚手架3.0怎么删除之前创建的预设
打开资源管理器，在如下文件夹下有一个名为.vuerc的文件，里面保存着预设信息。打开文件，可以看到预设信息清除掉所有预设再次创建就没有自定义的预设了原创 2021-01-18 11:11:13 · 1549 阅读 · 2 评论 -
Vue番外之父子组件传值
通过props通信（父传子）基本准备使用vue脚手架创建个vue项目，然后整理目录结构如下：其中各个文件内容如下：父组件Father.vue<template> <div> <h2>我是父组件</h2> </div></template><script></script><style></style>子组件Child.vue原创 2020-11-14 22:02:01 · 375 阅读 · 0 评论 -
Vue封装组件库-把packages处理成vue插件
目录把packages处理成vue插件基本配置1、目录调整2、vue.config.js配置3、install方法4、打包组件库组件库上传GitHub1、处理README.md文件2、在package.json文件中声明项目作者信息3、上传GitHub4、添加远程仓库组件库上传npm1、配置package.json2、配置.npmignore文件3、注册npm4、上传到npm5、将组件库下载到本地6、使用vue-green-ui把p原创 2021-05-25 21:06:48 · 1745 阅读 · 3 评论 -
Vue番外之循环数组从指定下标开始
其中items为data() { return { items: [ '唐僧', '孙悟空', '猪八戒', '沙僧', '小白龙' ] }}第一种方法：循环时，切割列表<ul> <li v-for="(item, index) in items.slice(1)" :key="index">{{item}}</li></ul>第二种方法：利用v-原创 2020-11-14 22:02:37 · 2840 阅读 · 0 评论 -
Vue番外之.sync修饰符
一般情况下，子组件向父组件传值代码如下：子组件Child.vue<template> <div> <h2>我是子组件</h2> </div></template><script>export default { data () { return {} }, methods: {}, mounted: function () { this.$emit('getI原创 2020-11-14 22:02:30 · 316 阅读 · 0 评论 -
Vue封装组件库-switch组件
封装switch组件组件参数及事件参数支持：参数名 参数描述 参数类型 默认值 v-model 双向绑定 布尔类型 false name name属性 string text activeColor 自定义的激活颜色 string #1ec63b inactiveColor 自定义的不激活颜色 string #dd001b 事件支持：事件名称 事件描述 change原创 2021-05-25 21:06:55 · 2604 阅读 · 1 评论 -
Vue封装组件库-input组件
封装input组件组件参数及事件参数支持：参数名称 参数描述 参数类型 默认值 placeholder 占位符 string 无 type 文本框类型（text/password） string text disabled 禁用 boolean false clearable 是否显示清空按钮 boolean false show-password 是否显示密码切换按钮 bo原创 2021-05-25 21:07:02 · 1370 阅读 · 0 评论 -
Vue封装组件库-dialog组件
封装dialog组件组件参数及事件参数支持：参数名 参数描述 参数类型 默认值 title 对话框标题 string 提示 width 宽度 string 50% top 与顶部的距离 string 15vh visible 是否显示dialog（支持sync修饰符） boolean false 事件支持：事件名 事件描述 opened原创 2021-05-25 21:06:02 · 2071 阅读 · 0 评论 -
Vue零碎知识点（3）——v-show和v-if的区别
v-if和v-show是区别v-if控制元素是否渲染到页面 v-show控制元素是否显示（已经渲染到页面了）v-show的示例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> <script type="text/javas原创 2020-10-27 22:31:26 · 225 阅读 · 0 评论 -
Vue封装组件库-button组件
常见组件封装使用vue create green-ui命令初始化一个vue项目勾选如下选择scss选择eslint风格选择保存时校验选择In package.json保存输入项目名创建项目成功启动项目然后把App.vue修改为如下内容<template> <div id="app"> 定制组件 </div></template><script&原创 2021-05-25 21:06:40 · 2439 阅读 · 1 评论 -
Vue零碎知识点（2）——vue引入外部js文件
vue引入外部的js文件，如下面这种js文件首先创建test.js文件，其内容很重要var info = '这是一段信息'function myTest () { alert('这是一个测试！')}export { info, myTest}注意export很重要，这是属于ES6的语法，将info属性和myTest方法暴露出去，让其他文件进行引用。然后在其他vue文件中进行引用其中import就是导入test.js文件中的属性和方法，接着就可以直接调用te原创 2020-10-24 20:45:03 · 637 阅读 · 0 评论 -
Vue零碎知识点（1）——Vue引入jQuery
由于需要用到jQuery，但vue引入jQuery和其他的通过script标签引入不一样。而且不同版本的vue，引入方式不一样。本项目是使用是vue脚手架搭建而成，其版本如下（使用vue --version命令和npm list vue命令查看脚手架和vue版本）：第一步：使用npm install jquery命令按照jQuery依赖，这里安装的jQuery版本是3.5.1第二步：在webpack.config.js文件中请求设置，注意不同版本的vue可能会没有webpack.co原创 2020-10-24 20:30:38 · 512 阅读 · 0 评论 -
Vue番外之单页组件的复用
Vue单页组件复用单页组件就是使用Vue脚手架创建的以vue为后缀的单页文件。其基本结构为：<template> <div>单页组件</div></template><script> export default { data () { return {} }, methods: {} }</script><style lang="less" scoped=原创 2020-11-15 09:32:30 · 748 阅读 · 0 评论 -
使用Vue实现Cookie记住用户名和密码
代码如下（该demo可直接运行查看效果）：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!-- 使用CDN引入Vue.js --> <script type="text/javascript" src=" https://cdnjs.cloudflar...原创 2020-02-02 11:45:23 · 1289 阅读 · 0 评论 -
Vue之使用v-bind实现标签属性的拼接
先来一个示例，这是没有标签属性的拼接，数据是从data中获取，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> <script ty...原创 2020-01-29 20:44:15 · 5209 阅读 · 0 评论 -
Vue和SSM搭配使用
使用SSM和Vue+axios发送POST请求来实现简单的前后端分离，这里实现的是登录功能。项目目录如下：其中只介绍前台login.html文件和后端处理UserController.java的代码。login.html<!DOCTYPE html><html xmlns:v-on="http://www.w3.org/1999/xhtml">...原创 2020-01-25 22:45:43 · 7958 阅读 · 0 评论 -
Vue搭建脚手架(Vue-cli）
环境说明搭建脚手架需要使用node环境，关于node的安装参考：安装Node.js使用npm和cnpm都可以搭建脚手架，但是由于npm安装速度慢，所以使用淘宝镜像cnpm。打开DOS窗口，输入命令：npm install cnpm -g --registry=https://registry.npm.taobao.org接着输入：cnpm --version查看版本，即可...原创 2020-01-20 20:34:35 · 244 阅读 · 0 评论 -
学习Vue（9）——组件
介绍组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。语法要使用组件，就需要先注册一个组件，下面是注册一个全局组件的语法：Vue.component(tagName,options)解释说明：其中tagName是组件名，由程序员自定义。 options为配置选项。 注册后，可以通过<tagName&...原创 2020-01-20 15:06:18 · 268 阅读 · 0 评论 -
使用Vue实现表单的重置
代码如下：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Vue学习</title> <!-- 使用CDN引入Vue.js -->...原创 2020-01-19 08:20:03 · 4041 阅读 · 0 评论 -
学习Vue（15）——使用axios发送请求
介绍Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。Github开源地址：https://github.com/axios/axiosvue-resource是vue 1推荐使用的，而axios是vue 2.0 推荐使用的，其实两个都可以向后端发送请求，获取响应...原创 2020-01-18 20:23:09 · 546 阅读 · 0 评论 -
Vue的axios向后台发送POST请求接收不到参数
错误错误代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Vue学习</title> <!-- 引入vue.js --...原创 2020-01-18 19:53:11 · 1241 阅读 · 0 评论 -
学习Vue（14）——使用vue-resource发送请求
介绍vue-resource是vue.js的一款插件，通过XMLHttpRequest或JSONP发起请求并处理响应.vue-resource是vue 1推荐使用的，而axios是vue 2.0 推荐使用的，其实两个都可以向后端发送请求，获取响应。安装由于vue-resource.js是vue的一段插件，所以需要安装。安装到本地请参考：https://blog.youkuaiyun.com...原创 2020-01-18 16:42:19 · 726 阅读 · 0 评论 -
使用Vue实现下拉列表框批量添加选项
使用Vue实现下拉列表框批量添加选项，设置被选中的值。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> <script type...原创 2020-01-18 15:37:38 · 2587 阅读 · 0 评论 -
使用Vue实现复选框的全选与反全选
该实例实现复选框的全选与反全选。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> <script type="text/java...原创 2020-01-18 15:25:17 · 2859 阅读 · 1 评论 -
学习Vue（8）——表单
表单是前端中用到非常多的部分，这里将用vue实现数据的双向绑定。可以用 v-model 指令在表单控件元素上创建双向数据绑定。输入框input和文本域textarea使用v-model进行双向绑定数据，即一边的数据发生变化，另一边的数据也发生变化。<!DOCTYPE html><html> <head> <meta charset...原创 2020-01-18 14:51:54 · 232 阅读 · 0 评论 -
学习Vue（7）——v-on处理事件
在vue中如按钮、鼠标的事件可以使用v-on指令进行监听。v-on:click使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <!-- 使用CDN引入Vue.js --> <sc...原创 2020-01-18 14:21:30 · 225 阅读 · 0 评论 -
学习Vue（6）——v-bind绑定样式
class和style是HTML元素的属性，可以设置元素的样式，前者为元素绑定CSS样式，后者为元素绑定内置样式。而v-bind就是为HTML元素添加属性的，基于这一特性，故可以使用v-bind处理样式，并且vue做了强化，表达式的结果类型除了字符串之外，还可以是对象或数组。简单绑定样式<!DOCTYPE html><html> <head>...原创 2020-01-18 14:09:07 · 1970 阅读 · 0 评论 -
学习Vue（5）——监听属性watch
Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。watch就是通过v-model监听数值的变化，然后在函数中做处理。例如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title>...原创 2020-01-17 21:03:58 · 315 阅读 · 0 评论 -
学习Vue（4）——循环语句
在vue中循环使用的是v-for指令。v-for 指令需要以site in sites形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。迭代数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue<...原创 2020-01-17 18:26:08 · 324 阅读 · 0 评论 -
学习Vue（3）——条件语句
vue的条件判断是通过v-if、v-else、v-else-if、v-show指令来实现的。v-if其中v-if指令根据值（true或false）判断是否执行操作，但是只有为true时才执行v-if的指令，如果没有v-else的话那么久不执行当为false时的操作。<!DOCTYPE html><html> <head> <meta ...原创 2020-01-17 17:13:02 · 648 阅读 · 0 评论 -
学习Vue（2）——语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。输出内容文本值如果只是最简单的输出文本值，使用{{...}}（双大括号）即可，也可以输出函数的返回值。<!DOCTYPE html><html> &l...原创 2020-01-17 16:46:20 · 278 阅读 · 0 评论 -
学习Vue（1）——第一个Vue程序
说明Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。至于为什么要学Vue呢？一是因为Vue是热门的前端框架，而是可以通过Vue来实现前后端分离。参考资料官方文档：http://vuejs.org/v2/gu...原创 2020-01-17 15:20:59 · 289 阅读 · 0 评论 -
Vue和Servlet搭配使用
这里使用Vue+Servlet实现简单的前后端分离的JavaWeb项目。首先创建一个基本的JavaWeb项目。按照下图创建文件夹和文件，并导入vue所需要使用的js文件和处理json格式数据所需要的第三方加包gson包。要实现前后端交互这里需要使用到vue-resource插件，原生的vue没有前后端交互的，，要通过这个插件来实现。下载vue-resource.js插件可以参考...原创 2020-01-15 19:58:31 · 10970 阅读 · 6 评论