vue 快速入门 系列 —— 初步认识 vue
其他章节请看：
初步认识 vue
vue 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
所谓渐进式，就是你可以一步一步、有阶段的使用 vue，不必一开始就使用所有的东西。
命令式框架 vs 声明式框架
jQuery 是命令式操作 DOM 的前端框架。比如点击一个新增按钮，需要出现一个录入信息的弹框，在 jQuery 中，我们需要在新增按钮被点击的时候，发出一个命令，让录入信息的弹框显示。随着交互越来越复杂，代码中会有相当一部分的代码是在操作 DOM，不好维护的问题也就出现了。
现在主流的框架 vue、angular 和 react 都是声明式操作 DOM 的框架。所谓声明式，就是我们只需要描述状态与 DOM 之间的映射关系，就可以将状态渲染成视图。状态到视图的转换，框架会帮我们做，不需要我们手动去操作 DOM。我们只需要关注状态的维护，而不用再关心 DOM 的操作。
hello-world
直接用 script 的方式引入 vue，开始我们的第一个例子。
// 新建 demo/1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 模板将会替换挂载的元素。最后显示的是 section，而不是 div -->
<div id='app'></div>
<script type="text/x-template" id="tpl">
<section>
{{ message }}
<p v-if="seen">现在你看到我了</p>
</section>
</script>
<script>
var app = new Vue({
el: '#app',
// 模板。描述状态与 DOM 之间的关系。
template: '#tpl',
// 状态
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
</body>
</html>
Tip：笔者使用 anywhere 来启动一个服务器。通过 npm install anywhere --global 即可安装。在任意目录下执行 anywhere 就能启动一个服务，也可以指定端口启动 anywhere -p 8090。
进入 demo 目录，启动服务:
$ anywhere
Running at http://169.254.53.24:8000/
Also running at https://169.254.53.24:8001/
通过浏览器请求 1.html 页面：http://169.254.53.24:8000/demo/1.html
页面显示：
Hello Vue!
现在你看到我了
如果在浏览器控制台下执行 app.seen = false，你会发现页面中的 现在你看到我了 不见了。
在这个例子中，明面上我们做的只有：在模板中描述状态与 DOM 之间的关系。背地里，vue 帮我们把状态渲染成视图，如果我们更改了状态（数据），视图会自动更新，无需我们操作 DOM。
vue 的开发模式
vue 框架的开发模式是多样化的。可以把 vue 当成 js 库来使用；也可以使用 .vue 单文件形式配合 webpack 使用，必要时还可以使用 vuex 来管理状态，vue-router 来管理路由。
其他章节请看：
最新文章
- Sql Cursor example
- UI第十四节——UIAlertController
- Shader实例:2D流光
- Enum:Smallest Difference(POJ 2718)
- html页面，左边点击链接，右边显示内容参考代码。
- HTML5之 Microdata微数据
- sql 判断一个表的数据不在另一个表中
- netstat 命令state值
- 64位系统 IIS不支持 Excel导入的问题
- Spring Boot HTTP over JSON 的错误码异常处理
- 设置修改CentOS系统时区
- Java学习从菜鸟变大鸟之一 hashCode()和equals()的本质区别和联系
- 一次生产 CPU 100% 排查优化实践
- UOJ#314. 【NOI2017】整数 其他
- python yield 和 yield from用法总结
- js入门 关于js属性及其数据类型（详解）
- 尚硅谷面试第一季-15Mysql什么时候建索引
- Pry的安装
- DeepMind已将AlphaGo引入多领域 Al泡沫严重
- python 查找