前端组件

项目技术： webpack + vue + element（mint-ui, etc...） + axois (vue-resource) + less-loader+ ... vue的操作的方法案例： 1.数组数据还未获取到，做出预加载的动画 <el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"> <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"> <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"> </el-carousel-item>// 实际显示的内容-跑马灯 <div v-if="!movieArr.length" class="ticket-index-movie-loading"> <span class="el-icon-loading "></span> </div>// 当 movirArr的数组为空的时候，做出的预加载 loading </el-carousel> 2. 按钮状态的判断，按钮能不能点的问题 <p v-if="

背景 近期在写React的前端时遇到了使用Echarts只有图表没有其他组件的情况，在询问大佬之后找到了解决方法。 遇到问题 引用Echarts除了能够显示图表以外无法显示其他组件，整个图比较死板。 我的错误 没有注意最开始的引用，看着其他博客写的使用了按需引入，显示图表之后没有注意还引用了相关组件，例如tooltip，title，legend。所以导致了即使在option中写了使用tooltip等组件的代码，但最终的结果还是只有图表的显示，没有相关组件。 解决方法 注意最开始的引用 对于Echarts有两种引用方式，第一种是 按需引入 ，代码如下 首先引入基本的echarts组件 import echarts from 'echarts/lib/echarts' 如果要使用 折线图 和 柱状图 ，还需要引入相关组件 import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line' 使用 title 、 tooltip 、 legend 等组件，还需要引入相关组件 import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import 'echarts

内容回顾 - 过滤器 - 局部的过滤器 // 只能在当前组件内部使用 filters : function ( val , a , b ) { // 执行过滤处理逻辑,(添油加醋的内容) return xxx ; } - 全局的过滤器 // 声明+创建 在任何组件中都能使用 Vue . filter ( "myTime" , function ( ) { // 添油加醋的处理 return xxxx ; } ) - 生命周期-钩子函数 beforeCreate这个方法不常用 create 组件创建完成, 可以发起ajax(XMLHTTPRequest 简称 XHR axios fetch $.ajax())请求 实现数据驱动视图思想 beforeMount 挂载 mounted DOM挂载完成 beforeUpdate 获取原始的DOM updated 后去更新之后的DOM beforeDestroy 组件销毁之前 destroyed 组件销毁之后 actived 激活当前组件 Vue提供的内置组件 <keep-alive></keep-alive> deactivated 停用当前组件 vue-router 核心插件 主要作用: 实现单页面应用,为了用户体验,后端资源过多,可能会出现白屏的现象 现在都用前后端分离,甚至现在有些后端里面的前后台管理都分离了 模板引擎: node

搭建环境 工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了，那我们就只需要执行以下命令： $ npm install -g vue-cli 构建完了之后，随便进入一个我们事先准备好的目录，比如demo目录，然后在目录中做初始化操作： $ vue init webpack vue-cli-demo webpack 参数是指 vue-cli-demo 这个项目将会在开发和完成阶段帮你自动打包代码，比如将 js 文件统一合成一个文件，将 CSS 文件统一合并压缩等。 init (初始化)的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后出现以下界面，部分会提示你接下来要做的操作，按照它的提示继续敲代码就对了。 同时获取信息： npm i -S axios vue-axios cd vue-cli-demo npm install npm run dev npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间； 同样也可以使用 yarn npm run dev 是开始执行我们的项目了

前言 最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。 另外 ，我也尝试有过想法：如果把整个iframe节点保存起来，然后需要切换时把它渲染到目标节点上，能否实现iframe页不被刷新呢？————也是不可行的，iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。 实现的思路 既然保持iframe页里的状态很难实现，在这个时候我想到了一个别的方法。能否在Vue的route-view节点上动点手脚？使得在切换 非iframe页 的时候使用Vue的路由，当切换 iframe页 时则使用 v-show 切换显示与隐藏，使得iframe节点 一直不被删除 ，这样就能保持iframe的状态了。

Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource 是一个通过 XMLHttpRequrest 或 JSONP 技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。 使用的版本是： vue-resource 0.7.2 配置 参数配置 分为： 全局配置 组件实例配置 调用配置 这三部分的优先级依次增高，游戏机高的配置会覆盖优先级低的配置。 全局配置 Vue.http.options.root = '/root'; 全局配置option属性 组件实例配置 在实例化组件时可以传入 http 选项来进行配置 new Vue({ http: { root: '/root', headers: { Authorization: '' } } }) 方法调用时配置 在调用 vue-resource 请求方法是传入选项对象。 new Vue({ ready: function() { // get 请求 this.$http.get({url: '', headers: { Authorization: '' } }) .then(() => { // 请求成功回调

后台管理 添加随笔 编写博客的基础 001 学到的markdown语法 python计算机基础 002 计算机的组成原理 003 编程语言分类 004 网络的瓶颈效应 005 计算机操作系统 006 python计算机基础之编程 python基础 python基础 007 python基础1 008 python基础2 009 Python 和Python解释器 010 python变量 011 Python变量内存管理 012 python解压缩 013 python注释 014 python格式化输出的三种方式 015 python基本算术运算符 016 python流程控制if判断与循环(for、while) 017 python深浅拷贝 018 python异常处理 019 接触python的一些小练习 python基础实战之猜年龄游戏 python支持的数据类型 020 python常量 021 python数字类型 022 python字符串类型 023 python列表类型 024 python字典类型 025 python布尔类型 026 python元组 027 python集合 028 python数据类型 029 一个列表如何根据另一个列表进行排序(数组的相对排序) 030 列表如何移除指定原属 031 列表内字典的排序 032 字典去重与排序 文件处理

谈谈 React Hooks React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题。 这个状态指的是状态逻辑，所以称为状态逻辑复用会更恰当，因为只共享数据处理逻辑，不会共享数据本身。 不久前精读分享过的一篇 Epitath 源码 - renderProps 新用法 就是解决 JSX 嵌套问题，有了 React Hooks 之后，这个问题就被官方正式解决了。 为了更快理解 React Hooks 是什么，先看笔者引用的下面一段 renderProps 代码： function App() { return ( <Toggle initial={false}> {({ on, toggle }) => ( <Button type="primary" onClick={toggle}> Open Modal </Button> <Modal visible={on} onOk={toggle} onCancel={toggle} /> )} </Toggle> ) } 恰巧，React Hooks 解决的也是这个问题： function

地址：https://segmentfault.com/a/1190000007087934 Vue可以构建一个完全不依赖后端服务的应用，同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX，JSPNP等技术的服务端通信。 vue-resource 是一个通过 XMLHttpRequrest 或 JSONP 技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。 使用的版本是： vue-resource 0.7.2 配置 参数配置 分为： 全局配置 组件实例配置 调用配置 这三部分的优先级依次增高，游戏机高的配置会覆盖优先级低的配置。 全局配置 Vue.http.options.root = '/root'; 全局配置option属性 组件实例配置 在实例化组件时可以传入 http 选项来进行配置 new Vue({ http: { root: '/root', headers: { Authorization: '' } } }) 方法调用时配置 在调用 vue-resource 请求方法是传入选项对象。 new Vue({ ready: function() { // get 请求 this.$http.get({url: '', headers: {

1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法 而MobX提供了一种存储，更新 状态 的方法 React 和 MobX都在优化着软件开发中相同的问题。 React 使用的方法是让 虚拟DOM 来减少繁琐而沉重的DOM变化。 而MobX则通过一个虚拟的 状态依赖图表 来让react组件和应用状态同步化来减少不必要的状态导致组件更新 1.2. 安装 MobX： npm install mobx --save React bindings： npm install mobx-react --save 1.3. 要点 MobX看起来很复杂的样子，其实是用它只需要三步 定义你的状态，让它们成为观察者(observable) 存储状态(Store state)可以是任何的数据结构，随你定义为：对象，数组，类，循环结构，引用都没所谓。但需要记住一点，就是：随着时间的变化，用MobX 去把它们定义成观察者(observable) import {observable} from 'mobx' let appState = observable({ timer: 0 }) 我们不需要让appState去观察什么。你现在就能创建视图(view)，每当appState的相关数据发生变化的时候，就会自动更新。MobX会采用最优的方式去更新你的视图