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文件,所以引用的数量更多了,不过可以写到请求内实现这些。
bottle + vue.js 打造你的单页应用的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- Vue之vue自动化工具快速搭建单页项目目录
1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- vue.js 打包时出现空白页和路径错误
vue-cli输入命令:npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- 《vue.js实战》练习---标签页组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...
随机推荐
- jquery插件开发(checkbox全选的简单实例)
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 八、套接字(Socket)
demo 一个连接由它的两个端点标识,这样的端点称为套接 套接字是支持TCP/IP协议的网络通信的基本操作单元. 可以将套接字看作不同主机间的进程进行双向通信的端点. 上图连接1的一对套接字为: (1 ...
- CCCatmullRomTo&CCCatmullRomBy
注: 云形线(Catmull-Rom curve曲线) 云线(Spline或B-spline)在数学上有很多种类,常用的三阶云线有Hermite, Bezier, Uniform B-spline, ...
- Nginx重定向[Rewrite]配置 for wordpress & Discuz
首先Apache的Rewite规则差别不是很大,但是Nginx的Rewrite规则比Apache的简单灵活多了Nginx可以用if进行条件匹配,语法规则类似Cif ($http_user_agent ...
- Oracle 通过sql profile为sql语句加hint
sql profile最大的优点是在不修改sql语句和会话执行环境的情况下去优化sql的执行效率,适合无法在应用程序中修改sql时.sql profile最常用方法大概是:--创建产生sql tuni ...
- c++ (P49—P68)
1 c++语言并没有明确规定调用这个函数时实参的求值顺序,而是让编译器根据对代码进行优化的需要自行决定实参的求职顺序.这样就带来了二义性. function(a++,a*); //存在二义性 a++; ...
- Android_ViewFlipper
xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- Android学习(一) - Activity
好久不写博客了,自上次写到现在已经一年多了,写这东西其实坚持下来就好了,将自己学的东西一点点写出来成为日后的积累查阅的资料.最近不是特别忙,抽点时间学学移动开发. Android组件中常用的四大组件 ...
- Flash cs6 如何从FLA 文件导出sound文件
Flash. How to export sound from the FLA file extract sound from a fla 第一个是图文教程,在下面还有"watch vide ...
- 用gd库画矩形和椭圆
画矩形:bool imagerectangle ( resource $image画布资源 , int $x1左上角的坐标 , int $y1 , int $x2 右下角坐标, int $y2 , i ...