- 博客(72)
- 收藏
- 关注
RSS订阅转载 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
167
转载 vue--综合组件间的通信
二、综合组件之间的通信实现一个ToDoList。①完成所有的组件的创建和使用②add点击add按钮时候，将用户输入的内容（todoinput），显示在（todolist）核心代码：兄弟组件间通信 步骤1：var bus = new Vue() 步骤2：在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3：触发事件 bu...
2017-11-03 17:53:00
108
转载 网络请求
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
119
转载 vue环境搭建
要使用vue来开发前端框架，首先要有环境，这个环境要借助于node，所以要先安装node，借助于node里面的npm来安装需要的依赖等等。①安装nodejshttps://nodejs.org下载nodejs，(lts)安装的时候，点击同意，一路next就可以。会自带一个npm（npm是个包管理器，有啥用？是个仓库，需要用到啥 直接npm install packageName就...
2017-11-03 11:57:00
196
转载 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
69
转载 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
111
转载 vue-router实现组件间的跳转---参数传递
四、通过VueRouter来实现组件之间的跳转：参数的传递login ---用户名--->main①明确发送方和接收方②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent}③接收方获取传递来的数据 this.$route....
2017-11-02 21:00:00
202
转载 通过vue-router实现组件间的跳转
三、通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转：①直接修改地址栏中的路由地址<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue....
2017-11-02 19:57:00
144
转载 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
156
转载 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
69
转载 vue组件兄弟间通信
四、兄弟组件间通信（event）借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发var bus = new Vue();bus.$emit()bus.$on()熊大想要发消息给熊二，接收方（熊二）：事件绑定 bus.$on('customEvent',function(msg){ //msg就是通过事件 传递来的数据 })发送方（熊大）...
2017-11-02 15:48:00
117
转载 vue组件父子间通信之综合练习--假的聊天室
<!doctype html><html> <head> <meta charset="UTF-8"> <title>组件父子间通信之综合练习</title> <script src="js/vue.js"></script> </head>...
2017-11-02 14:48:00
96
转载 vue组件父子间通信02
三、组件间通信（$parent $refs）父组件要想获取子组件的数据：①在调用子组件的时候，指定ref属性<child-component ref="mySon"></child-component>②根据指定的引用的名字 找到子组件的实例对象this.$refs.mySon子组件要想获取父组件的数据：①直接读取this.$parent：：：通过...
2017-11-02 14:06:00
57
转载 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
44
转载 vue组件间通信子与父
二、组件间通信（子组件传值给父组件）通过事件的方式来完成数据的传输。①在父组件中 定义一个方法，用来接收子组件所通过事件传来的值methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 }}②绑定事件处理函数事件一般情况 都是自定义事件<child-component @myEvent="recvM...
2017-11-02 13:08:00
72
转载 vue组件父与子通信-登录窗口
一、组件间通信（父组件 --> 子组件）步骤：①父组件在调用子组件 传值 <child-component myValue="123"> </child-component>②在子组件中 获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' })...
2017-11-02 10:21:00
117
转载 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
1533
转载 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
85
转载 vue组件生命周期
分为4个阶段：create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:b...
2017-11-01 19:50:00
62
转载 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
121
转载 Vue组件
w3c为什么有组件概念？现在的前端领域，对于代码的质量和数量有着非常高的要求，特别容易出问题。通过组件的方式来完成代码的管理和编写。组件：是一个可以被反复使用的 带有指定功能的 视图组件化编程 一切都是组件component，把可以被反复使用的任何的视图 都可以封装成组件。类似玩积木。组件化的好处（封装）： 提高开发速度 提高代码的复用率 降低耦合度 提高...
2017-11-01 11:59:00
72
转载 vue自定义过滤器的创建和使用
过滤器：生活中有很多例子，净水器 空气净化器 。过滤器的作用：实现数据的筛选、过滤、格式化。vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。1、过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ ...
2017-11-01 11:18:00
94
转载 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
305
转载 vue的基础使用
1、 通过new的方式来得到了Vue的实例，在new通过一个对象来对Vue的实例配置（el，data）；接触了双花括号(mustache/interpolation)的语法:可以读取变量的值 显示在调用的元素的innerHTML中。2、双花括号 语法： <any>{{表达式}}</any> 作用：执行表达式，将表达式的结果 输出到当前调用元素的i...
2017-11-01 10:47:00
125
转载 vue的概述
一、Vue的概述 Vue的开发模式 和 之前接触的jQuery、原生JSDOM操作是不同的，之前要想修改试图，首先找元素；在使用Vue时，专心把精力放在修改数据。DOM驱动 ---》 数据驱动。what？ Vue的开发者是尤雨溪，是受到angular的启发，是一个实现ui层的渐进式的js框架 版本：V2.4.0 注意： ①并不是所有的ui类的库或者框架 都提供...
2017-11-01 10:42:00
89
转载 框架的概述
1、什么是框架？ 框架指的是一套非常优秀可被反复使用的代码， 帮助开发者解决一些复杂的问题。 比如jQuery帮助搞定简化DOM操作、老版本浏览器兼容问题2、框架的好处！！！ 提高了代码的复用率 降低模块之间的耦合度 提高开发速度 提高代码质量3、怎么才算学会一个框架的使用？ 明确框架的使用场景 框架如何去使用（都有哪些核心的特点） ...
2017-11-01 10:39:00
61
转载 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
70
转载 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
95
转载 双向数据绑定
<!doctype html><html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="js/vue.js"></script> </head> &...
2017-11-01 10:18:00
74
转载 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
47
转载 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
76
转载 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
1599
转载 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
141
转载 vue双花括号的使用
<!doctype html><html> <head> <meta charset="UTF-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <...
2017-11-01 10:12:00
2306
转载 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
40
转载 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
112
转载 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
262
转载 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
219
转载 php+form表单的文件上传
<!doctype html><html> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <h1>文件上传-传统表单方式</h1> <h6&...
2017-09-13 20:52:00
155
转载 css定位
css的定位有：1、普通流定位 普通流定位又称为“文档流定位”，即页面中默认的定位 特点： 所有的元素默认从其父元素左上角开始出现；所有的块级元素，按从上到下排列，每个元素独占一行；页面中行内元素，按照从左到右的方式排列，一行显示不下则换行。<!doctype html><html> <head> &...
2017-09-13 20:47:00
54
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人