看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下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 打造你的单页应用的更多相关文章

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

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

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

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

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

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  5. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  6. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  7. 《vue.js实战》练习---标签页组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. vue.js 2的表单控件

    静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. vue.js中的表单radio,select,textarea的v-model属性的用法

    只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...

随机推荐

  1. air写文件 SecurityError: fileWriteResource 时报错的解决方法

    用 File.applicationDerectoryPath.resolv("text.txt")会报SecuriyError错误! 解决: var _Path:File = F ...

  2. Android利用Looper在子线程中改变UI

    MainActivity如下: package cn.testlooper; import android.app.Activity; import android.os.Bundle; import ...

  3. mysql聚合函数

    1.统计一下插入的数据总数 SELECT COUNT(giftCertificateId) AS number FROM gift_certificate WHERE giftCertificateN ...

  4. 外网访问SVN

    1.路由端口映射: 进入路由器管理管理界面-->转发规则-->虚拟服务器 将端口3690(svn默认端口)和你的局域网IP(如192.168.1.104)映射,勾上“启动”,保存,OK了. ...

  5. 如何实现XA式、非XA式Spring分布式事务

    Spring应用的几种事务处理机制 Java Transaction API和XA协议是Spring常用的分布式事务机制,不过你可以选择选择其他的实现方式.理想的实现取决于你的应用程序使用何种资源,你 ...

  6. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...

  7. 自定义异常以及runtime类

    一.自定义异常: 1.自定义异常的概念:在java编程中,我们会遇到很多问题,但是这些问题异常,java并没有给我们定义好,那么我们就要自己定义这些异常,这就是自定义异常: 2.throws 是声明异 ...

  8. javascript数据结构和算法[转]

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...

  9. Unity3D 之UGUI制小地图

    这里使用UGUI制作一个小地图. 方法一: 第一步:使用UGUI弄一个地图背景和人物指针 第二步:脚本获取人物的位置和角度给人物指针进行同步 将 PlayerIconController.cs 文件绑 ...

  10. 工作流引擎Activiti使用总结

    http://www.kafeitu.me/activiti/2012/03/22/workflow-activiti-action.html 1.简单介工作流引擎与Activiti 对于工作流引擎的 ...