初学vue---第一篇博客！

书写一个vue组件有以下几个主要属性：

1. template：模板
2. js： 逻辑
3. css ： 样式

一、模板

<template>
  <div id="inputBox">
    <input type="text">
  </div>
</template>
<!--
template就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）：
-->
<div id="inputBox">
  <input type="text">
</div>
<!--
  对应原生写法的话，就是template内的dom字符串
-->

二、逻辑

export default {
  data () {
    return {
      counter: 0
    }
  },
  methods: {
    // 方法
  },
  created () {
    // 生命钩子
  },
  computed: {
    // 计算属性
  }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法，不懂的可以先去了解es6的模块化

三、样式

<style lang="less" scoped>
//你要写入的样式相关信息
</style>
<!--这里的你可以使用scss（CSS扩展语言）只要安装"sass-loader"和"node-sass"这两个npm包就好了，vue-cli已经配好相关参数了。如果想使用less或其它css扩展语音，只要装好各自的编译包就好了。而scoped是让css的作用域只在该文件下。-->

 

 

 

来源：https://www.cnblogs.com/cat-nine-sauce/p/12299583.html