Vue入门之概念及Helloworld
130 |Vue简介
131 |Vue是一个前端的双向绑定类的框架，发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计，当然也有自己独特的地方，比如Vue的单文件组件开发方式都很有创新，另外Vue自身的一些绑定的语法、用法等都非常精炼，很容易上手，而且第三方的插件都非常丰富，社区非常活跃，最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。
详情请参考Vue官网
Vue的入门demo
133 |Vue 可以直接把它当做一个js库使用，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。
比如：我们有一个需求，一个网页上一个Div标签，我们有一个json对象存储数据，把json对象上的数据放到Div上去。
135 |接下来是步骤：
136 |第一步： 创建一个文件夹并创建一个html文件 比如：index.html.
137 | 当如你可以选择你自己的编辑器，我就用VSCode。
138 |
139 | 第二步：引入Vue库
140 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
141 | 当然了你可以直接下载Vue的js文件，推荐你直接用上面的cdn即可。
142 |
143 | 第三步：创建一个Div，给它一个id，比如：app
144 |
145 | 第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。
146 | 最终的代码如下：
147 |<!DOCTYPE html> <!--第一步：创建文件夹及html文件-->
148 | <html lang="en">
149 | <head>
150 | <meta charset="UTF-8">
151 | <title>Vue入门之Helloworld</title>
152 | <!--第二步：引入Vue库-->
153 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
154 | </head>
155 | <body>
156 | <!--第三步:创建一个Div-->
157 | <div id="app">
158 | <!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
159 | {{ message }}
160 | </div>
161 |
162 | <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
163 | <script>
164 | var app = new Vue({ // 创建Vue对象。Vue的核心对象。
165 | el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
166 | data: { // data: 是Vue对象中绑定的数据
167 | message: 'Hello Vue!' // message 自定义的数据
168 | }
169 | });
170 | </script>
171 | </body>
172 | </html>
173 | 最终的结果就是：
175 |Hello Vue!
176 | 177 |
Vue的Helloworld总结
178 |-
179 |
- Vue构造函数的：选项el属性，就是element缩写，当前Vue对象挂载到哪个标签上的语法，支持CSS选择器或者dom对象，一般用id选择器选择当前页面的标签。 180 |
- Vue的选项：data属性是自定义数据。这里我们只是演示了一个message属性，vue会把自定义的数据可以与html的模板数据进行绑定。 181 |
- Vue 数据绑定的方式就是用
{{}}，类似于handlebars.
182 | - 上面这个demo就是演示了Vue的绑定数据的基本模型。注意点，标签先创建好了之后，再创建Vue对象，具体你应该懂吧。 183 |
