收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Vue单文件组件基础模板小结

背景

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

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

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

我暂时就想到这两点,童鞋们可以在评论里帮我补充;因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用

 <template>
 <div>
  <h1>{{title}}</h1>
  <ChildComponents></ChildComponents>
 </div>
</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;
 }
}

</style>

结语

以上组件模板中的配置不是最全的,但都是最常用的,希望对大家的学习有所帮助,也希望大家多多支持积木网。

vue如何获取点击事件源的方法
整理文档,搜刮出一个vue如何获取点击事件源的方法,稍微整理精简一下做下分享。!DOCTYPEhtmlhtmllang="zh-CN"headmetacharset="utf-8"titlevueclick事件获取当前元素

Vue.js仿微信聊天窗口展示组件功能
源码:https://github.com/doterlin/vue-wxChat演示地址:https://doterlin.github.io/vue-wxChat/运行#installdependenciesnpminstall#servewithhotreloadatlocalhost:8080npmrundev#buildforproductionw

Angular4实现动态添加删除表单输入框功能
首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除代码如下:h5动态添加表单/h5divclass="form"divclass="form-groupform-group-sm"*ngFor="letioflogin"labelc

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号