随笔分类 -  vue

<十四>vue-admin-template 菜单、标签显示
摘要：一、template的菜单在src/router/index.js里面配置。注释里面有解释每个属性的意义。 二、修改一下标签名，下图中title就是左侧菜单栏显示的文字。 三、从浏览器的标签上显示了“首页-vue-admin-template”，首页我们知道是菜单名，但是vue-admin-temp 阅读全文
posted @ 2024-06-22 11:24 许轩霖 阅读(303) 评论(0) 推荐(0)
<十三>vue-admin-template 添加标签页
摘要：给template添加 tagsview 1、从下载vue-element-admin 中下载相关文件到相关目录 拷贝文件夹vue-element-admin-master\src\layout\components\TagsView到相同目录下 拷贝js文件vue-element-admin-ma 阅读全文
posted @ 2024-06-22 09:49 许轩霖 阅读(310) 评论(0) 推荐(0)
<四>用户页面增删改查接口对接
摘要：一、先来实现一下用户的增删改查。 1、改一下固定的菜单之前先看看左边菜单栏是从sidebar这个页面加载的。那我们打开这个vue界面看看 2、很明显这个菜单侍从官路由哪里加载过来的。那就简单了，到路由的index.js下把table名字改一下，改成 用户，相关访问接口也改一下 3、修改完以后如下图所 阅读全文
posted @ 2022-04-05 04:48 许轩霖 阅读(409) 评论(0) 推荐(0)
<三>vue-element-template 对接登陆接口
摘要：一、vue-element-template 初始化接口还是用的Mock接口，在store中管理用户状态，这里我们对接一下上节中定义的接口 1、修改axios封装的对象baseURL地址。在开发配置文件那里，修改成自己接口的地址。 2、取消mock数据，在vue.config.js中注释掉使用moc 阅读全文
posted @ 2022-03-27 01:21 许轩霖 阅读(571) 评论(0) 推荐(0)
<十二>vue-admin-template 项目结构
摘要：一、vue-admin-template 从零编写一个后台管理系统需要考虑很多东西，网络上有很多的轮子，这里就拿比较火的轮子: vue-admin-template 来做二次开发好了 二、下载后台模板，后面AidenAdminView 是生成的文件夹名。 git clone https://gith 阅读全文
posted @ 2022-03-06 21:11 许轩霖 阅读(5937) 评论(0) 推荐(0)
<十一>请求 axios
摘要：1、vue 发起请求，用的是axios。先安装一下 npm install axios 2、在main.js中注册全局的axios. import Vue from 'vue' import App from './App' import router from './router' import 阅读全文
posted @ 2022-01-28 14:44 许轩霖 阅读(46) 评论(0) 推荐(0)
<十>vuex 状态管理
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 简单的说就是多个组件之间共享的数据的存储的地方。 Vuex由三部分组成。 Actions负责数据的处理， Mutations负责数据修改， S 阅读全文
posted @ 2021-12-11 18:51 许轩霖 阅读(55) 评论(0) 推荐(0)
<八>vue脚手架项目结构
摘要：1、用vscode 打开脚手架项目的文件夹，项目结构如下： node_modules目录：这是项目依赖模块的目录，使用npm install来安装的依赖模块全部放到这里，一般不用管。 build目录：这是关于项目构建信息的目录，里面主要是webpack构建项目的一些配置。 config目录： 基础配 阅读全文
posted @ 2021-12-11 18:50 许轩霖 阅读(446) 评论(0) 推荐(0)
<九>组件和路由
摘要：页面的跳转，在html里都是通过a元素来进行页面跳转的，href指定的链接就相当于指定了跳转的路由。 而在vue的单页面应用中，这里的路由本质上是进行了页面重渲染。 在入口main.js里面已经将router装载进项目了。 1、在定义新的路由之前，先定义一个跳转的自定义组件。在src/compone 阅读全文
posted @ 2021-12-11 18:50 许轩霖 阅读(142) 评论(0) 推荐(0)
<七>vue脚手架
摘要：前面已经学习了vue的一些基础，现在开始学习使用vue官方提供的一个脚手架，什么叫脚手架，就是一个完整的基础项目架构。 1、npm的安装，npm是npm 是 JS 的包管理工具，npm的服务器上会收集了很多常用的js相关的文件包，可以利用npm来下载项目模块的依赖包 到node.js官网下载node 阅读全文
posted @ 2021-12-11 18:49 许轩霖 阅读(149) 评论(0) 推荐(0)
<六>组件的相关属性
摘要：1、is属性：通过is动态绑定组件名称，可以动态切换显示的组件 <body> <div id="app"> <button @click='changeName'>更改名称</button> <component :is='name'></component> </div> </div> <scri 阅读全文
posted @ 2021-12-11 18:49 许轩霖 阅读(86) 评论(0) 推荐(0)
<四>v-model 双向绑定表单操作
摘要：v-model 用于表单控件的双向绑定。实际上就是对html控件的value值进行操作的一个命令 作用于带value的控件，比如input，selected，textarea等。 1、input(text) 、textarea <body> <div id="app"> <input type="t 阅读全文
posted @ 2021-12-11 18:46 许轩霖 阅读(82) 评论(0) 推荐(0)
<五>子父组件间的交互
摘要：组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。 1、基本定义和使用 <body> <div id="app"> <child></child> <child1></child1> </div> <script src="vue.js"> 阅读全文
posted @ 2021-12-11 18:46 许轩霖 阅读(85) 评论(0) 推荐(0)
<三>computed 和事件的绑定
摘要：1、计算属性computed和methods 的区别在于computed 优先使用缓存，methods实时更新，如果message变更，其他两个值也会变更。 <body> <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ rever 阅读全文
posted @ 2021-12-11 18:46 许轩霖 阅读(105) 评论(0) 推荐(0)
<一>vue 基础定义
摘要：1、vscode 安装 open in browser 插件 安装完成后在html页面上点击右键就可以选择浏览器打开了。 2、看一个简单例子 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> {{ 阅读全文
posted @ 2021-12-11 18:45 许轩霖 阅读(185) 评论(0) 推荐(0)
<二>数据和方法的绑定
摘要：上一节学习了参数和方法的定义，现在学习下vue的一些语法。 1、渲染 ：{{ }},v-text,v-html的使用 <div id="app"> {{ message }} //插值表达式： 直接将定义的变量放在 hmtl中，使用两个中括号包起来，这里是可以使用js 函数，比如：message.j 阅读全文
posted @ 2021-12-11 18:45 许轩霖 阅读(51) 评论(0) 推荐(0)