自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 资源 (2)
  • 收藏
  • 关注

原创 vue-router编程式的导航

router.push(location, onComplete?, onAbort?)注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。// ...

2018-07-27 15:58:52 353

原创 vue-router动态路由(2)

html页面  <div id="app"> <div class="nav"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `&amp

2018-07-27 15:35:14 300

原创 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 2274

原创 vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染 <!--动态组件-component使用--> <div class="app"> <ul> <li @click="currView='home'">首页</li> &am

2018-07-19 15:12:52 15488

原创 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 213

原创 vue表单控件绑定

 文本 {{message}} <input v-model="message" placeholder="编辑"> 多行文本 {{messagetextarea}} <textarea v-model="messagetextarea" placeholder="添加"></textarea>  复选框

2018-07-18 14:35:51 219

原创 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 615

翻译 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 7330 1

原创 vue 组件定义

全局组件定义 <!--全局--> <div class="app"> <my-object></my-object> <my-object></my-object> </div> <div class="app2"&amp

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&amp

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 794

原创 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 116

原创 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 93

原创 vue 改变数据执行方法

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>构造器</title> </head> <body&a

2018-07-13 11:46:42 3026

原创 v-for 循环遍历(点击DOM获取数据)

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>v-for 循环遍历(点击DOM获取数据)</title> </head&gt

2018-07-12 18:00:51 2751

原创 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 501

原创 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 163

原创 冒泡排序

排序算法图片总结:冒泡排序:解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置。   2.第一轮的时候最后一个元素应该是最大的一个。   3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较。function sort(arr){ var len=arr.length-1; for (var i = 0; i &l...

2018-07-11 10:36:33 104

原创 rem单位使用法

CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素&lt...

2018-07-10 16:56:10 609

原创 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 2862 1

VUE世界城市四级联动下拉组件.rar

这是一套VUE全家桶的Demo里面有数据来源,和JS代码,4级联动下拉组件,可以随意更改,可二次开发无限极联动。

2020-03-19

AddresJson.js

世界城市联动数据,可用于4级联动,可自定义添加修改,无线级联动JSON数据格式,VUE+ElementUi使用最好。

2020-03-19

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除