vue.js
Jessie-moving
You have a dream, you got to protect it.
展开
-
动画使用 & animate.css库 & velocity.js & 动画钩子函数
1、transition运用:显隐<style type="text/css"> .round { width: 200px; height: 200px; border-radius: 50%; background: red; } .circle-enter, .circle-leave-to { width: 0; height: 0; ...原创 2019-03-30 13:20:07 · 555 阅读 · 0 评论 -
关于模拟数据
一般写在static/mock里面用axios访问时,路径要改为“/api/index.json”格式,上线之前最好不要改动代码需要将文件设置//config文件夹中index.js中进行代理设置//webpack的dev-sever提供的proxyTable: { "/api": { target: "http://localhost:8080"...原创 2019-04-15 19:36:26 · 455 阅读 · 0 评论 -
better-scroll
作用:实现滑动效果首先,在github上搜索better-scrollhttps://github.com/ustbhuangyi/better-scroll在vue中安装npm install better-scroll --save引入:import BScroll from ‘better-scroll’按照里面的用法:套两层容器<div class="wrapper"&g...原创 2019-04-12 12:19:05 · 847 阅读 · 0 评论 -
父组件中子组件上事件执行
问题描述:在父组件内给子组件上添加自定义事件,如图为click,并不能执行。解决方法一:添加事件修饰符@click.native(此处不能自定义事件,只能用原生事件) <div id="app"> <count @click="putButton"></count> <!-- 解决方法一 --> <!-- <count ...原创 2019-03-29 10:18:23 · 764 阅读 · 0 评论 -
props特性 & 组件参数检验
文章目录一、props特性二、组件参数校验一、props特性props中定义的数据跟data中数据一样,会直接添加在组件实例化对象上,并设置了特性,所以可以直接this.content进行访问,可直接在插值语法{{}}中使用,可进行简单逻辑处理,但是不能在methods中直接对值进行更改;通过属性传值,并在props中定义的该属性不会在标签中显示;非props的属性会在标签中显示 &l...原创 2019-03-28 21:37:02 · 319 阅读 · 0 评论 -
关于小bug的处理及ref的运用
1、关于标签混乱排列<div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </div> &...原创 2019-03-28 20:02:31 · 170 阅读 · 0 评论 -
列表渲染 & 数据更新检测
v-for指令v-for=“item in items”可将in换成of数组中为item,index对象中为value,key,index理想的 key 值是每项都有的唯一 id。必须在使用 v-for 时提供 key。key是Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联-不推荐同时使用v-if和v-for <li v-for="item in ite...原创 2019-03-28 18:42:27 · 192 阅读 · 0 评论 -
条件渲染
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别;v-if 指令只会在指令的表达式返回true时候被渲染; 上面使用 v-if,最终的渲染结果将不包含 元素;当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,不推荐同时使用;v-show 的元素始终会被渲染并保留在 DOM 中,只是简单地切换元素的 ...原创 2019-03-28 16:40:38 · 534 阅读 · 0 评论 -
计算属性computed
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以用计算属性,容易测试和理解。特点:内置缓存,基于响应式依赖进行缓存,只有里面依赖的数据改变时,才会重新求值形式:放在vm(view-model)实例中,computed: { };setter函数里面的参数就是改变后的值;getter函数记得return;计算属性数据存储什...原创 2019-03-28 15:44:50 · 177 阅读 · 0 评论 -
生命周期钩子函数
生命周期函数:就是vue实例在某一个时间点会自动执行的函数,直接放在实例里面,都没有参数,this都指向实例化对象通过 new Vue 创建的为根 Vue 实例,所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)Vue 实例的实例属性与方法都有前缀 $组件共分三大周期:创建期,存在期,销毁期创建期:beforeCreate 组件即将创...原创 2019-03-28 13:13:27 · 188 阅读 · 0 评论 -
vue轮播图
借助第三方轮播插件 npm install vue-awesome-swiper --save打开github,里面搜索vue-awesome-swiper找相对应的文件执行里面相关的命令npm install vue-awesome-swiper --save在main.js中引入import Vue from 'vue'import VueAwesomeSwiper from...原创 2019-04-01 16:25:17 · 1342 阅读 · 0 评论 -
vue脚手架
1、基于webpack创建的脚手架 vue init webpack “项目名称” 文件夹名称例如: vue init webpack my-project container对于创建的选项进行选择cd my-projectnpm run dev创建的项目文件夹分析...原创 2019-03-31 17:22:17 · 218 阅读 · 0 评论 -
动画封装
<div id="app"> <button @click="toggle">toggle</button> <child :show="isShow"> <div class="demo">hello world</div> </child> <child :show="isShow...原创 2019-03-31 10:03:27 · 146 阅读 · 0 评论 -
前后端联调
前后端联调访问服务器的数据config-index.js-proxyTable-api-target(修改服务器名称,IP地址)ifconfig:查看IP地址192.168.3.14"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js","star...原创 2019-04-22 12:19:20 · 1675 阅读 · 0 评论