bottle + vue.js 打造你的单页应用

看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下vue ,觉得还不错,不过想想前端的东西毕竟还是太广博了。我也不知道怎么写反正应用起来有点别扭,就是资料太少了,成型的东西 也太少了,就说说简单的思路吧。

vue相当于前段的框架,用于更新数据,废话不多说,

仅仅说应用引入vue

第一,我想做一个单页应用

第二,静态文件又http服务器转发给客户端,而服务端就可以不参数与这些文件的更新,仅仅保持数据通讯即可

第三,假期确实闲着无聊,我是知道react 的,但是纠结于他的蛋疼文档

因为bottle体积足够小,足够的轻量,毕竟是个实验性质的东西。

也不知道这样 逼格算不算高。

目前来说技术栈已经没问题了,反正这里的人也不是很在乎这些,技术性的问题我也不打算写,只当个笔记第一,为了重写路由我要引入 vue-router.js,第二,为了与服务器通讯我引入了vue-resource.js,第三,本来可以使用jq 的来进行ajax 通讯来着,但是为了彰显逼格就使用了vue-resource,但是我发现引用的semantic 使用的是 jq ,也就是说,我莫名其妙的引入了个 resource。

也就是一同三个文件,vue,vue-router,vue-resource这三个静态文件,虽然体积不是很大,但是也造成了不小的困惑,因为他们的文档是分开的,各自讲述自己的内容,

例如
vue-router 分为两版对应vue 不同的版本,对于的api 不同,vue-resource 和vue的问题,vue 如果是扩展组件的话,如果在子类中更新内容,因为是异步请求的,也就是说,更新之后并不会更新内容,所以会一直是初始化,需要在生成的时候更新,使用jq 的时候改成同步获取,即可,该用官方推荐的 resource 之后没这个选项,所以在 created 的时候更新了数据。当然不敢妄加评论。

各个视图由于被拆分成了js文件,所以引用的数量更多了,不过可以写到请求内实现这些。

时间: 2024-10-20 23:31:33

bottle + vue.js 打造你的单页应用的相关文章

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de

vue.js 打包时出现空白页和路径错误

vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

vue.js 2的表单控件

静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <div id=&quo

mobilebone.js 移动web APP单页切换骨架

轻便体积小 原生无依赖 插件可扩展 设计无限制 动效可定制 动静两相宜 能进亦能退 桌面也兼修 一句话功能简介跟传统网页浏览的差别仅仅在于无刷新! 例如,我们浏览首页,首页上有个如下HTML链接: <a href="mocamoca.html">摩擦摩擦</a> 在传统页面,页面会刷新跳转至mocamoca.html, 但是,引入mobilebone.js后,就是无属性滑动到mocamoca.html页面. 二.mobilebone.js项目.资源以及八卦 Mo

使用video.js踩坑。单页切换后无法播放

问题:动态创建多个video实例后,切换其他页面后在切换回来,无法播放,控制台报警告id被占用! 思路:在生命周期beforeDestroy函数中销毁创建的video实例. 代码: beforeDestroy(){ //(第三步)在销毁之前拿到video实例 for(let i=0;i<this.playlist.length;i++){ this.playlist[i].dispose(); //(第四步)dispose()是官方的销毁函数 } }, mounted() { setTimeou

(vue.js)element ui 表单重置

el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :model="addServiceData" ref="addServiceForm"> <el-form-item label="手机号" prop="mobile"> <el-input v-model=&

总结下用Vue.js和webpack遇到的问题

这段时间用vue.js+webpack做一个单页应用的demo,第一次尝试模块化,技术水平有限,学习不够深入,总是遇到各种问题,所谓前事不忘后事之师,so记录下. 1.ES6匿名函数里面this值 结合webpack,使用Babel转换器,可以安心用ES6了,关于箭头函数(匿名函数)一个注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 开始不知道这个特性,还弱弱的用了bind()方法把this值传进去,弱爆了!这个特性真的是好用,妈妈再也不用担心我的this对象丢

浅谈单页应用和多页应用——Vue.js向

浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳转=>返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢. 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来. SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名. 页面切换慢:每一次切换