Vue
宫城诗
这个作者很懒,什么都没留下…
展开
-
20181120 Vue框架中的动画效果
可以利用父组件的show:来v-if 来操作该组件是否显示,如果要加动画效果呢需要在外部加上一个标签transition,他包裹的内容会有动画效果,Vue会自动的赋予div两个类样式,fade-enter 与 fade-enter-active在最上面的style中增加类的样式 .fade-enter 和 .fade-enter-active ,需要自动手动编写当动画运行到第二帧的时候,f...原创 2018-11-20 14:46:37 · 401 阅读 · 0 评论 -
20181120 Vue中插槽概念
在建立子模板的时候,template中 如果 v-for=‘item of list’ 在多个地方调用子模板,此时就需要有插槽的概念子组件模板Vue("child",{data,template,<slot v-for='item of list' :item='item"></slot>在父组件模板中<div><child>//在内...原创 2018-11-20 14:20:05 · 422 阅读 · 0 评论 -
20181114 Vue生命周期函数
最近一周的进展可算是把travel的vue项目搭建并且能够正常的使用本周重复第二遍,对系统的知识进行查缺补漏traveltravel-practice2018/11/13初入江湖Vue不支持IE8及以下版本,因为vue使用了IE8无法模拟Es5的特性首先导入vue.js这个js文件var app = new Vue()//创建了vue的实例 vue不用借助于dom的任意操作el:...原创 2018-11-14 22:26:30 · 90 阅读 · 0 评论 -
20181106 Vue结构
今天是一八年十一月六日 重新开始首先是index.html的页面,一般设定为主页而这个主页在body标签中只有一个div标签标签中 id选择器有appmain.js的代码new了一个vue的实例app.vue 是一个组件移动客户端就是可以在手机终端运行的软件。也是3G/4G产业中一个重点发展的项目,具有重要的意义,具体如下:1、客户端(Client)或称为用户端,是指与服务器相对应,...原创 2018-11-07 09:56:51 · 187 阅读 · 0 评论 -
20181101 Vue子父传值
当父组件给子组件加了传值子组件应该进行对参数进行约束在props这个子组件中声明一个对象type:类型default:缺省的时候应该有什么字段validator:function//校验器,来校验里面的内容给组件绑定原生事件需要在子组件的template中进行绑定事件不能再div中的再进行绑定事件,这样子组件毫无反应需要利用this.$emit(“click”)但是这种方法需...原创 2018-11-01 23:21:47 · 142 阅读 · 2 评论 -
20181031 Vue样式绑定
vue中的样式绑定给要进行的操作的标签进行绑定,:class=“activate:isActivated”class的样式是activate 取决于isActivated现在data的对象中加入 isActivated这个属性为false注册鼠标点击事件,当点击的时候变成true 这样class就变成了activate改变了样式<!DOCTYPE html><htm...原创 2018-10-31 23:08:53 · 152 阅读 · 0 评论 -
20181030 Vue模板
当初始化一个vue的实例new Vue()init Events & Lifecycle 此时会自动调用beforeCreate这个函数当一些注入完成之后,会有created函数是否有el 的选项是否有template的属性beforeMount函数mounted函数beforeDestroy函数destroyed函数beforeUpdate函数updated函数...原创 2018-10-30 23:33:39 · 97 阅读 · 0 评论 -
20181029 Vue小结
小总结:首先要引入vue.js的包然后声明一个变量利用vue的函数创建实例,el://是限制范围 vue实例接管哪个标签里的内容data: //数据外部函数想要调用数据实例对象名.$实例想要的内个参数对象.属性的名字="//进行更改v-for在标签的属性中写, 这样就会遍历vue实例中所需要的list中所有的东西然后在调用利用{{}}进行进行调用绑定事件 v-on:之后用来修饰...原创 2018-10-29 23:03:35 · 87 阅读 · 0 评论 -
20181028 Vue.js语法
vue.js 语法双向的页面绑定:数据变化页面变化和前端数据集变化是一样的小实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <sc原创 2018-10-29 12:10:49 · 106 阅读 · 0 评论 -
20181027 进军Vue.js
链式编程和end方法jquery冲突的问题进军vue.jsvue.js都能做基础语法-MVVM模式-组件化-生命周期函数-动画特效实战项目-环境搭建-使用git-数据模拟-本地开发前后端代码-联调-真机测试-完整上线流程第一章:课程介绍第二章:vue初探第三~五章:基础知识精讲第六~九章:vue项目实战第十章:项目测试上线流程以及后续学习指南vue不支持ie8一下的浏览器...原创 2018-10-27 23:14:59 · 113 阅读 · 0 评论 -
20200129——element-ui的安装
安装npm i element-ui -S上手在main.js中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);完成就可以在Vue文件中使用标签进行开发...原创 2020-01-29 14:56:57 · 97 阅读 · 0 评论 -
20200128——创建Vue项目
安装环境依赖nodegitvue-cli网上有教学vue init webpack "项目名称"原创 2020-01-28 11:26:41 · 71 阅读 · 0 评论 -
20200128—— vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188.5
找到C:\Windows\System32\drivers\etc的host文件打开添加192.30.253.112 github.com151.101.88.249 github.global.ssl.fastly.net解决了。原创 2020-01-28 11:15:42 · 1745 阅读 · 2 评论 -
201911111——生病了重写esmap项目
创建地图容器,在script中的代码运行呈现都需要调用这个map-container这个东西 <div id="map-container"></div>需要地图数据和主题数据到你的项目中都放在static文件夹下,在vue中我创建了一个叫esmap2的文件夹,存放数据。其中,mapData是地图数据所在目录,theme是地图主题所在目录配置参数项,创建...原创 2019-11-11 16:17:47 · 381 阅读 · 4 评论 -
20191025——多少次打开的vue的官网
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。第一个实例<div id="app"> {{ messa...原创 2019-11-11 13:27:25 · 112 阅读 · 0 评论 -
20191023——浅谈javascript的map数据结构
JavaScript 的对象( Object), 本质上是键值对的集合( Hash 结构), 但是传统上只能用字符串当作键。 这给它的使用带来了很大的限制。var data = {}; var element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElemen...原创 2019-10-25 14:32:35 · 111 阅读 · 0 评论 -
20191023——复习webpack.base.conf.js
此文章来解释vue-cli脚手架中,build目录中的webpack.base.conf.js配置文件var path = require('path') //引用node.js模块var utils = require('./utils') //主要处理css-loadervar config = require('../config') //引入config目录下的index.j...原创 2019-10-23 18:29:59 · 481 阅读 · 0 评论 -
20191023——esmap继续开发
<template> <div> <div id="map-container"></div> <div class="viewmode-group"> <button id="btn3D" class="btn btn-default" @click="click2D"></button...原创 2019-10-23 18:23:30 · 956 阅读 · 2 评论 -
20191022——复习前端
新看一个项目想要给复制到vue中,已经忘了怎么用原始html去写前端代码。这次就当做一个复习吧。一开始是html的声明 声明必须是 HTML 文档的第一行,位于 标签之前。html标签。 然后lang =en 语言使用英语然后是head标签,head标签,用于定义文档的头部,它是所有头部元素的容器,head中的元素可以引用脚本,指示浏览器在哪里找到样式表,提供元信息。meta标签...原创 2019-10-23 16:11:12 · 118 阅读 · 0 评论 -
20191022——esmap开发 地图添加组件
几乎大部分的控件在地图加载完毕之后,才能与地图有交互添加楼层控制组件var ctlOpt = new esmap.ESControlOptions({ position: esmap.ESControlPositon.RIGHT_TOP, imgURL: "image/wedgets/" }); 2.在地图加载完成事件中新建楼层控制控件对象...原创 2019-10-22 20:34:34 · 793 阅读 · 0 评论 -
20191022——esmap停车场地图开发 初步实现
项目想开发一个可视化的地图页面,上网寻找了也没找到合适的和好看的,看到某公司有一个看起来稍微成熟的框架,边拿过来进行引用。公司链接sdk的引用,不支持require js引用,只能使用script src 属性进行引用<script src="./static/esmap/esmap.min.js"></script>创建地图容器 <div id="map...原创 2019-10-22 17:21:50 · 1135 阅读 · 3 评论 -
20190703——他山之石可以攻玉 关于cookie,LocalStorage 与Session
Cookiecookie是小甜饼的意思,顾名思义,cookie确实非常小。它的大小被限制为4KB左右,主要用途保存登录信息。比如你登录某个网站市场可以看到记住密码,这就是通常在Cookie中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage是H5标准新加入的技术,并不是跨时代的新东西,早在IE6时代,就有一个叫userData的东西用于本地存储而且考虑到浏览...原创 2019-07-03 13:43:07 · 147 阅读 · 0 评论 -
20190328——Element复习
<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><div class="grid-conte...原创 2019-03-28 13:38:11 · 449 阅读 · 0 评论 -
20190911——Vue.use与Vue.prototype
其实不管使用哪一种方式,最终都是调用方式都是vue.api()Vue.use()到底做了些什么,可以使我们安装一个自定义的Vue的插件,为此,我们要声明一个install函数,var install = function(Vue) { if (install.installed) return // 如果已经注册过了,就跳过 install.installed = true ...原创 2019-09-11 21:07:03 · 184 阅读 · 0 评论 -
20190716——Vue项目的感悟
多看认真看所有的官网无论vue vuex vue-router element-ui闲着没事的时候就去多看看代码的体现,决定了你是不是码农。学习首先是模仿,模仿到别人为什么去写,或者说为什么用这个逻辑去做main.js文件所有的引入Vue.use()深入进去,路由到路由守卫还有sessionStorage/localStorage再到axios的所有交互,发送的数据段,键值对。...原创 2019-07-16 17:22:34 · 133 阅读 · 0 评论 -
2010525——关于npm的指令
npm run dev 执行的文件build/dev-server.js文件,执行了:检查node和npm的版本引入相关插件和配置创建express服务器和webpack编译器配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)挂载代理服务和中间件配置静态资源启动服务器监听特定端口(8080)自动打开浏览器并打...原创 2019-05-27 22:15:52 · 106 阅读 · 0 评论 -
20190527——travel项目重写2
关于meta标签通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。首先要明白meta标签具有两个属性:它们分别是http-equiv属性和name属性。关于meta标签的name=“viewport” 概述<meta name="viewport" content...原创 2019-05-27 22:12:32 · 112 阅读 · 0 评论 -
2010525——travel项目重写
配置环境node.js git vue-clivue init webpack travel项目初始化完,会在一开始的文件夹,如果想运行整个项目,进入到创建好的travel文件夹下cd travelnpm run devnpm run dev 执行的文件build/dev-server.js文件,执行了:检查node和npm的版本引入相关插件和配置创建express服务器和w...原创 2019-05-25 14:54:56 · 107 阅读 · 0 评论 -
20190417——重启一个vue注册页面的项目
到项目目录,vue init webpack “项目名称”然后得到是一个最基础的vue的代码![在这里插入图片描述](https://img-blog.csdnimg.cn/20190416145731204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nL...原创 2019-04-18 10:39:16 · 1256 阅读 · 0 评论 -
20190328——Vue复习(1)
router 路由的复习<router-link>相当于a标签,直接路由到想要页面, to="路径"想要使用路由必须在router文件夹下面的index.js部署好路由的路径当想要进行部署,必须import引入文件。wmain.js挂载在app的Vue文件上适应stylus需要install依赖包npm install stylus --savenpm insta...原创 2019-04-03 13:26:32 · 182 阅读 · 0 评论 -
20190313——Vue中的样式绑定
在绑定的div上 绑定一个:class=一个属性,从而在style中定义这个类的属性。在本篇demo是activated但是每一个activated后面有一个属性叫isActivated这个属性,在Vue实例vm中进行定义,有true或者是falsetrue为该类显示,false该类不显示<!DOCTYPE html><html lang="en"><hea...原创 2019-03-13 19:49:20 · 93 阅读 · 0 评论 -
20190312——Vue的计算属性,方法和监听器
我们显示英文中的名与姓本篇demo的以 dell 与 lee在data 中声明了firstname与lastname,但是在差值表达式中不希望有过多的逻辑。所以应用到了计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2019-03-13 13:04:12 · 227 阅读 · 0 评论 -
20190312——Vue模板语法
第一种模板语法{{data中变量名}} 差值表达式第二种v-text=“这里面不仅仅是一个值,还是一个js的表达式”第三种v-html="" 有点像js中的innerText与innerHTML的关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2019-03-12 20:37:22 · 86 阅读 · 0 评论 -
20190312——Vue实例中的生命周期钩子
在官网中有生命周期图示所谓生命周期函数,就是Vue实例在某一个时间点会自动执行的函数在最开始的init events和lifecycle这个时间点,会执行一个beforeCreate这个生命周期函数外部注入与绑定的时候,create这个函数会自动的执行询问是否有el这个选项,有就会走yes这条线。当这个没有模板的时候,就会把挂载的这个vue实例当做整个模板来进行渲染beforeMou...原创 2019-03-12 20:29:36 · 358 阅读 · 0 评论 -
20190531——关于iconfont图标库的使用
方法一进入项目,生成在线链接,如://at.alicdn.com/t/font_1199749_deo2fjl10md.css在vue组件的style元素中,使用@import引入在线css@import "//at.alicdn.com/t/font_1199749_deo2fjl10md.css";template元素中使用方式如下:<i class="iconfont ic...原创 2019-05-31 12:32:28 · 888 阅读 · 0 评论 -
20190531——travel项目继续重写
配置好css的iconfont文件之后,在页面上引用图标为了更好的使系统具有维护性,需要在styles下面新建一个stylus文件,来管理所有的全局的一些重复的变量。当你用stylus的来控制的时候,需要在用import引用在之前我们在mian.js引入的时候,@符号表示当前src目录下,所以我们可以在引入的时候也这么去使用,不过要在前面加上一个波浪线在整个项目的build文件...原创 2019-05-31 15:34:04 · 126 阅读 · 0 评论 -
20190715——axios的阅读
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });最简单的这种,get后面跟url,然后得到返回的数据axios.get('/user', { ...原创 2019-07-15 19:52:14 · 67 阅读 · 0 评论 -
2090715——axios中的数据返回
axios会通过.then .catch当得到请求失败的时候,用.catch来捕获错误。.then来进行正确的请求。 login({ username: this.ruleForm.username, password: this.ruleForm.password }).then((response) => { ...原创 2019-07-15 16:54:41 · 904 阅读 · 0 评论 -
20190715——前端大集合
element的el-row与el-col<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><...原创 2019-07-15 15:44:25 · 807 阅读 · 0 评论 -
20190628——axios深入阅读
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的特点从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装 npm install axios调用案例get...原创 2019-06-28 12:09:13 · 115 阅读 · 0 评论