1.路由概念：Hash地址与组件之间的对应关系工作方式：当用户点击页面上的路由链接导致了URL地址栏中的Hash值发生了变化前端路由就会监听到Hash地址的变化前端路由把当前Hash地址对应的组件渲染都浏览器中2.vue-router`vue-router是vue.js官方给出的路由解决方案2.1vue-router的基本用法安装vue-router包npminstallvue-router@4创建路由模块在src源代码目录下，新建router/index.js路由模块，并初始化代码：import{createRouter}from'vue-router'constroutes=[]const
一、内置指令1、v-text指令：向标签中添加文本2、v-html指令：向指定恒点中渲染包含html结构的内容。2-1、与插值语法的区别:(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。2-2、严重注意:v-html有安全性问题！！！(1).在网站上动态演染任查HTML是非常危险的，容易导致XSS攻击。(2).定要在可信的内容上使用v-html.永远不要用在用户提交的内容上!3、v-cloak指令：本质是一个特殊属性。Vue实侧创建完毕并接管容器后。会制掉v-cloak属性，使用css配合v-cloak间以解决网速设时页面展示出{{x
为了让组件数据缓存，避免每次资源重复加载（例如每次切换导航时数据会重新加载一次，体验真的差），因此使用了keep-alive，解决了以上产生的问题。封面.jpg一、开启keep-alive在这里keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，所以在vue1.0版本是不支持的。二、产生的问题keep-alive能使组件数据缓存，因此。如果有一个新闻列表，点击进入查看详情，返回点击查看其他新闻详情这时发现数据并没有更新，造成了数据不刷新的情况。因此，我试了以下网友提出的解决方法，发现并没有什么用（或许是我弄错了）。/
贴上官网vue-cli3创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js去修改默认的webpack。注意，只能叫vue.config.js。在根目录中创建vue.config.jsimage.pngvue.config.js配置贴上我在项目中，用到的比较全的配置"usestrict";constpath
image.pngrouter->index.js中的如下代码importVuefrom'vue'importstorefrom'../store'importVueRouterfrom'vue-router'Vue.use(VueRouter)//主入口importMainPagefrom'../views/MainPage.vue';importDadfrom'../views/Dad.vue';importChannelListfrom'../views/channelList.vue';importChannelOrderfrom'../views/channelOrder.vue';
一.Vue3.0生命周期对照表image.png二.在setup中使用provide和inject事实上之前还学过的Provide和Inject，CompositionAPI也可以替代之前的Provide和Inject的选项。image.png二.一.在父组件/爷爷组建中使用provide我是父组件//1.引入vue内置的provide函数import{provide}from"vue";importSonfrom"./Son.vue"exportdefault{name:"fatherCom",components:{Son},setup(){constname="huzhenchu";le
socket.io是即时通讯必需的插件，要和后端配合使用socket.io才可以，前端使用【socket.io-client】，旨在让你少走弯路～先安装【socket.io-client】yarnaddsocket.io-client-S安装后再新建ts，以插件形式引入2.1在utils文件夹下新建socket.ts,代码如下//新建ts以插件形式引入importiofrom'socket.io-client';exportdefault{install:(app:any,{connection,options})=>{constsocket=io(connection,options);ap
开篇说明:pdfjs指的是:http://mozilla.github.io/pdf.js/或者https://github.com/mozilla/pdf.jsPDF在vue中的使用已经有很多文章了,尝试了一大把,发现不能完全满足项目需要项目要求在线加载PDF,滚动显示,放大缩小等.踩坑记录第一个坑pdf-vuehttps://github.com/FranckFreiburger/vue-pdf这个插件比较简单,npminstall--savepdf-vue既可以使用流程走到最后发现,这个插件不能滚动翻页,只能手动触发上页和下页.......第二个坑pdfjs有好多使用博客,比如这个18年
前言vue插槽在开发中用到，这里做一个梳理。slot标签内置组件可以理解为占位符，最后被替换为内容。(子组件中使用)v-slot指令该指令仅限于template组件和自定义组件中使用。（父组件中使用）插槽：普通插槽、具备后备内容插槽、具名插槽、作用域插槽一、普通插槽将slot标签作为占位符。letbaseChild=``;letparent=newVue({components:{baseChild},template:`普通插槽`}).$mount("#app");最终渲染结果为普通插槽二、具备后备内容插槽如果父组件没有定义插槽，就会显示默认的内容。letbaseChild=`后备内容`;l
下载插件npminstallhtml2canvas--savenpminstalljspdf--save创建导出函数文件htmlToPdf.js//导出页面为PDF格式importhtml2Canvasfrom'html2canvas'importJsPDFfrom'jspdf'exportdefault{install(Vue,options){Vue.prototype.getPdf=function(fileName,divId){varelement=document.getElementById(divId)vartitle=fileName//PDF文件标题varc=documen
