大前端系列
文章平均质量分 75
烟雨平生ing
这个作者很懒,什么都没留下…
展开
-
vue-element-admin 、vue-admin-template
一、vue-element-admin1、简介vue-element-admin是基于element-ui 的一套后台管理系统集成方案。功能:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能GitHub地址:https://github.com/PanJiaChen/vue-element-admin项目在线预览:https://panjiachen.gitee.io/vue-element-admin原创 2021-11-02 15:26:28 · 739 阅读 · 0 评论 -
vue-router路由
文章目录Vue Router安装配置路由在主程序入口导入路由配置使用路由Vue RouterVue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSS class的链接HTML5历史模式或hash模式,在IE9中自动降级自定义的滚动条行为安装在项目目录下cmdnpm i原创 2021-10-08 10:39:57 · 59 阅读 · 0 评论 -
vue-cli 脚手架
文章目录什么是wue-cli安装第一个vue-cli程序创建初始化并运行什么是wue-clivue-ci官方提供的一个脚手架用于快速生成一个wue的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建 Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速主要的功能统一的目录结构本地调试热部署单元测试集成打包上线安装cmd: npm install vue-cli-g否安装成功后查看可以基于哪些模板创建vue应用程序,通常我们选择webpack原创 2021-10-08 09:52:04 · 175 阅读 · 0 评论 -
vue -- 自定义事件
文章目录自定义事件自定义 -- 组件事件删除vue实例中数据1、在vue实例中添加删除数组todoItems数据的方法`todoItems` -- 根据传入下标2、在组件中添加按钮触发remove,定义组件remove方法并绑定事件补充:事件名大小写问题3、view视图添加v-on监听时间remove,触发vue实例removertems方法自定义事件数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了, Vue为我们提供了自定原创 2021-10-07 22:12:36 · 210 阅读 · 0 评论 -
vue -- 插槽 slot
文章目录插槽演示插槽Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。插槽顾名思义,类似于卡槽,我们可以在卡槽中插入需要插入的卡插槽内可以包含任何模板代码,包括 HTML,甚至其它的组件演示1、定义一个包含插槽slot的组件<slot name="todo-title"></slot> 用于插入标题<slot name="todo-items"></sl原创 2021-10-07 20:55:58 · 80 阅读 · 0 评论 -
vue -- 计算属性
文章目录什么是计算属性基础例子计算属性的 setter计算属性缓存 vs 方法什么是计算属性计算属性的重点突出在属性两个字上(属性是名词) ,首先它是个属性其次这个属性有计算的能力(计算是动词) ,这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性) ,仅此而已;可以想象为缓存!模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ mes原创 2021-10-07 20:13:16 · 64 阅读 · 0 评论 -
Axios 异步通信框架
文章目录1. 什么是Axios2. 为什么要使用Axios3. 安装4. 演示1. 什么是AxiosAxios是一个开源的可以用在浏览器端和NodeJs的异步通信框架,她的主要作用就是实现AJAX异步通信,其功能特点如下:从浏览器中创建XMLHttpRequests从nodejs创建http请求支持Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF (跨站请求伪造)网址GitHub: https://原创 2021-10-07 17:42:32 · 284 阅读 · 0 评论 -
vue -- 组件
文章目录什么是组件定义与复用 -- 定义一个名为 button-counter 的新组件,并复用通过 Prop 向子组件传递数据什么是组件组件是展复用的Vue实例,说白了就是一组可以重复使用的模板,跟JSTL的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:定义与复用 – 定义一个名为 button-counter 的新组件,并复用每复用用一次组件,就会有一个它的新实例被创建一个组件的 data 选项必须是一个原创 2021-10-07 16:11:55 · 75 阅读 · 0 评论 -
vue 双向数据绑定 --表单数据绑定
文章目录什么是双向数据绑定为什么要实现数据的双向绑定1. 表单输入绑定文本 、多行文本复选框单选按钮下拉选择框什么是双向数据绑定Vue. js是—个 MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue js的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有原创 2021-10-07 15:37:27 · 1794 阅读 · 0 评论 -
vue入门
文章目录1、概述1、概述Vue (读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易上手,还便于与第三方库(如: vue-router:跳转, vue-resource:通信, vuex:管理)或既有项目整合。官网: https://cn.vuejs.org/v2/guide/...原创 2021-10-07 11:05:29 · 206 阅读 · 0 评论 -
MVVM模式
文章目录什么是MVVM为什么要使用MVVMMVM的组成部分ViewModelViewModel什么是MVVMMVVM (M odel-View-View Model)是一 种软件架构设计模式,由微软WPF和Silverlight 的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman于2005年在他的博客上发表。MVVM源自于经典的MVC (Model-View-Controller)模式。 MVVM的核心是ViewModel层,负责转原创 2021-10-07 10:59:49 · 145 阅读 · 0 评论 -
Webpack 前端资源加载/打包工具
文章目录1、什么是Webpack2、Webpack安装3. 初始化一个项目 用于测试打包4. JS打包5. Css打包1、什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。2、Webpack安装1、全局安装npm install -g webpack webpack-cli2原创 2021-10-06 17:08:21 · 157 阅读 · 0 评论 -
前端模块化
文章目录1. 简介2. CommonJS规范导出模块引入模块2. ES6模块化规范导出模块导入模块Babel 转换1. 简介模块化产生的背景随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(modul原创 2021-10-06 16:44:03 · 65 阅读 · 0 评论 -
Babel转码器
文章目录简介安装Babel的使用简介ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。安装安装命令行转码工具Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:npm install -g babel-cli#查看是否安装成功babel --versionBabel的使用创建bab原创 2021-10-06 16:22:08 · 427 阅读 · 0 评论 -
NPM包管理器
文章目录1. 简介2. 项目初始化3. 修改npm镜像设置镜像地址4.安装依赖第三方模块在项目中安装在js中使用全局安装依赖包更新与卸载1. 简介NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于前端的Maven 。官方网站:[https://www.npmjs.com/](https://www.npmjs.com/作用:1:快速构建nodejs工程2:快原创 2021-10-06 16:01:26 · 104 阅读 · 0 评论 -
ES6
文章目录ES6 -- ECMAScript6ES6的语法:let(变量)和const(常量)命令ES6 – ECMAScript6编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。ECMAScript定义了:[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[M原创 2021-10-06 14:56:39 · 71 阅读 · 0 评论 -
Node.js的安装和基础使用
文章目录Nodejs下载安装Nodejs入门快速入门-Hello WorldNode - 实现请求响应Node-操作MYSQL数据库NodejsNode 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个原创 2021-10-05 18:13:44 · 180 阅读 · 2 评论