![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
何北木
这个作者很懒,什么都没留下…
展开
-
PC端Element-UI的使用
1. 安装插件安装Element-UI插件配置Element-UI插件2. 安装按需导入的依赖安装babel-plugin-component依赖配置babel.config.js文件module.exports = { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui",原创 2020-10-28 13:48:16 · 737 阅读 · 0 评论 -
移动端Vant-UI库的使用
1. 第一步:安装插件安装 Vant-UI 库npm i vant -S// 运行时依赖安装按需导入插件babel-plugin-importnpm i babel-plugin-import -D// 开发时依赖// babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。配置 babel.config.jsmodule.exports = { plugins: [ ['import',原创 2020-10-20 19:34:23 · 3658 阅读 · 0 评论 -
项目接口
1. 电商管理后台 API 接口文档1.1. API V1 接口说明接口基准地址:http://127.0.0.1:8888/api/private/v1/服务端已开启 CORS 跨域支持API V1 认证统一使用 Token 认证需要授权的 API ,必须在请求头中使用 Authorization 字段提供 token 令牌使用 HTTP Status Code 标识状态数据返回格式统一使用 JSON1.1.1. 支持的请求方法GET(SELECT):从服务器取出资源(一项或多项)原创 2020-09-20 21:48:17 · 2405 阅读 · 4 评论 -
Better-Scroll移动端滚动插件
1. BetterScroll 是什么BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。2. BetterScroll 的安装npm 安装:npm install bet原创 2020-09-01 00:05:04 · 377 阅读 · 0 评论 -
项目创建篇
1. 项目创建用脚手架VueCLI3来创建用github来托管项目2. 项目文件夹划分项目外层文件夹划分// 1. public 目录放公共资源// 2. src 目录放源码src 目下的文件夹划分// 1. src/assets 目录存放资源,如: css、img// 2. src/components 目录存放公共组件// 3. src/views 目录存放视图组件// 4. src/router 目录存放路由相关文件// 5. src/store 目录存放公共状态(数据)原创 2020-08-27 20:42:05 · 146 阅读 · 0 评论 -
axios 网络模块
1. 选择什么网络模块Vue 中发送网络请求有非常多的方式,那么在开发中,如何选择呢?1. Ajax: 传统的Ajax是基于XMLHttpRequest(XHR),配置和调用方式等非常混乱,所以真实开发中很少直接使用, 而是使用 jQurey-Ajax2. jQurey-Ajax:在Vue的整个开发中都不需要使用 jQuery 了,所以我们不会为了一个网络请求,就引进jQuery, 因为jQuery的代码1W多行,Vue的代码才1W多行3. Vue-resource:官方在Vuel原创 2020-08-26 23:18:37 · 176 阅读 · 0 评论 -
Vuex 状态(数据)管理
1. Vuex 是什么Vuex:是一个专门为vue.js应用程序开发的状态管理模式,也就是一个插件vuex:也集成到Vue的官方调试工具 devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能2. 状态管理到底是什么其实,你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面然后将这个对象放在顶层的Vue实例中,让其它组件可以使用那么多个组件是不是就可以共享这个对象中所有的变量属性了呢3. 管理什么状态呢比如原创 2020-08-26 16:43:32 · 276 阅读 · 0 评论 -
Vue-Router 前端路由
1. 概述路由是一个网络工程里面的术语路由就是通过互联的网络把信息从源地址传输到目的地址的活动后端路由:后端处理URL和页面之间的映射关系前端路由:前端处理URL和页面之间的映射关系2. 后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示但是,一个网站,这么多页面,服务器如何处理呢?●. 每个页面都有自己对应的网址,也就是URL●. URL会发送到服务器,服务器通过正则对该URL进行匹配,并且最后交给一个C原创 2020-08-24 15:07:28 · 290 阅读 · 0 评论 -
Vue CLI脚手架篇
1. 概述如果只是写几个Vue的Demo小程序,那么就不需要Vue CLI如果开发大型项目,那么就需要,并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码的目录结构、项目部署、热加载、代码单元测试等事情,如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以我们会使用一些脚手架工具来帮助完成这些事情CLI是什么意思:CLI是Command-Line Interface,翻译为命令行界面,俗称脚手架Vue CLI是一个官方发布 vue.js项目脚手架原创 2020-08-21 20:40:25 · 240 阅读 · 0 评论 -
Webpack 打包工具篇
1. 概念1.1 Webpack 是什么Webpack 是一个对模块化代码进行打包的工具Webpack 可以帮助我们处理模块间的依赖关系,并且进行整合打包而且不仅仅是javaScript文件,我们的CSS、图片、json文件等等在Webpack中都可以被当做模块来使用1.2 打包就是将Webpack中的各种资源模块进行打包合并成一个或者多个包(Bundle)并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css将ES6语法转换成ES5语法,将TypeScript原创 2020-08-15 16:58:21 · 310 阅读 · 0 评论 -
ES6模块化、响应式
1. 概述在视图页面引入js文件的时候,在script标签中把类型设置为typr=module,表示这个js文件是一个模块,外面不能直接访问它内部的数据外部想要访问模块化js中的文件,只有通过模块化的导出和导入来实现2. export 导出在需要暴露数据的js页面中,使用 export 来导出想要暴露的数据使用 ES6 字面量对象增强的方式导出导出方式一:导出变量和函数 const flag = '张三' const sun = function () {}原创 2020-08-14 16:33:53 · 159 阅读 · 0 评论 -
Vue动画
1. 动画原创 2020-08-14 16:31:48 · 70 阅读 · 0 评论 -
Vue 网络请求篇
1. 网络请求Vue中发送网络请求有非常多的方式,那么在开发中,如何选择呢Ajax: 传统的Ajax是基于XMLHttpRequest(XHR),配置和调用方式等非常混乱所以真实开发中很少直接使用,而是使用jQurey-AjaxjQurey-Ajax:在Vue的整个开发中都不需要使用jQuery了,所以我们不会为了一个网络请求,就引进jQuery,因为jQuery的代码1万多行,Vue的代码才1万多行Vue-resource:官方在Vuel.x的时候就推出了Vue-resourc原创 2020-08-14 15:52:13 · 4099 阅读 · 0 评论 -
Vue 生命周期篇
1. 生命周期概述什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件这些事件,统称为生命周期生命周期钩子:也称作 生命周期事件或 生命周期函数这些生命周期函数也是Vue实例的属性成员与data、methods…平级,当我们需要在某个生命周期阶段处理业务的时候可以,可以使用某个生命周期函数主要的生命周期函数分为三类2. 生命周期函数2.1 创建期间的生命周期函数当刚初始化一个 Vue 实例对象的时候,这个对象身上只有一些默认的生命周期函数和默认的事件,其它东西都原创 2020-08-13 22:51:50 · 257 阅读 · 0 评论 -
Vue之组件篇
1. 组件的概念组件思想:就是把一个很大的复杂的 web 页面视图给拆分成一块一块的组件视图,然后利用某种特定的方式把它们组织到一起完成完整的 web 应用构建有了组件化的思想,就会提高开发效率,代码的可维护性更强,其次就是代码的复用性尽可能将页面拆分成一个个小的、可复用的组件,这样让我们的代码更加方便组织和管理,并且扩展性也更强任何应用都会被抽象成一颗组件树2. 组件的使用2.1 组件的定义组件的定义方式分两种:全局定义:全局组件定义在全局,都在任意组件中都可以使用 局部定义:原创 2020-08-13 19:08:21 · 231 阅读 · 0 评论 -
Vue 修饰符篇
1. 事件修饰符1.1 .stop 阻止事件冒泡修饰符事件冒泡:a 标签里面有 b 标签,当 a 标签和 b 标签都绑定了点击的事件,那么点击 b 标签的时候会先触发 b 标签的事件,然后接着触发 a 标签的事件,这就叫事件冒泡阻止事件冒泡,在b标签的事件名后面加上.stop修饰符示例: <input type='button' value='按钮' @click.stop='show'>1.2 .prevent 阻止事件默认行为比如在触发事件的时候阻止超链接跳转示例原创 2020-08-11 22:42:41 · 125 阅读 · 0 评论 -
Vue 指令操作篇
1. 文本指令1.1 mustache{{}}语法-插值mustache(八字须),因为{{}}像八字须,所以也叫八字须语法如果标签中有其它内容,插值表达式不会覆盖,只会替换自己占位符的内容插值表达式有闪烁的问题,详情参考v-cloak指令<div> {{ msg }} </div> <!--把 msg 属性中的值插入到 div 标签中-->1.2 v-cloak 指令解决插值语法闪烁的问题如果我们的 vue 包是在页面加载之后再加载的情况下,那么原创 2020-08-11 22:41:33 · 306 阅读 · 0 评论 -
Vue 实例篇
1. Vue的使用1.1 vue.js 的安装方式一:直接CDN引入<script src='https://cdn.jsdelivr.net/npm/vue'></script> 方式二:下载到本地引入<script src='vue.js'></script>方式三:npm 下载// 下载命令npm install vue// 页面中引用<script src="node_modules/vue/dist/vue.原创 2020-08-11 22:38:30 · 366 阅读 · 0 评论 -
前端框架初识
1. 网站交互及开发方式1.1 经典的多页面例如:京东商城、唯品会特点:前后端糅合在一起,开发维护效率低用户体验一般,点击刷新跳转,等待时间过长每个页面都需要重新加载渲染,速度慢有利于SEO搜索引擎搜索(蜘蛛会爬链接)1.2 现代式的单页面例如:网易云音乐、coding单页面应用程序的最主要目的是为了让你的前后端开发能够分离,用户体验反而是其次的开发方式好,前后端分离,开发效率高,可维护性好,服务端不关心页面,只关心数据,客户端不关心数据库及数据操作,只关心 通过接口拿数据和服原创 2020-08-10 14:13:18 · 227 阅读 · 1 评论