看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下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. 10 Technologies That will Shape Future Education--reference

    http://dizyne.net/technologies-that-will-shape-future-education/ Technology is on the rise and with ...

  2. iOS 中的 block 是如何持有对象的

    Block 是 Objective-C 中笔者最喜欢的特性,它为 Objective-C 这门语言提供了强大的函数式编程能力,而最近苹果推出的很多新的 API 都已经开始原生的支持 block 语法, ...

  3. IOS中如何显示带有html标签的富文本

    NSString *strHTML = @"<p>你好</p><p>        这是一个例子,请显示</p><p>外加一个ta ...

  4. nginx性能配置参数说明:

    nginx的配置:main配置段说明一.正常运行的必备配置: 1.user username [groupname]; 指定运行worker进程的用户和组 2.pid /path/to/pidfile ...

  5. java基础学习总结三(jdk7新特性、变量(局部变量和成员变量)、常量以及运算符)

    一:jdk7新特性 可以表示二进制数值,以0b开头,中间可以使用下划线_分隔符.如下: @Test /** * 测试jdk新特性 */ public void testJdk7(){ int a=0b ...

  6. [引]ASP.NET MVC 4 Content Map

    本文转自:http://msdn.microsoft.com/en-us/library/gg416514(v=vs.108).aspx The Model-View-Controller (MVC) ...

  7. 关于MapReduce

    MapReduce是Google提出的一个软件架构,用于大规模数据集(大于1TB)的并行运算.概念“Map(映射)”和“Reduce(归纳)”,及他们的主要思想,都是从函数式编程语言借来的,还有从矢量 ...

  8. Android Studio中文组(中文社区)

    Android Studio中文组(中文社区)http://www.android-studio.org/

  9. [转载]删除所有的.svn文件夹

    Windows 下,在DOS窗口中运行如下命令 dos 代码 for /r <你项目的路径> %i in (.svn) do rd /s /q %i Linux 下,可以先运行 显示出当前 ...

  10. Html5 audio stop

    //html5 stop audio play function stopPlay(el){ el.pause(); el.currentTime = 0; } 使用: var el = docume ...