1. 效果预览：
在本案例中，使用了Vue.js中的数据双向绑定功能，当input里的内容出现变化的时候，输入框上的文本也会发生相应的改变。
2. 开发工具
在进行HelloWorld的开发之前，先介绍一下笔者的开发环境和工具，笔者使用的文本编辑器是VS Code,浏览器使用的Chrome浏览器，笔者十分推荐。（PS:IE8以下的浏览器就不要用了吧！）
在官方文档中，明确提出了：Vue 不支持 IE8 及以下版本，因为Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
3. 如何获取Vue.js
直接用 <script> 引入
直接下载Vue.js并用 <script> 标签引入，Vue 会被注册为一个全局变量。
需要注意的是：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
CDN
我们推荐链接到一个你可以手动更新的指定版本号：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。Npm指令如下：
$ npm install vue
本次教程使用
对于本次HelloWorld的案例中，我们就直接使用<script>标签引用的方式，至于其他的引入方式，在以后需要的过程中，笔者会逐一讲解。毕竟，学习是有一个梯度的，要先把精力使用在关键的地方上。
4. 核心代码编写
|
<!DOCTYPE html> <htmllang="en">
<head> <metacharset="utf-8" /> <title>Vue</title> <scriptsrc="./vue.js"></script> </head>
<body> <divid="app"> <h1>{{message}}</h1> <inputv-model="message"> </div> </body> <script> // el 属性设置vue的挂载点 varapp = newVue({ el:"#app", data: { message:"Hello World" } }); </script>
</html>
|
5. 代码分析
首先，我们使用script标签引入了Vue.js,代码如下：
<scriptsrc="./vue.js"></script>
|
// el 属性设置vue的挂载点 varapp = newVue({ el:"#app", data: { message:"Hello World" } });
|
接下来，读者可以自行测试一下，如果将<input v-model="message">代码换成<input :value="message">，是否可以实现数据双向绑定的功能，答案肯定是不行的，双向绑定的重点便是使用了v-model指令进行数据的绑定，代码如下：
|
<divid="app"> <h1>{{message}}</h1> <inputv-model="message"> </div>
|
对于vue.js中一些常用的指令，笔者也会在以后的教程中，进行详细的讲解。
6. 总结
通过改案例，我们可以明显感受到Vue.js在数据操作的过程中带来的便利性，我们不再需要像以前编写Jquery.js的代码一样，需要先获取到Dom节点，再对Dom节点进行相应的操作。Vue.js可以直接对数据进行操作，并且可以通过页面对数据进行动态的修改。
本案例只是单纯的演示案例，对于Vue.js的详细知识，笔者会在下一章节开始进行详细的讲解。
7. 下一节
下一节将会对Vue.js中的挂载点，模板，实例三个概念进行详细的讲解
参考资料：
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
