Vue.js
文章平均质量分 85
港式柠檬茶!
这个作者很懒,什么都没留下…
展开
-
Vue.js初接触
Vue.js框架Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 —Vue官网框架-Framefork前端的快速发展产生了成千上万的代码,但都缺乏正规的组织形...原创 2018-10-31 17:05:52 · 248 阅读 · 0 评论 -
Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化
文章目录需求实现效果模拟后台数据实现方法数据结构htmlJS功能实现初始化点击切换关键词实现时间点可视化遇到的问题v-show 用布尔类型的数组绑定无法监听生命周期造成的对象undefined问题总结需求根据关键字在视频中的出现时间,在模拟的视频时间轴中显示对应的位置用户点击,选择不同的关键字,显示对应关键词时间点击进度条中的关键词时间点,视频对应跳转到该时间播放实现效果完整源...原创 2019-02-26 14:44:33 · 6184 阅读 · 0 评论 -
利用Element-UI的upload组件实现文件的上传以及样式变化
最近在做项目的时候遇到在浏览器中上传视频的需求,使用Element-UI的upload组件。具体效果如下总的来说是很简单的,但一定要仔细对照官方文档,并且因为我使用了typescript,其中也遇到了一个坑。对照了一下官方文档,所需要注意的部分:只能上传一个视频并且禁止多选 :limit="1",accept="video/*", :multiple="false",当重复上传时弹出错...原创 2019-02-20 16:18:16 · 19211 阅读 · 2 评论 -
前端网站连接MySQL数据库
前端(Vue.js)连接MySQL数据库实现本地web服务器与MySQL数据库连接删改,查找。文章目录前端(Vue.js)连接MySQL数据库实现本地web服务器与MySQL数据库连接删改,查找。目录结构整体逻辑监听后端服务器连接数据库配置与数据库表连接入口sql语句入口启动在`/server`目录下在项目根目录下要实现本地web服务器与MySQL的连接,即实现在页面中对数据库的访问。整体逻...原创 2018-11-25 12:24:09 · 94290 阅读 · 13 评论 -
Vuex的应用实例 --天气查询应用
weather其实是一个很小很简单的demo了,主要就是再熟悉一下ajax和vuex。其中用了和风天气的api,可以精确到行政区划内的天气。因为这里涉及到了在一个页面内同时请求多个页面,以及在涉及到城市和区域之间的各种切换和设定默认值,所以在vuex这一部分还是研究了一下才行。实现功能:手动改变城市和行政区,能查询北京、上海、广州、成都的各区天气预报显示行政区的天气情况,包括:实时温度、...原创 2018-11-01 09:08:41 · 1242 阅读 · 0 评论 -
Vue2.5仿去哪儿——vuex 公共画廊组件 导航栏的渐变出现
Vue2.5仿去哪儿app 实战项目笔记利用vuex实现跨页面数据共享 公共画廊组件 导航栏的渐变出现 利用vuex实现跨页面数据共享要同时改变两个页面的数据,但city.vue和home.vue之间没有一个共同的父级组件,所以无法通过类似前面的父级组件进行数据中转。所以可以用vuex来进行数据管理。vuex就是通过把所有的公用数据放到一个公共的数据空间去存储,某一个组件改变了...原创 2019-04-17 19:52:29 · 1018 阅读 · 1 评论 -
关于Vue的组件,生命周期与路由
父组件向子组件传值:v-bind:content="father-components-data"子组件利用props:[…] 接收每一个父组件传过来的值子组件向父组件传值:this.$emit()通过事件触发向上一层触发事件,父组件监听此事件,获取子组件带出的数据内容 以一个todolist为例:var todoItem = { props:['con...原创 2018-10-31 17:14:02 · 651 阅读 · 0 评论 -
利用Vue.js2.0实现购物车和地址选配功能
根据慕课网-利用Vue2.0实现购物车和地址选配功能教程,通过利用Vue2.0来实现电商平台的简单功能。 vue中的$http请求服务.通过调用http服务,对.json文件发送http请求,通过遍历数组数据完成页面渲染引入vue-resource.js,即可以使用全局的 Vue.http 或者在 Vue 实例中的 this.$http 调用 http 服务。使用...原创 2018-10-31 17:13:04 · 1122 阅读 · 1 评论 -
Vue.js——一个todolist的小尝试
前言:至此为止,还仍然是跟着Vue.js的官方文档,对照网络上的一些教程进行较为分散的学习。大部分还停留在理论性的表面学习与对于官方文档中示例代码的理解。因为缺少实战,还是有些云里雾里。所以这一篇,准备对Vue来一个小小的实战。演示示例实现功能:实现浏览器的本地存储,刷新页面后获取数据缓存。在每个item前显示序号,实现单个item的finish,delete。实现一键删除所有it...原创 2018-10-31 17:12:00 · 273 阅读 · 0 评论 -
Vue.js框架学习笔记之三
Vue.js中的表单可以用v-model指令在表单 <input>及 <textarea>元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值...原创 2018-10-31 17:10:35 · 194 阅读 · 0 评论 -
Vue.js框架学习笔记之二
Vue.js中的样式绑定class和style是HTML元素的属性,用于设置元素的样式,我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。v-bind:class="..."v-bind:style="..."class实例:<!DOCTYPE html><html><head> <meta charset="utf-8...原创 2018-10-31 17:08:49 · 224 阅读 · 0 评论 -
仿微软Video Indexer——视频断点播放与智能解析时间线的前端可视化实现
先放一个实现效果,具体的功能可以参照Microsoft Video Indexer。其中关键词这一部分的功能可以参考之前的博文视频时间点在时间轴上的动态可视化最核心的就是视频的定点播放和可视化,其他的样式和tab栏都蛮简单的所以这里就不写了。对于视频的定点播放,用到HTML5中video标签的currentTime这个属性,即在用户点击每个时间点的时候,需要根据函数传入时间参数来改变视...原创 2019-05-30 20:13:17 · 936 阅读 · 0 评论