- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue-吸顶效果（屏幕滚动距离）
要点：vue中不要操作Dom来获取元素，这里用ref属性来替代Dom获取元素。this.$ refs.myswiper.$el ：获取标签上标有属性ref='myswiper’的元素。this. $ refs.myswiper.$el.offsetHeight ：表示该轮播swiper元素的高度document.documentElement.scrollTop： 表示屏幕滚动的高度。...
2020-03-29 00:39:57
530
原创 Js-构造函数
构造函数就是一个普通的函数，创建方式和普通函数没有区别。不同的是构造函数习惯上首字母大写。function Person( ){ }构造函数的执行流程：1.立刻创建一个新的对象2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象3.逐行执行函数中的代码4.将新建的对象作为返回值返回function Person() { this.name = "2班...
2020-03-28 18:56:23
125
原创 vue-轮播
安装swiper cnpm install --save swiperdom结构：<template> <div class="swiper-container fileSwiper"> <div class="swiper-wrapper"> <slot></slot> <!--插槽 -->...
2020-03-28 16:57:14
100
原创 vue-iconfont
Iconfont 是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。很多网站都会用它，比如手淘、新浪微博等。在使用它之前，先来了解一下它的优缺点：优点：（1）文件加载体积小；（2）可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案；（3）支持一些css3对文字的效果，例如：阴影、旋转、透明度；（4）兼容低版本浏...
2020-03-28 15:39:21
128
原创 vue-axios数据请求
导入，在哪用就在哪导入import axios from 'axios'请求数据 mounted () { // axios.get('http://jsonplaceholder.typicode.com/posts').then(res => { // console.log(res.data) // this.datalist = re...
2020-03-28 14:52:44
69
原创 vue-路由守卫
正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，有多种机会植入路由导航过程中：全局的，单个路由独享的或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdata的组件内守卫。全局前置守卫：可以使用router.beforeEach注册一个全局前置守卫：// 全局守卫...
2020-03-27 00:41:44
209
原创 vue-路由History模式
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。如果不想要丑丑的hash，我们可以用路由的hash模式，这种模式充分利用history.pushuState API来完成URL跳转而无需重新加载页面。const router = new VueRouter({ mode: 'history', // mode: ...
2020-03-26 18:13:05
294
原创 vue-动态路由（编程式导航）
路由导航功能是不能传递参数的，也就是说是静态路由。而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，称为动态路由。将参数作为路由。在参数名前面加上 ：，然后将参数写在路由的path内。{ path: '/Detail/:myid', // Detail/aa 动态路由 detail路径不存在，必须加/aa component: Detail}...
2020-03-26 17:22:54
314
原创 vue-路由重定向和二级路由
重定向：{ path:"*", redirect:"/home" }二级路由（嵌套）：{ path: '/File', component: File, children: [ { path: '/File/nowplaying', component: Nowplaying }, ...
2020-03-26 16:28:14
335
原创 vue-路由导航
a标签：<template> <nav> <!--导航 --> <ul> <li> <a href="/file">file</a> </li> <li> <a h...
2020-03-26 15:29:02
74
原创 vue-一级路由配置
路由配置：Vue.use(VueRouter)const routes = new router({ routes: [ { path: '/film', component: File }, { path: '/cinema', component: Cinema }, { path: '...
2020-03-24 19:04:36
557
原创 vue-配置反向代理
反向代理用来解决前端跨域问题先下载库：cnpm install --save axios引用：import axios from 'axios'Vue.config.js的配置proxy代理官方文档vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也...
2020-03-24 17:31:45
407
原创 vue-eslint_打包
最好先执行自动修复错误代码（比如少一个空格）npm run lint打包npm run build最后会生成一个dist的目录，里面的所有文件都会被压缩（一行），.vue文件转换成js代码，可以将dist目录直接交给后端。...
2020-03-24 16:58:16
362
原创 vue-多个单文件组件
多个组件可以在一起使用，它们的关系可以是：平行的、嵌套包含的目标：应用两个组件，它们是彼此平行的关系使用：把组件用import引入、用conmponent注册。组件引用（2种）注册后引用（全局定义方式）：<script>import navbar from './components/Navbar'import sidebar from './components...
2020-03-24 16:43:13
628
原创 vue-指令轮播
自定义指令-轮播*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)*this.$nextTick()<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title...
2020-03-24 16:01:34
99
原创 vue-单文件组件
Vue.js自定义的一种文件格式：.vue文件，称为单文件组件，就是将html、css、js封装在同一个文件内，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。1、编写单文件组件（.vue结尾的文件），由3部分组成；//<template>、<style>、<script> <template> htm...
2020-03-24 16:00:40
174
原创 vue-自定义指令
自定义指令介绍 directives钩子函数参数 el,binding,vnode(vnode.context)bind,inserted,update,componentUpdated,unbind<!DOCTYPE html><html><head> <meta charset="utf-8"> <met...
2020-03-22 23:36:58
73
原创 vue-swiper组件
自定义封装swiper组件（基于swiper） 注意： 防止swipe初始化过早<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title> <script type="text/javascript...
2020-03-22 23:20:26
177
原创 vue-组件生命周期
生命周期各个阶段<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <div id="box"> <ul>...
2020-03-22 22:29:51
48
原创 vue-列表过度
列表过渡(设置key)不同于 transition，它会以一个真实元素呈现，默认为一个 。也可以通过 tag 特性更换为其他元素。提供唯一的 key 属性值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</titl...
2020-03-22 22:02:22
190
原创 vue-transition多组件过渡-购物页面切换
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title> <style type="text/css"> * { margin: 0px; ...
2020-03-22 18:49:04
128
原创 vue-transition多元素过渡
多个元素过渡(设置key)*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为 了效率只会替换相同标签内部的内容。mode:in-out ; out-in<!DOCTYPE html><html><head> <meta charset="utf-8"> <...
2020-03-22 18:39:43
647
原创 vue-transition单元素过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。vue中常见的内置组件：transitionkeep-alive ：防止重新渲染。router-view单元素/组件过渡css过渡css动画结合animate.css动画库transition组件使用动态绑定 name 的方式实现多组件之间的切换过渡效果,想要实现过渡效果需要配合过渡的css类...
2020-03-22 18:19:50
215
原创 vue-slot插槽
*混合父组件的内容与子组件自己的模板–>内容分发*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。a. 单个slot<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title>...
2020-03-22 18:00:25
54
原创 vue-动态组件
* 元素，动态地绑定多个组件到它的 is 属性* 保留状态，避免重新渲染<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <div ...
2020-03-22 17:38:35
64
原创 vue-非父传子事件（中央事件）&ref
var bus = new Vue(); mounted生命周期中进行监听<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <di...
2020-03-22 17:12:47
81
原创 vue-ref通信
<input ref="mytext"/> this.$refs.mytext<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> ...
2020-03-22 16:55:26
207
原创 vue-组件子传父（事件机制）
a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> ...
2020-03-21 23:10:01
559
原创 vue-组件父传子
i. 父子组件传值 (props down, events up)ii. 属性验证 props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)<!DOCTYPE html><html><head> <meta charset="utf-8">...
2020-03-21 22:13:24
78
原创 vue-组件
a.全局组件 Vue.componentb.局部组件Vue.component("zjname", { template: `<div>全局定义</div>` //局部组件 components: { navbarchild: { template: `<div>navbarchild-只能再父组件中使用</div>`...
2020-03-21 21:57:02
66
原创 vue-计算属性-模糊查询
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <div id="box"> <input type="te...
2020-03-21 21:22:24
233
原创 vue-计算属性
-计算属性是基于它们的依赖进行缓存的。-计算属性只有在它的相关依赖发生改变时才会重新求值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> ...
2020-03-21 20:57:54
115
原创 vue-表单修饰符
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <div id="box"> <input type="tex...
2020-03-21 16:28:08
168
原创 vue-购物车商品的添加、删除和计算总金额功能
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Examples</title> </head><body> <div id="box"> <...
2020-03-21 16:09:10
1368
原创 vue-列表渲染
v-for (特殊 v-for=“n in 10”)a. inb. ofkey：*跟踪每个节点的身份，从而重用和重新排序现有元素*理想的 key 值是每项都有的且唯一的 id。data.id<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl...
2020-03-21 15:12:27
204
原创 vue-条件渲染
(1)v-if：作用与v-show相同，本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，相反则移除。(2)v-else v-else-if(3)template v-if ,包装元素template 不会被创建(4)v-show：根据真假切换元素的显示状态，指令后面的内容最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，原理是修改元素的d...
2020-03-21 14:39:44
68
原创 vue-class与style
绑定HTML Class-对象语法-数组语法绑定内联样式-对象语法-数组语法//需要将 font-size =>fontSize<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati...
2020-03-21 14:28:30
121
原创 vue-v-if指令
作用与v-show相同，本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，相反则移除。<div id="app"> <div v-if="isCreated">动态创建和删除</div> </div><script src="http://cdn.jsdelivr.net/npm/...
2020-03-20 16:41:21
234
原创 vue-v-show指令
v-show 根据真假切换元素的显示状态，指令后面的内容最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，原理是修改元素的display，实现显示隐藏。 <div id="app"> <!-- v-show 根据真假切换元素的显示状态 指令后面的内容最终都会解析为布尔值 ...
2020-03-20 16:25:12
393
原创 vue基础
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})输出：Hello Vue!更多基础应用：&...
2020-03-20 15:57:25
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人