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=" ...
随机推荐
- 代理模式及其在spring与struts2中的体现
代理模式 代理模式有三个角色组成: 1.抽象主题角色:声明了真实主题和代理主题的共同接口. 2.代理主题角色:内部包含对真实主题的引用,并且提供和真实主题角色相同的接口. 3.真实主题角色:定义真实的 ...
- FBReaderJ 编译Jni
最近要做一个电子书项目用到FBReaderJ 第一步,也是最难的一步,要编译他的Jni 文件,对于android开发还是小白的我,只能说难!好难!非常难!,于是乎百度了一下,找到几篇有价值性的文章 第 ...
- 如何将java代码生成一个bat文件
java -cp classes;lib/* beans.FileUpload 列出所要带的参数,用空格分开Pause
- SQL学习笔记
SQL(Structured Query Language)学习笔记 [TOC] Terminal登录数据库 1.登录mysql -u root -p ; 2.显示所有数据库show database ...
- visibility,display区别
visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失
- Azure CLI (一)如何安装和配置Azure CLI
什么是Azure CLI 快速安装 Azure 命令行界面 (Azure CLI),以便使用一组基于 shell 的开源命令在 Azure 中创建和管理资源. 步骤 1:安装 . 登录https:// ...
- 实现虚拟机上面的linux系统和windows主机的通信
一:配置静态ip 1:使用startx命名切换到图形化用户界面: 2:在“开始”——“系统设置”——“网络”——eth0 将通过dchp自动获取ip改为静态绑定ip ip地址:填入你要给的ip,需要与 ...
- gcc的使用
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/6065410. ...
- 我终于理解了LISP『代码即数据|数据即代码』的含义
以前我一直不能理解LISP里引用的作用,感觉引用和字符串没什么区别.比如:> (define (func) 'ok) > (func) 'ok 这里把引用ok当做了函数func的返 ...
- 轻松学习Ionic (二) 为Android项目集成Crosswalk(更新官方命令行工具)
现在集成crosswalk不用这么麻烦了!官方的命令行工具已经能让我们一步到位,省去很多工作,只需在cmd中进入项目所在目录(不能有中文目录,还得FQ),执行: ionic browser a ...