Vue学习--初体验

前端

转眼十一月了，天气逐渐变得寒冷起来，早上骑膜拜单车去地铁站时，冰冰凉的车把使我感觉到今年的冬天是越来越近了。真是“十一月将雪，寒谁计有无。”

这个逐渐变冷的月打算利用空闲时间学习下Vue.js，如果时间足够的话再学习java设计模式。

Vue简介：

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 不仅易于上手，还便于与第三方库或既有项目整合。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

HelloWorld:

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
</div>

</body>
<script>
    //创建vue实例
    var vue = new Vue({
      	//将数据绑定DOM元素，数据与元素是响应式的，当修改msg的内容时，{{msg}}的值也会相应地更新
        el: "#app",
        data: {
            msg:"HelloWorld"
        }
    })
</script>
</html>

参考资料：

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html