淮南网站建设好,怎么把代码添加网站,定制网站建设价格,郑州企业网站排行文章目录 新认识的快捷键1.先写好组件并导入App.vue2.往组件中一个一个填内容3.整体静态完成后#xff0c;发现某些小部分相同#xff0c;其实可以分装成小组件4.最后通过js动态渲染 新认识的快捷键 1.Ctrl滚轮按住往下拖可以部分选中 .用同样的方法选中下面的111#xff0… 文章目录 新认识的快捷键1.先写好组件并导入App.vue2.往组件中一个一个填内容3.整体静态完成后发现某些小部分相同其实可以分装成小组件4.最后通过js动态渲染 新认识的快捷键 1.Ctrl滚轮按住往下拖可以部分选中 .用同样的方法选中下面的111然后用上图的选中后复制粘贴在1的位置就可以复制好了用于代码较多不方便一个一个改的时候 2.在一列文字后面Ctrl滚轮线下拖不选中然后回车粘贴就可以把你想要粘贴的内容复制到111下面注意复制粘贴内容的时候也要用Ctrl滚轮的方法 3.有时候看代码全部展开看太麻烦可以用 Ctrlk0全部折叠当你要展开时Ctrlkj就行了 Ctrld选中一个后按住这个快捷键往下拉可以选中所有相同内同 1.先写好组件并导入App.vue
templatediv classApp !-- 快捷链接 --XtxShortCut/XtxShortCut!-- 顶部导航 --XtxHeaderNav/XtxHeaderNav!-- 轮播区域 --XtxBanner/XtxBanner!-- 新鲜好物 --XtxNewGoods/XtxNewGoods!-- 热门品牌 --XtxHotBrand/XtxHotBrand!-- 最新专题 --XtxTopic/XtxTopic!-- 版权底部 --XtxFooter/XtxFooter/div
/templatescriptimport XtxShortCut from ./components/XtxShortCut.vueimport XtxHeaderNav from ./components/XtxHeaderNav.vueimport XtxBanner from ./components/XtxBanner.vueimport XtxNewGoods from ./components/XtxNewGoods.vueimport XtxHotBrand from ./components/XtxHotBrand.vueimport XtxTopic from ./components/XtxTopic.vueimport XtxFooter from ./components/XtxFooter.vueexport default{components:{XtxShortCut:XtxShortCut,XtxHeaderNav,XtxBanner,XtxNewGoods,XtxHotBrand,XtxTopic,XtxFooter}}
/script
style/style2.往组件中一个一个填内容 块块往template里面放样式往style里面放如果要轮播之类的往script里面放 template!-- 头部导航 --div classheader wrapper!-- 内容 --/div
/templatescript
export default{}
/scriptstyle/* 头部导航 */.header {display: flex;margin: 22px auto;}.header .logo {margin-right: 40px;width: 200px;height: 88px;background-color: pink;}//这边就写个大概样子不写全部了
/style3.整体静态完成后发现某些小部分相同其实可以分装成小组件 ①写好小组件 template
li classbase-brand-itema href#img src/assets/images/hot1.png alt //a
/li
/templatescript
export default{}
/scriptstyle.base-brand-item {width: 244px;height: 306px;}
/style②全局注册 import BaseGoodsItem from ./components/BaseGoodsItem
import BaseBrandItem from ./components/BaseBrandItemVue.component(BaseGoodsItem,BaseGoodsItem)
Vue.component(BaseBrandItem,BaseBrandItem)③插入对应组件ul位置 template!-- 热门品牌 --div classhotdiv classwrapperdiv classtitlediv classlefth3热门品牌/h3p国际经典 品质认证/p/divdiv classbuttona href#i classiconfont icon-arrow-left-bold/i/aa href#i classiconfont icon-arrow-right-bold/i/a/div/divdiv classbdulBaseBrandItem/BaseBrandItemBaseBrandItem/BaseBrandItemBaseBrandItem/BaseBrandItemBaseBrandItem/BaseBrandItemBaseBrandItem/BaseBrandItem/ul/div/div/div
/template④如果以后要20遍的话一遍一遍复制会有很多行所以可以配合v-for循环来使用正常是要跟数组的现在没有数组可以先写一个假数字应为v-for也可以遍历数字 div classbdulBaseGoodsItem v-foritem in 5 :keyitem/BaseGoodsItem/ul/div4.最后通过js动态渲染
