01-Vue.js入门系列

时间 2020-05-09

原文原文链接

1.1. Vue简介

Vue是一个前端的双向绑定类的框架，发音[读音 /vjuː/, 相似于 view]。新的Vue版本参考了React的部分设计，固然也有本身独特的地方，好比Vue的单文件组件开发方式都颇有创新，另外Vue自身的一些绑定的语法、用法等都很是精炼，很容易上手，并且第三方的插件都很是丰富，社区很是活跃，最新的文档都有中文版本。并且Vue配合官方的和第三方的库能够实现单文件的组件化开发、SPA等现代化前端开发。html

1.2. Vue的入门demo

Vue 能够直接把它当作一个js库使用，因此它能够很容易的接入到你的项目或者单个页面中。甚至你能够只使用它的双向绑定功能。因此它很容易上手。前端

好比：咱们有一个需求，一个网页上一个Div标签，咱们有一个json对象存储数据，把json对象上的数据放到Div上去。vue

接下来是步骤：git

第一步： 建立一个文件夹并建立一个html文件 好比：index.html.
当如你能够选择你本身的编辑器，我就用VSCode。

第二步：引入Vue库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
固然了你能够直接下载Vue的js文件，推荐你直接用上面的cdn便可。

第三步：建立一个Div，给它一个id，好比：app

第四步：建立Vue的对象，并把数据绑定到上面建立好的div上去。

最终的代码以下：github

<!DOCTYPE html> <!--第一步：建立文件夹及html文件-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之Helloworld</title>
  <!--第二步：引入Vue库-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:建立一个Div-->
  <div id="app">
    <!--Vue的模板的绑定数据的方法， 相似于不少其余前端的模板，能够用两对花括号进行绑定Vue中的数据对象的属性 -->
    {{ message }}
  </div>

  <!--第四步：建立Vue的对象，并把数据绑定到上面建立好的div上去。-->
  <script>
    var app = new Vue({         // 建立Vue对象。Vue的核心对象。
      el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
      data: {                   // data: 是Vue对象中绑定的数据
        message: 'Hello Vue!'   // message 自定义的数据
      }
    });
  </script>
</body>
</html>

最终的结果就是：json

Hello Vue!

1.3. Vue的Helloworld总结

Vue构造函数的：选项el属性，就是element缩写，当前Vue对象挂载到哪一个标签上的语法，支持CSS选择器或者dom对象，通常用id选择器选择当前页面的标签。
Vue的选项：data属性是自定义数据。这里咱们只是演示了一个message属性，vue会把自定义的数据能够与html的模板数据进行绑定。
Vue 数据绑定的方式就是用 {{}}，相似于handlebars.
上面这个demo就是演示了Vue的绑定数据的基本模型。注意点，标签先建立好了以后，再建立Vue对象，具体你应该懂吧。

其余详情请参考：http://aicoder.com/vue/preview/all.htmlapp

Github地址：源码下载框架

1. JavaWeb 入门系列
2. Jenkins入门系列
3. Velocity入门系列
4. Spark入门系列****
5. JVM入门系列
6. Flutter 入门系列
7. PaddlePaddle入门系列
8. Oracle入门系列
9. python入门系列19―——GUI wxpython入门
10. Python 入门系列 —— 2. 快速入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用