随笔分类 -  前端框架

1
介绍echarts、element、bootstrap、vue、jquery、javascript等前端框架
Element-ui 使用详细介绍
摘要：一.后台搭建 使用 "vue admin template" 来快速搭建后台管理,它包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 Element是（饿了么团队）基于MVVM框架Vue开源出来的一套 阅读全文
posted @ 2019-12-03 14:34 zlgSmile 阅读(7112) 评论(0) 推荐(1)
vue vuex应用
摘要：vue结构图: vuex为vue的一个插件,用来管理共享数据的,局部数据声明在自己组件内部. 没有使用vuex时,所有共享数据和操作数据的方法都声明在父组件内,数据的通信用props及pubsub等.下面是由vuex改下之前编写的一个小demo: 效果图示: 需求: header 部输入任务,进行 阅读全文
posted @ 2019-11-25 01:21 zlgSmile 阅读(247) 评论(0) 推荐(0)
vue router应用及总结
摘要：编写一个小的demo，对router基础的应用学习和理解。 效果图示： 说明: 点击About在右边显示相关信息. 说明: 点击Home，在下边显示相关信息，且Home下有两个路由链接，分别对应各自的路由组件. 说明: Message下有三个路由链接，对应的路由组件只有一个，只是根据传入的参数不同显 阅读全文
posted @ 2019-11-21 00:09 zlgSmile 阅读(355) 评论(0) 推荐(0)
vue axios应用
摘要：编写小的demo应用axios异步请求. 效果图示: 功能: 用户在输入框中输入信息进行搜索,并搜索状态随之改变(四种状态). 项目目录: 代码: 1.index.html 2.main.js 3.App.vue 4.Search.vue 5.Main.vue 阅读全文
posted @ 2019-11-19 03:03 zlgSmile 阅读(213) 评论(0) 推荐(0)
Vue Element使用第三库icon图标
摘要：一：引入单设图标 1.打开 "阿里icon" ，注册 登录 图标管理 我的项目 2.新建项目 返回阿里icon首页，点进去你想要的icon库，因为没有批量导入购物车，所以一般情况下需要一个一个去点，太浪费时间，那么请在控制台输入以下代码，批量导入 css / 引入ali icon / [class^ 阅读全文
posted @ 2019-11-18 16:28 zlgSmile 阅读(2058) 评论(0) 推荐(0)
vue组件化编程应用2
摘要：写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 需求: header 部输入任务,进行 添加 ,在list中显示; list 中每个item项, 鼠标移入 时, 背景变灰并显示delete按钮 .点击按钮可 删除 该项; 鼠标移出 时,恢复原样; footer 部: 1. 阅读全文
posted @ 2019-11-18 03:45 zlgSmile 阅读(271) 评论(0) 推荐(0)
vue组件化编程应用
摘要：写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 功能: Add组件用于 添加用户评论 ,提交后右边评论回复会立马显示数据.Item组件点击删除可以 删除当前用户评论 .当List组件中用户评论为空时,会 提示"暂无评论，点击左侧添加评论". 项目目录: 代码: 1.ind 阅读全文
posted @ 2019-11-17 23:24 zlgSmile 阅读(366) 评论(0) 推荐(0)
vue组件化编程
摘要：一:vue项目目录 build : webpack.base.conf.js : config index.js 二:组件化编程相关文件分析 1.主页面 index.html 说明:主页面只有id为app的div标签,主入口main.js文件(配置相关内容后)会被自动编译并挂载到div标签中,bui 阅读全文
posted @ 2019-11-17 00:00 zlgSmile 阅读(208) 评论(0) 推荐(0)
javascript详细介绍
摘要：一、JavaScript基础 1.什么是JavaScript? JavaScript是一种客户端运行的解释性脚本语言。 JavaScript是由网景(Netscape)推出的产品。 Microsoft推出的JScript。 ECMAScript(欧洲计算机制造商协会), 2.JavaScript能做 阅读全文
posted @ 2019-08-08 01:41 zlgSmile 阅读(404) 评论(0) 推荐(0)
vue指令
摘要：1.常用内置指令 2.自定义指令 阅读全文
posted @ 2019-08-07 15:59 zlgSmile 阅读(163) 评论(0) 推荐(0)
vue生命周期
摘要：生命周期图示 钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 javascript new Vue( 阅读全文
posted @ 2019-08-06 15:54 zlgSmile 阅读(174) 评论(0) 推荐(0)
bootstrap-select、datatables插件使用
摘要：1.引入样式文件 2.使用 2.1 tab页切换 2.2 bootstrap select插件 2.3 datatables插件 2.4 ajax请求 阅读全文
posted @ 2019-08-02 18:31 zlgSmile 阅读(971) 评论(0) 推荐(0)
vue基础介绍及使用
摘要：1.vue基本使用 2.vue模板语法 3.计算属性与监视 4.强制绑定class和style 5.条件渲染 6.列表渲染 7.列表过滤和排序 8.事件处理 9.表单输入绑定 10.vue的生命周期 11.过渡与动画 12.过滤器 阅读全文
posted @ 2019-07-10 21:07 zlgSmile 阅读(343) 评论(0) 推荐(0)
echarts之折线图介绍及使用
摘要： 阅读全文
posted @ 2019-05-21 00:00 zlgSmile 阅读(8427) 评论(0) 推荐(0)
jquery常用动画效果及使用
摘要：动画效果: 1.显示/隐藏动画效果 动态的改变当前元素的宽,高和不透明度 show([duration],[fn]); //显示当前元素 hide([duration],[fn]); //隐藏当前元素 toggle([duration],[fn]); //切换当前元素的可见状态 duration:动 阅读全文
posted @ 2019-04-13 02:44 zlgSmile 阅读(443) 评论(0) 推荐(0)
jquery常用事件介绍及使用
摘要：一:jq中事件 1.页面载入事件 ready()方法 格式: $(document).ready(function(){}); $(function(){}); 2.绑定事件 click(),dblclick(),focus(),blur(),mouseover(),mouseout(),chang 阅读全文
posted @ 2019-04-13 02:43 zlgSmile 阅读(351) 评论(0) 推荐(1)
jquery对dom操作的一系列方法总结
摘要：一.dom对象和jq对象 1.对象含义 dom对象:js方法获取元素,将dom对象存储在变量中 jq对象:jq方法获取元素的jq对象,将jq对象存储在变量中 相互之间不能使用另外一个对象的任何属性和方法 2.相互之间的转化 a.jq转为dom: 方法:不带参数时,返回一个dom对象的数组; 带参数时 阅读全文
posted @ 2019-04-13 02:41 zlgSmile 阅读(567) 评论(0) 推荐(1)
关于bootstrap的js插件介绍及使用
摘要：模式框: div.modal fade div.modal dialog div.modal content div.modal header div.model body div.model footer 模式框关闭: Cancel 下拉菜单： Dropdown trigger ... 标签页: 阅读全文
posted @ 2019-04-13 01:51 zlgSmile 阅读(364) 评论(0) 推荐(0)
关于bootstrap的css组件介绍及总结
摘要：Glyphicons 图标: span.glyphicon glyphicon align center 下拉菜单: div.dropdown/div.btn group button[data toggle=dropdown/.dropdown toggle] ul.dropdown menu l 阅读全文
posted @ 2019-04-13 01:43 zlgSmile 阅读(228) 评论(0) 推荐(0)
关于bootstrap的css样式总结
摘要：页面大块布局: div.container 栅格系统: 一行分成 12 列 div.row div.col md 12 div.col xs 12 图片自动生成: 文本对齐: p.text left; p.text center; p.text right; 块标签对齐: div.pull left 阅读全文
posted @ 2019-04-13 01:40 zlgSmile 阅读(677) 评论(0) 推荐(0)

1