java中的接口是类吗
283
2023-04-20
Vue单文件组件基础模板小结
背景
相信大家在使用vuevjZKcJfB开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多:
1.代码集中,便于开发、管理和维护
2.可复用性高,直接将vue文件拷贝到新项目中
我暂时就想到这两点,童鞋们可以在评论里帮我补充;因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用
//子组件要提前引入,才可使用
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
}
}
/**使用scss编写样式,既可提高开发效率,也方便维护
* scoped省略后,该样式片段会应用到页面全局
* 支持import语法引入css文件
*/
@import "../base/reset.css";
div {
h1 {
color: #c23a3f;
}
}
http://
结语
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~