- 博客(72)
- 收藏
- 关注
转载 vue启动流程
继上一篇vue环境的搭建(在D盘新建文件夹vue_cli,把(我已经上传到了文件下)资料下tpls解压完后的所有文件都复制到D盘vue_cli下)目录如图:1、webstorm设置为了提高webStrom在Vue项目中响应速度,设置:选中项目,点击右键,mark directory as,excluded进入到CLI:windows+R cmdd:cd vue_clinp...
2017-11-06 10:46:00 177
转载 vue--综合组件间的通信
二、综合组件之间的通信实现一个ToDoList。①完成所有的组件的创建和使用②add点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist)核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bu...
2017-11-03 17:53:00 121
转载 网络请求
fake api:http://jsonplaceholder.typicode.com/posts方便对于网络模块做测试。正常情况,需要公司的服务器。一、网络请求需要vue-resource.js插件this.$http .get('url') .then(function(response){ // response.data 就是服务器端所返回的数据 })&l...
2017-11-03 15:35:00 137
转载 vue环境搭建
要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。①安装nodejshttps://nodejs.org下载nodejs,(lts)安装的时候,点击同意,一路next就可以。会自带一个npm(npm是个包管理器,有啥用?是个仓库,需要用到啥 直接npm install packageName就...
2017-11-03 11:57:00 202
转载 vue--路由嵌套
路由嵌套的SPA实现的步骤:A(/a)组件需要嵌套B组件(/b)和C组件(/c)①准备嵌套其它组价的父组件 指定一个容器在A组件指定一个容器<router-view></router-ivew>②在A组件的路由配置对象中指定children属性{ path:'/a', component:A, children:[ {path:'/b',compo...
2017-11-03 10:22:00 75
转载 vue路由高级用法
五、路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',redirect:'/list'}path:'*' 异常处理 {path:'*',component:'NotFound'}<!doctype html><htm...
2017-11-03 09:42:00 115
转载 vue-router实现组件间的跳转---参数传递
四、通过VueRouter来实现组件之间的跳转:参数的传递login ---用户名--->main①明确发送方和接收方②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent}③接收方获取传递来的数据 this.$route....
2017-11-02 21:00:00 215
转载 通过vue-router实现组件间的跳转
三、通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转:①直接修改地址栏中的路由地址<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue....
2017-11-02 19:57:00 148
转载 SPA(single page application)
一、SPA的概述SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中。SPA的工作原理: eg: http://127.0.0.1/index.html#/start①根据地址栏中url解析完整的页面:index.html 加载index...
2017-11-02 17:30:00 166
转载 vue组件之间通信总结---点赞
总结:父组件--》子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过...
2017-11-02 16:39:00 72
转载 vue组件兄弟间通信
四、兄弟组件间通信(event)借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发var bus = new Vue();bus.$emit()bus.$on()熊大想要发消息给熊二,接收方(熊二):事件绑定 bus.$on('customEvent',function(msg){ //msg就是通过事件 传递来的数据 })发送方(熊大)...
2017-11-02 15:48:00 125
转载 vue组件父子间通信之综合练习--假的聊天室
<!doctype html><html> <head> <meta charset="UTF-8"> <title>组件父子间通信之综合练习</title> <script src="js/vue.js"></script> </head>...
2017-11-02 14:48:00 101
转载 vue组件父子间通信02
三、组件间通信($parent $refs)父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"></child-component>②根据指定的引用的名字 找到子组件的实例对象this.$refs.mySon子组件要想获取父组件的数据:①直接读取this.$parent:::通过...
2017-11-02 14:06:00 60
转载 Vue组件父子间通信01
子组件传递数据 用户已经登录父组件接收数据 并显示列表,未登录不显示列表/* 有两个组件,分别是main-component,header-component.main-component是由header-component和一个列表(有5条数据 [100,200,300,400,500]),header-component是由一个h1的标签:'这是页头',有一个数据isUse...
2017-11-02 13:32:00 51
转载 vue组件间通信子与父
二、组件间通信(子组件传值给父组件)通过事件的方式来完成数据的传输。①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 }}②绑定事件处理函数事件一般情况 都是自定义事件<child-component @myEvent="recvM...
2017-11-02 13:08:00 79
转载 vue组件父与子通信-登录窗口
一、组件间通信(父组件 --> 子组件)步骤:①父组件在调用子组件 传值 <child-component myValue="123"> </child-component>②在子组件中 获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' })...
2017-11-02 10:21:00 125
转载 vue猜数字游戏
<!doctype html><html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> ...
2017-11-01 20:46:00 1590
转载 vue组件的watch属性
<!doctype html><html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <...
2017-11-01 20:03:00 90
转载 vue组件生命周期
分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:b...
2017-11-01 19:50:00 65
转载 vue复合组件----注册表单
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body&g...
2017-11-01 18:02:00 132
转载 Vue组件
w3c为什么有组件概念?现在的前端领域,对于代码的质量和数量有着非常高的要求,特别容易出问题。通过组件的方式来完成代码的管理和编写。组件:是一个可以被反复使用的 带有指定功能的 视图组件化编程 一切都是组件component,把可以被反复使用的任何的视图 都可以封装成组件。类似玩积木。组件化的好处(封装): 提高开发速度 提高代码的复用率 降低耦合度 提高...
2017-11-01 11:59:00 76
转载 vue自定义过滤器的创建和使用
过滤器:生活中有很多例子,净水器 空气净化器 。过滤器的作用:实现数据的筛选、过滤、格式化。vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了。1、过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ ...
2017-11-01 11:18:00 99
转载 vue自定义指令的创建和使用
一、自定义指令的创建和使用Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令.1、自定义指令①创建 new Vue({ directives:{ cha...
2017-11-01 11:15:00 313
转载 vue的基础使用
1、 通过new的方式来得到了Vue的实例,在new通过一个对象来对Vue的实例配置(el,data);接触了双花括号(mustache/interpolation)的语法:可以读取变量的值 显示在调用的元素的innerHTML中。2、双花括号 语法: <any>{{表达式}}</any> 作用:执行表达式,将表达式的结果 输出到当前调用元素的i...
2017-11-01 10:47:00 132
转载 vue的概述
一、Vue的概述 Vue的开发模式 和 之前接触的jQuery、原生JSDOM操作是不同的,之前要想修改试图,首先找元素;在使用Vue时,专心把精力放在修改数据。DOM驱动 ---》 数据驱动。what? Vue的开发者是尤雨溪,是受到angular的启发,是一个实现ui层的渐进式的js框架 版本:V2.4.0 注意: ①并不是所有的ui类的库或者框架 都提供...
2017-11-01 10:42:00 97
转载 框架的概述
1、什么是框架? 框架指的是一套非常优秀可被反复使用的代码, 帮助开发者解决一些复杂的问题。 比如jQuery帮助搞定简化DOM操作、老版本浏览器兼容问题2、框架的好处!!! 提高了代码的复用率 降低模块之间的耦合度 提高开发速度 提高代码质量3、怎么才算学会一个框架的使用? 明确框架的使用场景 框架如何去使用(都有哪些核心的特点) ...
2017-11-01 10:39:00 67
转载 v-for指令
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Vue的常见指令</title> <script src="js/vue.js"></script> </head> &l...
2017-11-01 10:25:00 79
转载 vue分页练习
<!doctype html><html> <head> <meta charset="UTF-8"> <title>分页练习</title> <script src="js/vue.js"></script> </head> <st...
2017-11-01 10:20:00 104
转载 双向数据绑定
<!doctype html><html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="js/vue.js"></script> </head> &...
2017-11-01 10:18:00 80
转载 v-text、v-html、v-bind、v-show
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <style> .myPink{color:pink;} </style> <s...
2017-11-01 10:17:00 52
转载 vue事件的绑定
<!doctype html><html> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/vue.js"></script> </head> <bo...
2017-11-01 10:15:00 83
转载 vue同意本站协议的制作
<!doctype html><html> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/vue.js"></script> </head> <bo...
2017-11-01 10:15:00 1611
转载 v-if指令
<!doctype html><html> <head> <meta charset="UTF-8"> <title>v-if选择指令</title> <script src="js/vue.js"></script> </head> &l...
2017-11-01 10:14:00 148
转载 vue双花括号的使用
<!doctype html><html> <head> <meta charset="UTF-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <...
2017-11-01 10:12:00 2325
转载 Vue实例1
<!doctype html><html> <head> <meta charset="UTF-8"> <title>第一个Vue</title> <!-- 1、引入js文件 --> <script src="js/vue.js"></scri...
2017-11-01 10:09:00 49
转载 SVG绘制随机的柱形图+php
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: ce...
2017-09-13 21:00:00 126
转载 canvas绘制随机颜色的柱形图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: ce...
2017-09-13 20:57:00 271
转载 SVG绘制多个圆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: ce...
2017-09-13 20:54:00 230
转载 php+form表单的文件上传
<!doctype html><html> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <h1>文件上传-传统表单方式</h1> <h6&...
2017-09-13 20:52:00 168
转载 css定位
css的定位有:1、普通流定位 普通流定位又称为“文档流定位”,即页面中默认的定位 特点: 所有的元素默认从其父元素左上角开始出现;所有的块级元素,按从上到下排列,每个元素独占一行;页面中行内元素,按照从左到右的方式排列,一行显示不下则换行。<!doctype html><html> <head> &...
2017-09-13 20:47:00 60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人