Vue.js入门简记

忙里偷闲,简单总结一下昨晚刚学习的Vue入门知识。Vue是个什么东西?通过下图等式10 秒钟看懂 Vue.js

10秒看懂

我的理解

Vue是MVVM模型的代表,主要用于在前端做DOM和数据的绑定控制,比常规直接操作DOM的方法拥有更高的效率,其他的类似的还有ReactAngular。照我的理解,这类框架是后端的思维延伸到前端的应用上,类似的技术还有很多。比如MVC->MVVM,传统的后端CI工具(Hudson/Jenkins) -> CircleCI/TravisCI等,Maven/PHAR/Composer -> NPM,Gulp,Webpack等。大概就是这么个意思,可能比喻不太恰当,我做的后端比较多,前端了解较浅。这里只是结合我的一些经验和体会,描述一种形式和趋势。

Vue特点

  • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动: 自动追踪依赖的模板表达式和计算属性。
  • 组件化: 用解耦、可复用的组件来构造界面。
  • 轻量: ~24kb min+gzip,无依赖。
  • 快速: 精确有效的异步批量 DOM 更新。
  • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

如果你喜欢下面这些,那你一定会喜欢 Vue.js:

  • 可扩展的数据绑定机制
  • 原生对象即模型
  • 简洁明了的 API
  • 组件化 UI 构建
  • 多个轻量库搭配使用

五个例子

代码已上传到Github,Clone后可以直接运行。下面代码只列出主要的DOM结构和JS控制(省略meta,div,js引用)。

双向绑定

{{ message }}

new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});

列表循环

<li v-for="todo in todos">
{{ todo.text }}
</li>

or {{ parentMessage }} - {{ $index }} - {{ item.message }}

new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})

条件判断

<div v-if="Math.random() > 0.5">
随机数大于 0.5
</div>
<div v-else>
随机数不大于 0.5
</div>

new Vue({
el: '#app'
})

过滤器

类似Linux的管道传输。

{{message | reverse | uppercase}}

Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message:'www.iamlj.com'
}
})

综合示例

包括model,enter,click,for特性。

<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>

new Vue({
el: '#app',
data: {
newTodo: '',
todos: [{
text: 'Add some todos'
},{
text: 'Add some todos1'
}]
},
methods: {
addTodo: function() {
var text = this.newTodo.trim()
if (text) {
this.todos.push({
text: text
})
this.newTodo = ''
}
},
removeTodo: function(index) {
this.todos.splice(index, 1)
}
}
})

学习参考

我只是简单入门而已,这里有更详细、综合的教程说明。

最后

本来不打算动手Vue的,一个是因为前端东西太多了,怕扎在上面,一个是我的基础前端知识已够用。之所以还是去实践了,一个因为是自己心痒,一个是垚垚给我推荐了两次Vue。就入门过程来看,我感觉和React/Angular非常像,具体可以查看:对比其它框架

最近在做3件事:论文,项目,校招。整体进度都比较慢,所以人有些浮躁。

  1. 论文,研究的大数据处理方向,简单来说就是使用HadoopMapReduce构建大规模数据的M-tree索引,并实现分布式查询。能分享不少东西吧。
  2. 项目,事情主要分两块,一块是业务沟通,一块是业务实现。涉及的东西都很细碎,所以花的时间总会比计划的多些。
  3. 校招,本打算好好投几个公司内推,结果都石沉大海,渺无音讯。关键是没有具体结果通知,所以想改善简历也难,不知哪位博友能能推荐个PM校招职位?

这是我用Axure设计的PM简历。待校招结束,我再分享一些面试经历,或许也可以分享一下Axure设计的简历源RP文件,不知道会不会有人喜欢。

热评文章