Vue入门（一）——概念及Hello Vue
2017-05-25 本文已影响272人
零和幺
一、简介
Vue是一个前端的双向数据绑定类的框架。最新版本的Vue参考了React的部分设计，当然也有它独特的地方，比如Vue的单文件组件开发方式就很有创新。另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发以及SPA等现代化前端开发。
二、Vue入门demo
我们可以把Vue直接当作一个JS库来使用，所以它可以很容易地接入到你的项目或者单个页面中。甚至，你可以只使用它的双向数据绑定功能，所以它很容易上手。
比如说我们有一个需求：一个网页上有一个div标签，我们有一个json对象，其中存储着一些数据，我们要把json对象中的数据放到div标签中。
此时，我们只需要以下几步，就可以实现此功能：
步骤1：
创建一个文件夹，并且创建一个html文件。比如：index.html;
步骤2：
引入Vue库。比如 <script src="https://unpkg.com/vue/dist/vue.js"></script>
当然，你也可以直接下载Vue的JS文件。
步骤3：
创建一个div，并且给它一个id。比如：<div id="app"></div>
步骤4：
创建Vue对象，并把数据绑定到上面创建好的div上去。
按照上面的步骤，最终的演示代码如下：
<!--步骤1：创建html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<!--步骤2：引入vue.js文件-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--步骤3：创建一个div标签，并给它一个id名：app-->
<div id="app">
<!--Vue模板的数据绑定方法，类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
{{message}}
</div>
</body>
<script>
// 步骤4：创建Vue对象，并把数据绑定到创建好的div中.
var vm = new Vue({ //创建Vue对象.
el: '#app', //el属性：把当前Vue对象挂载到id是app的div中，类似于angular中的ng-app.也就是说vue从这里开始执行.
data: { //data:Vue对象中绑定的数据.
message: 'Hello Vue' //message:自定义的数据.
}
});
</script>
</html>
最终，页面上将呈现出：Hello Vue
三、总结
-
Vue构造函数：el属性是element的缩写，它表示把当前的Vue对象挂载到哪个标签上，支持CSS选择器和DOM对象，一般用id选择器选择当前页面的标签。
-
Vue选项：data属性是自定义数据。在上面的例子中，只演示了一个message属性，Vue会自动将自定义的数据与html模板数据进行绑定。
-
Vue数据绑定的方式就是使用 {{}}。
-
以上就是Vue进行数据绑定的最基本模板，需要注意的是先创建好标签，并且给它一个ID名，然后再创建Vue对象。
下一篇，会继续深入Vue的数据绑定，敬请期待。
