- 博客(30)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 vue-router编程式的导航
router.push(location, onComplete?, onAbort?)注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。// ...
2018-07-27 15:58:52
354
原创 vue-router动态路由（2）
html页面 <div id="app"> <div class="nav"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `&
2018-07-27 15:35:14
301
原创 vue-router动态路由（1）
main.js入口文件import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, component...
2018-07-26 18:06:39
226
原创 vue-cli安装教程(从零搭建vue+webpack项目)
一 安装node1. 从node.js官网下载并安装node，安装过程很简单。 2. npm 版本需要大于 3.0，如果低于此版本需要升级它：二 安装vue-clinpm install -g vue-cli安装成功后可以输入vue查看相关命令的使用，输入vue list可以查看vue可以用的模板: 我们这里选择webpack模板：vue init webpac...
2018-07-26 11:53:38
2275
原创 vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染
通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留 ，主要用于保留组件状态或避免重新渲染 <!--动态组件-component使用--> <div class="app"> <ul> <li @click="currView='home'">首页</li> &am
2018-07-19 15:12:52
15489
原创 vue 通过prop向子组件通讯
Prop静态传递数据<!--Prop静态传递数据--> <div class="app"> <my-object message="父组件数据" name="父组件名称" age="父组件年龄"></my-object> </div>//Prop静态传递数据
2018-07-19 14:46:10
280
原创 vue子组件向父组件通讯
<div class="app"> <p>父组件接收：{{total}}</p> <button-counter v-on:incrementchind="Total"></button-counter> </div>//子组件的数据Vue.component('but
2018-07-18 17:27:40
214
原创 vue表单控件绑定
文本 {{message}} <input v-model="message" placeholder="编辑"> 多行文本 {{messagetextarea}} <textarea v-model="messagetextarea" placeholder="添加"></textarea> 复选框
2018-07-18 14:35:51
220
原创 vue的生命周期
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>生命周期</title> </head> <body&
2018-07-13 15:19:07
177
原创 vue-router 路由中的钩子
路由配置文件中的钩子函数router/index.js 我们在params路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。三个参数： to:路由将要跳转的路径信息，信息是包含在对像里边的。 from:路径跳转前的路径信息，也是一个对象的形...
2018-07-31 10:59:19
616
翻译 vue-router嵌套命名视图
/settings/emails /settings/profile+-----------------------------------+ +------------------------------+| UserSettings | ...
2018-07-27 16:54:59
2456
原创 vue-router命名视图
<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <
2018-07-27 16:32:47
222
原创 vue 的slot分发内容 （多个分发）
组件模板-元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素<style media="screen"> .panel{ margin:10px;width:150px; border:1px solid #ccc } .panel...
2018-07-19 16:41:24
7333
1
原创 vue 组件定义
全局组件定义 <!--全局--> <div class="app"> <my-object></my-object> <my-object></my-object> </div> <div class="app2"&
2018-07-18 15:41:02
673
原创 vue 事件修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。...
2018-07-17 17:41:13
130
原创 vue数组检测和对象检测更新
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>数组/对象更新检测</title></head><body&
2018-07-17 16:37:09
907
原创 vue过滤排序
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>过滤/排序</title></head><body>
2018-07-17 14:59:17
351
原创 vue渲染dome案例
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>渲染小案例</title></head><body>
2018-07-17 14:31:36
795
原创 vue 列表渲染
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>列表渲染</title></head><body>
2018-07-17 11:33:28
123
原创 vue条件渲染
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>条件渲染</title></head><body>
2018-07-17 10:30:02
117
原创 vue中class和style属性
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>class与style 属性</title></head><styl
2018-07-16 16:40:59
1009
原创 vue模板语法
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>模板语法</title></head><body>
2018-07-13 17:18:00
95
原创 vue 改变数据执行方法
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>构造器</title> </head> <body&a
2018-07-13 11:46:42
3027
原创 v-for 循环遍历（点击DOM获取数据）
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>v-for 循环遍历（点击DOM获取数据）</title> </head>
2018-07-12 18:00:51
2753
原创 vue-devtools安装
1.vue-devtools下载2.复制git地址3.安装git后运行 Git bash Here 控制台4.输入：git clone https://github.com/vuejs/vue-devtools.git 5.进入 vue-devtools目录 安装 npm install6.npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install7....
2018-07-12 16:56:02
503
原创 vue自定义组件和列表循环-新增方法改变数据
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>vue自定义组件和列表循环-新增方法改变数据</title> </head&g
2018-07-12 16:04:27
4719
翻译 String字符串操作
String 对象方法方法描述anchor()创建 HTML 锚。big()用大号字体显示字符串。blink()显示闪动字符串。bold()使用粗体显示字符串。charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接字符串。fixed()以打字机文本显示字符串。fontcolor()使用指定的颜色来显示字符串。fontsiz...
2018-07-11 16:19:23
164
原创 冒泡排序
排序算法图片总结:冒泡排序:解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。 2.第一轮的时候最后一个元素应该是最大的一个。 3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。function sort(arr){ var len=arr.length-1; for (var i = 0; i &l...
2018-07-11 10:36:33
105
原创 rem单位使用法
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<...
2018-07-10 16:56:10
611
原创 em单位使用方法
浏览器中的文本一般默认为16px，也就是说，默认的情况下：1em=16px那如何改变这个设定呢？只要显式的设置body元素的font-size即可。body { font-size: 24px; width: 10em; /* 10em = 24px * 10 = 240px */}em与继承在CSS中，如果一个元素没有设置font-size，那么它的font-size值就...
2018-07-10 16:48:22
2865
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人