- 博客(29)
- 收藏
- 关注
RSS订阅原创 vue学习 25路由和Http
路由路由跳转：性能比a标签好a标签：发送请求、跳转、页面刷新路由：不会请求，页面刷新，直接跳转安装路由（安装到node_modules组件中） npm install vue-router --save-dev融合到项目中vue add routermain.js// The Vue build version to load with the `impo...
2019-04-30 16:16:56
104
原创 vue学习 24生命周期（钩子函数）
生命周期：一个组件从实例化，创建它开始到结束的一个过程作用：调试、寻找问题、找错误、解决需求钩子函数：与el属性同级 beforeCreate:function(){ alert("组件实例化之前执行的函数"); }, created:function(){ alert("组件实例化完毕，但页面还未显示。一般在此时调用接口数据,并把值赋值给属性"); }...
2019-04-30 09:50:20
128
原创 vue学习 23事件传值（子to父）
想法：在Header.vue里面有一个方法changeTitle，当触发changeTitle方法时，App.vue中的title值被改变实现流程：Header.vue的方法。在changeTitle方法中注册一个事件methods: { changeTitle: function(){ // this.title = 'changed'; this.$e...
2019-04-29 11:46:34
121
原创 vue学习 22传值和传引用
属性传值可以传两种东西1.传具体的值2.传一个引用如果是传引用，基本上就两个，一个是我们的数组，一个是对象传引用的话，如果有不止一个地方应用到。改变其中一个，别的地方也会被改变。无论是否在一个组件当中传值的话，只会改变当前组件中应用到的地方Users.vue<template> <div class="users"> <ul&...
2019-04-29 10:30:31
389
原创 vue学习 21属性传值props
vue传值的两种形式：1.父组件向子组件传值2.子组件向父组件传值父组件向子组件传值（属性传值），使用props属性在App.vue（父组件）中返回数据<template> <div id="app"> <app-header></app-header> <users v-bind:users="use...
2019-04-29 09:23:37
343
原创 vue学习 20实战Demo
App.vue<template> <div id="app"> <app-header></app-header> <users></users> <app-footer></app-footer> </div></template>...
2019-04-28 11:41:52
265
原创 box-sizing 设置或检索对象的盒模型组成模式
box-sizing:border-box;border-box为怪异盒模型,该对象的padding合border被包含在定义的width和height之内。即该对象的宽度不会随padding和border的改变而改变，在宽度设为定值或有最大值时很实用取值：content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置...
2019-04-28 10:40:39
175
原创 vue学习 19组件CSS作用域
组件分为3个部分1.模板2.行为3.样式组件中的样式会覆盖根组件的样式；那么我们怎么实现在一个组件中一个样式？很容易，只需要在组件的style标签中添加scoped属性（即css的作用域）<style scoped>h1{ color: purple;}</style>...
2019-04-26 10:44:05
167
原创 vue学习 18组件嵌套
在components文件下新建Users.vue组件文件<template> <div class="users"> <ul> <li v-for="user in users"> {{user}} </li> </ul> </div...
2019-04-26 10:09:33
125
原创 vue学习 17介绍SRC文件流程及根组件App
src介绍assets 图片文件component 组件文件App.vue 根组件main.js在入口文件index.html执行后执行组件之间关联<script>// 组件之间产生关联：首先要导入，然后在components: {HelloWorld} 注册import HelloWorld from './components/HelloWorld'...
2019-04-26 09:18:47
147
原创 vue学习 16搭建脚手架CLI
CLI：命令行界面（英语：command-line interface，缩写：CLI），也有人称之为字符用户界面（CUI）vue cli的好处脚手架是通过webpack搭建的开发环境使用ES6语法打包和压缩JS为一个文件项目文件在环境中编译，而不是浏览器实现页面自动刷新全局安装vue-cli下面是安装2.9.6版本的npm install --globa...
2019-04-25 16:23:58
128
转载 PHP常用正则表达式汇总
平时做网站经常要用正则表达式，下面是一些讲解和例子，仅供大家参考和修改使用："^\d+$" //非负整数（正整数 + 0）"^[0-9]*[1-9][0-9]*$" //正整数"^((-\d+)|(0+))$" //非正整数（负整数 + 0）"^-[0-9]*[1-9][0-9]*$" //负整数"^-?\d+$" //整数"^\d+(\.\d+)?$" //非负浮点数...
2019-04-24 11:22:50
142
原创 vue学习 15初识组件的应用
new Vue({ el: "#vue-app-one"});只需要绑定元素即可，这样每个对象都非常干净html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> ...
2019-04-19 17:14:15
185
转载 PHP下载图片的方法
1.PHP提供图片下载方法download.php代码<?php//获取要下载的文件名$filename=$_GET['filename'];//设置头信息header('Content-Disposition:attachment;filename='.basename($filename));header('Content-Length:'.filesi...
2019-04-14 16:01:21
2176
原创 vue学习 14实例化多个vue对象
在第二个组件当中，去改变第一个组件当中的某个属性的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="text...
2019-04-12 10:19:55
346
原创 vue学习 1初识vue及引入CDN
Vue官网渐进式：没有太多限制的框架，能与很多其他框架配。AngularJS有很多限制、规则。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel=...
2019-04-10 08:38:55
250
原创 vue学习 13实战DEMO
有一些图片，对应一些按钮的触发，触发到一定程度，会更换图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="t...
2019-04-10 08:38:48
189
原创 vue学习 2实例化vue对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="text/css" href="style.css"> ...
2019-04-10 08:38:33
182
原创 vue学习 12指令v-for
v-for="(item, index) in arr",其中item就是arr中的每个值,index是每个元素的索引（0开始）。若item是对象，则item.对应的属性名；如果v-for绑定的DOM对象是template标签（<template v-for="(item, index) in arr">），则template标签不会被渲染在html文档中...
2019-04-09 13:21:48
488
原创 vue学习 11指令v-if
v-if绑定的元素不占用html文档v-else-if搭配v-if做条件继续判断v-show会占用html文档，是对样式style="display:none"的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>...
2019-04-09 11:08:27
197
原创 vue学习 10vue-动态绑定CSS样式
标签绑定class属性：v-bind:class="{changeColor: true}"注意里面的写法是对象的形式html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title&g...
2019-04-08 17:38:55
358
原创 vue学习 9 vue计算属性Computed
vue对象中的methods对象所有的方法，都会在页面加载时执行一次，这是正常的，但有个问题：methods中每有一个方法被调用，其他方法都会执行一次，这样很耗费性能。而computed计算属性（也是对象，和methods兑现一样），就避免了该问题，调用其中一个方法时，其他方法不会被调用。通常情况下，我们还是使用methods属性写方法，只有在搜索查询或比较耗时的情况下才会用到computed...
2019-04-07 10:39:05
178
原创 vue学习 8vue-双向数据绑定
双向数据绑定一定是跟input、select或者是textarea有关系的（因为他们可以选择、输入）在vue中使用v-model更适合ref：ref在vue2.0中是可以用来给input标签标记的，标记完之后，我们就可以在js里面通过$refs去调用input标签中的值了。<input type="text" v-on:keyup="logName" ref="name">...
2019-04-05 13:53:03
116
原创 vue学习 7键盘事件及键值修饰符
键盘事件：按键按下，按键抬起，点击等等。键值修饰符：.enter（回车）；.alt（alt键）；可链式操作，如.alt.enter需同时按下alt键和回车按键抬起时触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>...
2019-04-04 17:56:40
201
原创 vue学习 6Vue事件修饰符（once、prevent、stop）
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面，阻止跳转到另一个页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 点击事件将只会触发一次 --><a...
2019-04-04 17:10:16
1418
原创 vue学习 5vue事件，点击、双击、鼠标事件
vue中绑定事件：v-on:click="add(1)"，使用v-on:绑定一个事件（也可以用@符号，如@click="add(1)"）,(如点击事件，触发add()方法)html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <titl...
2019-04-04 15:23:08
3978
原创 vue学习 4vue-属性绑定
给属性绑定一个值：v-bind:标签的属性名="vue对象的data对象里面的属性值（如果不是data对象里面的属性值，会报错）"，双向绑定（v-model）绑定一个html标签：v-html="websiteTag"。把标签的内容显示在DOM文档中html<!DOCTYPE html><html lang="en"><head> ...
2019-04-04 11:59:03
157
原创 vue学习 3vue数据和方法
data:用于数据（字符串、number、数组、对象...）的存储的一个对象，自定义key和value。value可以是字符串、number、方法、数组、对象...methods: 用于存储各种方法的一个对象(在方法中使用当前对象中的属性，正常获取是this.data.name,但在vue中直接是this.name)。使用的当前对象里面的方法也是直接this.greet()html...
2019-04-04 08:54:34
1137
原创 JavaScript分割、合并字符串
分割字符串stringObj.split( separator[ , limit])separator分隔符limit 可选，限制返回的数组元素的个数连接数组arrayObj.join(separator)separator连接符返回一个元素顺序被反转的 Array 对象。arrayObj.reverse()注意：使用reverse()方法，必...
2019-04-02 17:32:16
1161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人