声明一： 本人为纯后端开发，因为一些非工作上的需要，本人必须得学一下前端Vue.js，此文章属于前端入门级。
声明二： 本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》，讲师汤小洋，跳转链接见文末。
第一个vue程序(入门示例)：
提示： vue入门非常简单，这里就不使用文字进行说明了，直接看html代码示例即可明白。
html内容为：
<!DOCTYPE html>
<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>哈喽~</title>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
// 允许chrome的扩展程序【vue-devtools】进行调试
// 建议: 开发时，设置为true; 生产时, 设置为false
Vue.config.devtools = true
new Vue(
{
// 指定关联的element
el: '#myId',
// 存储数据(以json的形式)
data: {
msg: 'Helle World~'
}
}
);
}
</script>
</head>
<body>
<div id="myId">
<!-- 通过模板，动态显示值 -->
{{msg}}
</div>
</body>
</html>
使用chrome打开：![在这里插入图片描述]()
注：chrome有一个名为vue-devtools的扩展程序，对vue的调试提供了极大的便利，建议安装(上图就是本人安装了该扩展程序后的调试界面的截图)。
^_^ 如有不当之处，欢迎指正
^_^ 学习整理自
51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋
^_^ 参考链接
Vue.js中文官网
^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng