vue
文章平均质量分 82
无感_K
我很懒,还没有添加动态。
展开
-
VueX了解
1、安装vuex npm install vuex -S npm install xxx -S,也就是 npm install module_name --save 写入dependencies(生产环境) npm install xxx -D,也就是 npm install module_name --save-dev 写入devDependencies(开发环境) 2、创建store目录 state.js //前端数据库 export default { } muta...原创 2021-11-16 20:40:53 · 88 阅读 · 0 评论 -
SPA项目之新增,修改
目标: 在原有基础上做出新增,修改,删除功能 一、新增修改 首先在查询附近添加一个新增按钮,通这个按钮来弹出新增表单,这个在上一次的查询框中有代码。 模态框 代码: <!-- 弹出框 --> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog"> <el-form label-width="12..原创 2021-11-16 20:36:47 · 348 阅读 · 0 评论 -
SPA项目之动态树,数据表格,分页查询
效果图: 左侧树来自数据库,中间数据来自关键字查询,还有分页条。 一、动态树形菜单 在动态树的实现中,我们这里只关注效果,数据是后端实现的,直接获取。 代码: <template> <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" a.原创 2021-11-16 16:07:56 · 854 阅读 · 1 评论 -
SPA项目之使用mockJS模拟响应,首页菜单伸缩功能
大纲: 1.使用mockJS模拟登陆请求的响应,实现脱离后端数据 2.使用elementUI做首页左侧菜单栏,并作出伸缩功能 3.了解‘总线’ 4.退出功能 一、使用mockJS Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 官网:Mock.js 特性: 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。 .原创 2021-11-15 16:51:09 · 958 阅读 · 0 评论 -
使用脚手架搭建SPA项目
目标: 使用脚手架成功搭建一个vue基本项目 了解项目结构及构成 实现路由嵌套 一、使用脚手架 在使用之前,要确保NodeJs环境搭建好了, 在cmd窗口输入命令查看 node -v npm -v 1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xxx 为自己创建项目的名称...原创 2021-11-07 17:00:37 · 154 阅读 · 0 评论 -
NodeJs环境搭建
1. Node.js是什么 1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。 1.2 Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 注1:Node.js-->JavaScript运行环境,开发语言是:javascript J2EE --...原创 2021-11-03 16:54:05 · 113 阅读 · 0 评论 -
vue路由
路由是构成Vue的SPA模式的重要组成部分,今天主要学习怎么使用基本的路由进行单页面开发。 准备工作: 导入vue以及vue_router库 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></scr.原创 2021-11-02 20:14:27 · 84 阅读 · 0 评论 -
vue基础语法——02
目标 1.样式绑定 2.事件处理器 3.表单 4.自定义组件 5.组件通信 一、样式绑定 1、 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串、数组、对象 2 、style绑定 v-bind:style="expression" expression的类型:字符串、数组、对象 ①、将字体变红色变大 <!DOCTYPE html> <html> ...原创 2021-10-30 17:15:01 · 266 阅读 · 0 评论 -
vue模板语法——01
目标: 1.插值 2.指令 3.过滤器 4.计算属性&监听属性 一、插值 值的几种形式 1.1文本 {{msg}} 1.2 html 使用v-html指令用于输出html代码 1.3属性 HTML属性中的值应使用v-bind指令 1.4表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()...原创 2021-10-30 10:11:40 · 289 阅读 · 1 评论 -
vue入门
vue官方网址:Vue.js Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。区别于jquery。 今日目标: 1.使用vue显示数据 2.使用vue的事件 3.vue的生命周期 一、vue的使用方法 导入环境, <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> 标签 <div id="dd"> </div.原创 2021-10-28 18:50:00 · 65 阅读 · 0 评论