Vue单文件组件基础

相信大家在使用Vue开发项目时，基本都是以单文件组件的形式开发组件的，这种方式好处多多：

1.代码集中，便于开发、管理和维护

2.可复用性高，直接将vue文件拷贝到新项目中

</template>
<script>
//子组件要提前引入，才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js脚本或类库
import Cookie from '../lib/cookie.js'

//Js部分尽量采用ES6语法，webpack babel插件会转义兼容
export default {
  //组件私有数据（必须是function，而且要return对象类型）
  data () {
    return {
      title: '组件标题',
      firstName: '',
      lastName: '',
    }
  },
  //父组件传递过来的数据（两种方式声明：1.数组 2.对象）
  //数组方式
  props: ['age'],
  //对象方式
  /*props: {
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }*/
  //计算属性
  computed: {
    fullName () {
      return this.firstName + this.lastName
    }
  },
  //监听
  watch: {
    title (preVal, newVal) {
        console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`)
    }
  },
  //函数集，自己封装，便于开发使用
  methods: {
    getCurrentDate () {
      return new Date().toLocaleDateString()
    }
  },
  //生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
  beforeCreated () {
    console.log('component before created')
  },
  //生命周期钩子：组件实例完成创建之后调用
  created () {
    console.log('component created')
  },
  //生命周期钩子：组件实例渲染完成时调用
  mounted () {
    console.log('component mounted')
  },
  //要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
  components: {
    ChildComponents
  }
}
</script>
<style lang="scss" scoped>
/**使用scss编写样式，既可提高开发效率，也方便维护
*  scoped省略后，该样式片段会应用到页面全局
*  支持import语法引入css文件
*/
@import "../base/reset.css";
div {
  h1 {
    color: #c23a3f;
  }//欢迎加入全栈开发交流圈一起学习交流：864305860
}//面向1-3年前端人员
//帮助突破技术瓶颈，提升思维能力
</style>
复制代码

结语 感谢您的观看，如有不足之处，欢迎批评指正。 本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。