Vue单文件组件基础模板
背景
相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多:
1.代码集中,便于开发、管理和维护
2.可复用性高,直接将vue文件拷贝到新项目中
我暂时就想到这两点,童鞋们可以在评论里帮我补充;因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用
1 <template> 2 <div> 3 <h1>`title`</h1> 4 <ChildComponents></ChildComponents> 5 </div> 6 </template> 7 <script> 8 //子组件要提前引入,才可使用 9 import ChildComponents from './ChildComponents.vue'10 //也可引入一些公共Js脚本或类库11 import Cookie from '../lib/cookie.js'12 13 //Js部分尽量采用ES6语法,webpack babel插件会转义兼容14 export default {15 //组件私有数据(必须是function,而且要return对象类型)16 data () {17 return {18 title: '组件标题',19 firstName: '',20 lastName: '',21 }22 },23 //父组件传递过来的数据(两种方式声明:1.数组 2.对象)24 //数组方式25 props: ['age'],26 //对象方式27 /*props: {28 age: {29 type: Number,30 default: 0,31 required: true,32 validator: function (value) {33 return value >= 034 }35 }36 }*/37 //计算属性38 computed: {39 fullName () {40 return this.firstName + this.lastName41 }42 },43 //监听44 watch: {45 title (preVal, newVal) {46 console.log(`改变之前的值:${preVal};改变之后的值:${newVal}`)47 }48 },49 //函数集,自己封装,便于开发使用50 methods: {51 getCurrentDate () {52 return new Date().toLocaleDateString()53 }54 },55 //生命周期钩子:实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用56 beforeCreated () {57 console.log('component before created')58 },59 //生命周期钩子:组件实例完成创建之后调用60 created () {61 console.log('component created')62 },63 //生命周期钩子:组件实例渲染完成时调用64 mounted () {65 console.log('component mounted')66 },67 //要用到哪些子组件(如果组件已是最小粒度,那么可省略该属性)68 components: {69 ChildComponents70 }71 }72 </script>73 <style lang="scss" scoped>74 /**使用scss编写样式,既可提高开发效率,也方便维护75 * scoped省略后,该样式片段会应用到页面全局76 * 支持import语法引入css文件77 */78 @import "../base/reset.css";79 div {80 h1 {81 color: #c23a3f;82 }83 }84 85 </style>
转载于:https://blog.51cto.com/13013666/1940100
Vue单文件组件基础模板相关推荐
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
- vue单文件组件导入导出
目录分析 打开项目,依次分析下目录结构,项目目录结构如下 项目目录结构如下 单文件组件.vue 目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue ...
- 在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...
- 什么Vue单文件组件(SFC)?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
- Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- 【视频】vue单文件组件vue-cli
P13vue单文件组件vue-cli https://www.bilibili.com/video/av91679349?p=13
最新文章
- 360浏览器如何设置为像chrome谷歌浏览器那样输入网址回车在当前页面,而不是新建一个标签打开
- js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
- Spring Boot 消息队列 RocketMQ 入门
- python的socket模块_python模块:socket模块
- 通过自定义消息调用主窗体的菜单项
- 渗透测试入门24之渗透测试参考书、课程、工具、认证
- wpf开发仿真3d软件_3D体验平台品牌应用——SOLIDWORKS?
- 【英语学习】【Level 07】U03 Amazing wonders L2 A global city
- 大公司的资深工程师和小公司的Leader如何决择?
- MCMC(MH算法)
- php和composer关系_使用Composer管理PHP依赖关系
- springboot+vue+elementUI springboot地方废物回收机构管理系统-#毕业设计
- [原创]windows server 2012 AD架构 试验 系列 – 17管理用户AD帐号
- spark.yarn.archive spark.yarn.jars
- 利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容
- android 仿微信 视频播放器,Android仿微信多媒体选择器 - SmartMediaPicker
- 数组去重:将一数组中重复的元素去掉剩余部分保存到新数组中
- oracle列求平均
- Tensorflow 的NCE-Loss的实现和word2vec
- python 限定数据范围_Python 生成周期性波动的数据 可指定数值范围2