今天分享一篇技术笔记，关于 Vue 入门的内容。
关于技术类的文章，我一般很少写，因为自己学习技术的时间并不长，水平也菜，工作内容大部分是需求相关，跟技术还是有些距离，学习了解技术都是为了解决工作中实际的需求，也当作自己的业余爱好了。
有这么个奇怪爱好，也是因为难以忍受一些低效的工作方式，总想着能不能通过技术的手段来解决。很多时候，都是自己分析需求，自己实现，最后部署上线。曾经以为自己是个全栈工程师，慢慢了解更多后，才发现自己是「全干工程师」，后来干脆把工程师的名头也去掉了。
正文
前段时间，根据 wechat-format 这款微信公众号编辑器，做了一些定制开发，其中的前端页面是使用 Vue 编写的，虽然没有系统学习过 Vue，但是觉得挺有意思，于是就把 Vue 的官方文档学习了一遍，分享出来，就当作 Vue 的入门吧。
Vue 引入
Vue 的使用其实非常简单，刚开始学习的时候，我们最好不要引入脚手架。直接在一个 HTML 页面中，引入 Vue 的文件即可。例如下面这样：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue!</title>
</head>
<body>
<div id="app">
<p></p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
},
});
</script>
</html>
如上代码所示，连下载 Vue 都不需要，直接使用官方提供的 CDN 文件即可。熟悉模版引擎的应该知道，`` 表示在页面中引入了一个变量，变量值从哪里来呢？
脚本中有一段 new Vue() 的代码，先不用管它是做什么的，你现在只需要知道 message 变量值是从它里面的 data 参数传过来的即可。el 参数指定了 Vue 的作用范围，data 定义了页面中所有的变量。你大概应该猜到，用浏览器打开这个页面，我们第一个 Hello, World 程序就完成了。
数据绑定
学习 Vue，你肯定总是会听到一个词，叫做「响应式数据绑定」。那么什么是响应式数据绑定呢？上面的例子，不就是类似 jQuery 先获得页面元素，然后给赋个值，最后打印在页面上吗？其实，差别大了。
我们打开浏览器的控制台，输入 app.message 可以直接得到 message 的值，当我们修改 app.message 的值的时候，页面中显示也及时改变了。这就是，响应式数据绑定。
绑定属性
除了绑定文本变量，还可以绑定 HTML 的标签属性。例如如下例子：
<div id="app">
<p><span :title="now">鼠标放上去试试，刷新一下再试</span></p>
</div>
上面页面代码中，:title 代表 title 这个属性被绑定在了 now 变量上，那么，在脚本里，我们添加上对应的变量申明，如下代码：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
}
});
它的作用就是，title 被 now 赋值，效果如下：
判断
之前一直使用 ejs 等模版引擎，都是因为可以在页面中，方便的进行逻辑控制。Vue 也不例外，它同样支持条件判断与循环等。例如控制元素是否显示，如下代码：
<p>后面有个按钮（打开控制台，给 app.seen 变量赋值） <button v-if="seen">我是妖怪</button></p>
v-if 指令可以绑定一个变量，用来控制元素是否显示，脚本中，添加如下代码：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false
}
});
通过在脚本中控制 seen 变量，就可以控制元素在页面中的显示状态。
循环
学会了判断指令，循环指令也是同样的道理。添加页面元素如下：
<ol>
<li v-for="todo in todolist">
<small></small>
</li>
</ol>
页面中使用 v-for 指令，脚本中加入 todolist 变量，变量值为对象数组。如下：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
]
},
});
通过在脚本中，改变 todolist 的值，页面显示也将及时改变，这就是响应式数据绑定的魅力。
事件
如何改变脚本中变量的值？除了在控制台手动改变，我们还可以通过事件的方式。例如鼠标点击事件。在页面中加入一个按钮，如下：
<p>做个照妖镜，显示妖怪：<button v-on:click="showBtn"></button></p>
v-on:click 指令指的是绑定一个点击事件，点击按钮的时候，执行 showBtn 函数，脚本中需要定义 showBtn 函数，在 methods 参数下定义函数，如下：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
],
btnLabel: '照妖镜开启',
},
methods: {
showBtn: function(){
this.seen = this.seen?false:true;
this.btnLabel = '照妖镜关闭';
}
}
});
可以看出，showBtn 函数作用是改变了上文中 seen 以及 btnLabel 变量的值，当点击按钮的时候，seen 和 btnLabel 也随之改变，页面就会及时响应。
双向绑定
针对表单的输入，Vue 还提供了 v-model 指令，可以轻松实现表单输入与应用之间的数据绑定。例如页面再加一个 input 控件：
<p>做个扩声器，你说啥，我说啥：<input type="text" v-model="saysay" placeholder="说点什么吧"></p>
<h3></h3>
通过 v-model 指令，将表单输入数据绑定到了 saysay 变量上，表单输入内容将实时打印到页面中。
写到这里，其实还不算 Vue 的入门，因为还没有体验到 Vue 的组件化应用构建。
组件化
什么是组件化？不管做什么事情，我们总是希望能够将大任务，细化成一个一个的任务清单。在项目开发过程中，也是这样的道理。我们在编写一个大型项目的时候，总是希望能够拆分成一个一个的小项目，每个小项目又可以拆分成一个一个的功能件。功能件之间最好是低耦合的，这样，我们就能将开发好的功能件一个个组装起来，一个大的项目自然就完成了。组件化就是基于这样的思想。
在前端页面中，Vue 支持我们自定义 HTML 标签，这样的自定义的标签就相当于一个一个的功能组件。例如下面页面中，添加一个用户信息的自定义标签。
<user-info name="lupeng" career="producter"></user-info>
这个 user-info 标签，并不属于标准的 HTML ，所以在脚本中，我们需要通过 Vue 注册这个标签，代码如下：
Vue.component('user-info', {
props: ['name','career'],
template: '<p>Hi, I am ，I am a <b></b></p>'
});
代码不难理解，props 参数接受页面中传过来的标签属性值，这里从 user-info 标签中获得 name 以及 career 的值，template 为渲染模版，这里面就是标准的 HTML 了，通过 name 和 career 变量值构建模版。这样，页面就会显示模版的内容。
但实际情况，变量值并非都来源于页面，有可能是异步获取，数据来源于 js 脚本。那么，这里就要用到上面数据绑定的知识了。将 name 和 career 属性绑定到自定义的变量 user 中，user 定义为一个对象，包含 name 和 career ，页面代码修改为：
<user-info :name="user.name" :career="user.career"></user-info>
前面加上 : 就代表绑定属性值，name 绑定到 user.name 上，career 绑定到 user.career 上，然后在脚本中定义 user 变量，整体代码如下：
Vue.component('user-info', {
props: ['name','career'],
template: '<p>Hi, I am ，I am a <b></b></p>'
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
],
btnLabel: '照妖镜开启',
saysay: '',
user: {
name: '张三',
career: '木匠'
}
},
methods: {
showBtn: function(){
this.seen = this.seen?false:true;
this.btnLabel = '照妖镜关闭';
}
}
});
整个传参的过程就清晰了，自定义组件中接受的属性值，通过 props 定义，值从页面传输到自定义组件中；页面的属性可以与脚本中的变量绑定，于是脚本中的变量值，就可以直接控制自定义组件，从而实现子组件的传参。
学到这里，应该可以算是 Vue 入门了，可以使用 Vue 做一些简单的前端应用了。内容就写到这里，希望对你有帮助。
文中代码这里查看：vue-demos/index.html