Vue初体验 | 创建你的第一个Vue组件

昨天学习了如何生成自己的第一个Vue工程，今天就学习如何创建自己的第一个Vue组件吧。

创建组件之前， 先将我学习Vue的相关知识总结一下。

Vue是什么？

Vue是一个前端框架， 特点是数据绑定和组件化。

• 数据绑定：比如你改变了页面上一个输入框的值，会自动同步更新页面上其他绑定该输入框的组件的值。

• 组件化：页面上小到一个按钮都可以是一个单独的.Vue文件，这些小组件像堆积木一样通过互相引用而组装起来。

Vue推荐开发环境

• Node.js ：JavaScript运行环境(runtime)，不同系统下不能直接运行各种语言， 需要Runtime转（类似于同声传译）
• npm：Node.js下的包管理器
• webPack：Vue的组件通过构建.Vue等自定义的组件，无法被用户端的各种浏览器解析， 需要被翻译和打包成.js文件
• vue-cli：用来生成模板的Vue工具，相当于按照图纸盖房子，可理解为脚手架

Vue写法

• <template></template>：写html
• <script></script>：写js
• <style></style>：写样式

这里有两点要注意：

1. 一个组件下只能有一个并列的div标签，即如下的这种样式:

<template>
  <div >
    <div></div>
  </div>
</template>

2. 数据要写在return里面，即如下样式：

<script>
export default {
  data () {
    return {
      msg: '你好啊'
    }
  }
}
</script>

Vue语法学习

对于语言的学习， 我这里就不做过多的描述了， 大家可以打开菜鸟课程， 自己学习下，地址在这里：（http://www.runoob.com/vue2/vue-tutorial.html）

学习地址

Vue组件的使用

在src文件夹下创建views文件夹， 创建一个login.Vue组件：

在App.Vue组件中使用组件（因为在index.html中定义了<div id = "app"></div>， 所以App.Vue想当于是一个入口）：

• 引入
  在<script></script>标签内的第一行写 ：
  import login from './views/login.vue'

• 注册
  在<script></script>标签内的代码块里加上components: { login }（如果代码块里还有其他的data，则需要用，分隔开）

  扫描二维码关注公众号，回复： 5219529 查看本文章

• 使用
  在<template></template>内加上<login></login>

• 终端启动， 打开浏览器，此时我们就能看到一个引入了我们自定义组件的界面：

对于自定义组件， 我们的设计肯定是以项目原型为基础的， 那就需要自己去处理咯~

写这篇主要是为了记录一下组件入门，通过自己写的第一个自定义组件让我对整体的流程有了更深的理解， 贴一下自己的成果：