Vue.js 快速入门
2016-12-29 10:22
411 查看
什么是Vue.js
vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7
准备
我推荐使用sublime text作为编辑器,关于这个编辑器可以看我这篇文章。在package control中安装Vuejs Snippets
Vue Syntax Highlight
推荐使用npm管理,新建两个文件app.html,app.js,为了美观使用bootstrap,我们的页面模板看起来是这样:
安装
使用npm安装:npm install vue
当然你也可以在github上clone最新的版本并作为单文件引入,或者使用CDN:
HelloWorld
动手写第一个Vue.js 应用吧。app.html:
创建Vue实例
在使用Vue.js之前,我们需要先像这样实例化一个Vue对象:new Vue({ el:'#app' });
双向数据绑定
就像HelloWorld展示的那样,app.html是view层,app.js是model层,通过vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变。
插值
相信你也注意到了,通过{{value}}的形式就能取到value的值,并与value进行绑定。HelloWorld中改变input中的值时相应也改变了app.js中的message,从而{{message}}也得到改变。上面的代码改为这样:{{*message}}
则message不会随着数据的改变而更新。同时还支持一些简单的表达式:
常用的指令
v-model
v-model可用于一些表单元素,常见的input,checkbox,radio,select:
v-for
列表渲染在实际开发中非常常见,vue.js使用v-for这个指令就能完成,v-for取代了1.0以前版本中的v-repeat。在app.js中准备一些数据:[v-cloak] { display: none }
v-on
vue.js通过v-on完成事件处理与绑定,比如为一个button绑定click事件,我们就可以这么写:delBook:function(book){ this.books.$remove(book); }
vue.js为数组扩展了$remove方法,查找并删除我们作为参数传递过去的book。
v-if/v-else/v-show
顾名思义,v-if用于条件判断,和v-else是一对。用法也很简单,下面的代码是将id为偶数的操作按钮换个样式:
过滤器
与Linux中的管道类似,vue.js也使用的是|:{{message | uppercase}}
这样就能输出message的大写了,过滤器也能串联在一起使用:
{{message | reverse | uppercase}}
这里reverse并不是内建的过滤器,我们可以用Vue.filter自定义:
计算属性
计算属性可以帮助我们完成一些复杂的逻辑计算,比如我们需要添加一个书的总价,在vue实例中添加computed:{{sum}}
vue-resource
vue-resource作为vue插件的形式存在,通过 XMLHttpRequest 或 JSONP 发起请求并处理响应。在开发中也非常常见,现在我们用vue-resource来请求books:
引入
和vue类似:
get
在vue中新增ready对象,当页面加载完成时就去请求:.\chrome.exe --allow-file-access-from-files
如果你使用了npm,想要启动一个服务器就太简单了:
post
post的语法也很简单:this.$http.post(url,postdata,function callback)
在使用的时候遇到一个小坑,这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。解决起来也很简单:在vue实例中添加headers字段:
Vue.http.options.emulateJSON = true;
这里只简单介绍下,详细的文档请大家移步 这里 吧。
vue.js目前还有众多的插件,详情看 这里 。
总结
这里简单介绍了下vue.js的基本用法,但只仅仅介绍了一小部分作为库使用的内容,想了解更多vue.js的内容,还是多多关注vue.js的 github主页 ,所用的例子我也分享了,可以在 这里 查看并运行结果。
相关文章推荐
- Vue.js——60分钟快速入门
- Vue.js——vue-router 60分钟快速入门
- Vue.js——vue-router 60分钟快速入门【9】
- Vue.js——60分钟webpack项目模板快速入门
- Vue.js快速入门实例教程
- Vue.js——60分钟组件快速入门(下篇)
- Vue.js——60分钟快速入门【1】
- Vue.js 快速入门
- Vue.js——60分钟组件快速入门(下篇) 概述【3】
- Vue.js——60分钟快速入门
- Vue.js——60分钟browserify项目模板快速入门
- Vue.js快速入门教程
- Vue.js快速入门
- webpack+vue.js快速入门教程
- Vue.js——60分钟组件快速入门(上篇)
- Vue.js——60分钟webpack项目模板快速入门
- vue.js快速入门
- Vue.js——60分钟快速入门
- Vue.js学习 Item1 --快速入门
- Vue.js快速入门实例