七周七种前端框架四:Vue.js 概览
来源:互联网 发布:电脑qq多开器软件 编辑:程序博客网 时间:2024/06/05 11:38
关于 Vue
Vue
从去年开始火的不行,如果你觉得 Angular1 又旧又太庞杂不好用,而Angular2又显得磨磨唧唧一直不出正式版,那么 Vue 可能是一个很好地选择。另外 Vue
的作者是一个国人大牛。
看 Vue 第一眼的感觉就是 麻雀虽小五脏俱全,该有的 data bind, component, directive
都有,API 简洁清晰,而且 directive
和 component
界限分明不会傻傻分不清。
关于和其他框架的比较可以参考官网的说明:https://vuejs.org/guide/comparison.html
大致可以这么总结:
- 相比于
Angular
,Vue
更加简洁高效,在API设计和代码大小上都是如此。不过和Angular2
倒是有很多相似的地方,component 和directive 都很像。 - 相比于
React
,最大的区别当然是 Vue根本就没有 virtual dom,所以只能用在web上,而React
可以编译成各种UI控件因此可以移植到 iOS 和 Android 上。
Todo list demo
创建一个 todolist 作为了解 Vue 的第一步。首先,我们需要定义一个 HTML 结构,其实写法大致上和Angular也没太大区别,无非就是这四步:
- 双向绑定一个 input
- 监听表单提交后更新 list
- 监听 checkbox change 更新 list
- 循环输出 list
<div id="todo"> <form v-on:submit="add" v-on:submit.prevent> <input type="text" v-model="input"/> <input type="submit" value='add' /> </form> <ul> <li v-for='todo in list'> <label v-bind:class="{ done : todo.done }" > <input type="checkbox" v-model="todo.done"/> {{todo.title}} </label> </li> </ul></div>
然后我们要创建一个 Vue 实例来封装和处理这些业务逻辑和数据:
new Vue({ el: "#todo", data: { input: "", list: [ { title: "Make Something Tonight", done: false } ] }, methods: { add: function() { var title = this.input.trim(); if(!title) return false; this.list.unshift({ title: title, done: false }); this.input = ""; } }});
代码非常简洁,其中添加一个todo我们用 add 函数进行添加,而改变todo状态我们直接双向绑定了 todo.done
就行了,不用额外写JS代码来实现。简单的20+行JS代码就可以实现一个有基本功能的todolist应用。
这个例子和官网上的例子稍微有点不同,主要是我加上了改变todo状态的操作。
这个例子主要是展示了 Vue 的如下几个特性:
- 双向数据绑定,或者叫响应式数据绑定 - reactive data binding
- 事件绑定
- DOM 操作
下面一章 我们仔细看看几个重点:
- 基本语法
- Component
- Directive
0 0
- 七周七种前端框架四:Vue.js 概览
- 七周七种前端框架四:Vue.js Directive
- 七周七种前端框架四:Vue.js 组件和组件通信
- 七周七种前端框架四:Vue.js 构建大型应用
- Vue前端Js框架
- 前端框架vue.js 学习
- 前端框架vue.js学习
- 前端之js框架-vue
- 前端热门框架Vue.js入门篇
- 前端框架之Vue.js学习总结
- vue.js 对比 angularJS、react 前端框架
- 七周七种前端框架二: React 之概览
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- 前端框架 Vue 初探
- 前端框架 Vue 初探
- vue 前端框架
- 终于找到了梦想中的前端框架 --- vue.js
- 前端框架大比拼:Angularjs vs Reactjs vs Vue.js
- 设计模式之---代理模式(Proxy Pattern)
- 生成器
- linux C语言获取本机ip地址
- POJ 1163 The Triangle
- C++编程:XAudio2 API应用示例
- 七周七种前端框架四:Vue.js 概览
- Mysql 数据库升级shell脚本编写与测试心得
- HDU 4152 ZZYs Dilemma(枚举 or dfs)
- compose,takeUntil ,Share
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
- 进程与线程的区别
- epoll 水平触发和边缘触发的区别
- 最小生成树prim算法
- myeclipse打开文件选择程序