分类：VUE

2020
09-23

在vue项目实现一个ctrl+f的搜索功能

在vue项目实现一个ctrl+f的搜索功能 这次在项目中遇到了一个要做一个搜索功能，因为项目是vue的，而且是在手机端，所以对这个搜索功能的实现和能做到什么样子都没有底，在网上研究了一会，发现大家的解决方法都各有特色，有引入第三方包的，有遍历的，确实都可以实现，但我觉得在vue中这样的方法也太过繁琐了，于是经过一段时间的查询与思索后我自己写了个简单的方法，并记录下自己思索的过程第一步明确寻求产品的一万种奇怪要求对于开发来说，应该要知道自己需要什... 继续阅读 >
2020
09-23

Vue自定义组件的四种方式示例详解

四种组件定义方式都存在以下共性(血泪史)规则：1.组件只能有一个根标签2.记住两个词全局和局部3.组件名称命名中‘-小写字母'相当于大写英文字母(hello-com相当于helloCom)而对于在HTML中自定义组件的时候有4种写法，不过也只是殊途同归，都是用template属性对应的只有一个根标签的HTML代码。1.全局组件定义方式示例：Vue.component("hello-component",{props:["message"],template:"<div><h1>组件定义之全局组件</h1><h4>{... 继续阅读 >
2020
09-23

使用vue-cli3+typescript的项目模板创建工程的教程

使用vue-cli3+typescript的项目模板创建工程的教程 版本问题全局安装过旧版本的vue-cli(1.x或2.x)要先卸载它(vue-V查看自己的脚手架版本)npmuninstallvue-cli-g//或者yarnglobalremovevue-cli注:VueCLI3需要nodeJs≥8.9安装cnpminstall-g@vue/cli创建项目(以下只说明用vueui图形化界面导入配置好的demo)vueui打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入即可)安装依赖运行项目也可以在对应的文件夹下的cmd输入npmrunserve项... 继续阅读 >
2020
09-23

基于vue-cli3+typescript的tsx开发模板搭建过程分享

基于vue-cli3+typescript的tsx开发模板搭建过程分享 项目创建使用vue-cli3+创建一个基于ts的模板：vue-tsx-support上一步中已经创建完了基于ts的vue模板，但是开发方式还是如同之前的template一样，只是将script中的js部分改成了ts来书写。接下来就将模板(template)方式改成tsx的方式，这里需要借助一个库--vue-tsx-support首先安装vue-tsx-support： npminstallvue-tsx-support--save#oryarnaddvue-tsx-support安装结束后，我们需要对我们的文... 继续阅读 >
2020
09-23

vue 中的 render 函数作用详解

vue 中的 render 函数作用详解 render函数作用vue渲染函数文档第一遍看的晕晕乎乎的，再看看写写终于清晰了。建议配合文档阅读，本文也是根据文档加上自己的理解。注：本文代码都是在单文件组件中编写。代码地址render函数作用render函数跟template一样都是创建html模板的，但是有些场景中用template实现起来代码冗长繁琐而且有大量重复，这时候就可以用render函数。官网例子：子组件想要根据父组件传递的level值（1-6）来决定渲染标签h几。具体... 继续阅读 >
2020
09-23

浅析Vue 中的 render 函数

render函数是什么简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,vm中有一个方法_c,也是这个函数... 继续阅读 >
2020
09-23

浅析Vue 中的 render 函数

render函数是什么简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,vm中有一个方法_c,也是这个函数... 继续阅读 >
2020
09-23

vue学习笔记之给组件绑定原生事件操作示例

本文实例讲述了vue学习笔记之给组件绑定原生事件操作。分享给大家供大家参考，具体如下：当在父组件中定义一个点击事件，并且在父组件的methods中定义了这个点击事件时，在页面上点击并不会有什么反应。那么该怎么办呢？我们可以在子组件的template中的dom上定义一个点击事件（原生事件），并且在子组件的methods中定义该点击事件，然而点击页面时也只会alert(childclick)。这是为什么呢？父组件的点击事件被vue当成自定义事件，... 继续阅读 >
2020
09-23

vue父子模板传值问题解决方法案例分析

本文实例讲述了vue父子模板传值问题解决方法。分享给大家供大家参考，具体如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><one></one></div></body></html>//引入vue<scriptsrc="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script><script>(function(){//two的子模板letthree={props:["data","ide"],methods:{del(i){... 继续阅读 >
2020
09-23

vue 路由守卫(导航守卫)及其具体使用

最近在学习vue，感觉路由守卫这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记官方文档导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要... 继续阅读 >
2020
09-23

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。这可能是大部分前端开发者一贯的思维模式，拿来一个插件，看着demo就做出来了，功能展示正常就OK了，但是一旦出了bug，就会面向百度编程或者面向Google编程！其实，我也是这样的，哈哈哈哈.....废话不多说，最近在做一个视频播放的功能，找到vue-video-player插件后，咔咔咔完事，拿着我的爱疯，完美演绎！但是其他人的... 继续阅读 >
2018
05-30

2018年中高级前端面试题目小结

前言关于前端面试，及面试题目，我之前有很多文章总结过，可以在右侧搜索面试，进行查找。其实面试中可以问的问题很多，最近几年，我也面试过很多工作2-4年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会pass掉了。针对比较资深或者高级的前端面试，可能和初中级面试... 继续阅读 >
2018
04-22

Vue 2.0学习笔记：Vue的render函数

Vue 2.0学习笔记：Vue的render函数 前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，... 继续阅读 >
2018
03-23

手拉手，用Vue开发动态刷新Echarts组件

手拉手，用Vue开发动态刷新Echarts组件 需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图组件，抛砖引玉，一起来思考更多有意思的组件。准备工作项目结构搭建因为生产需要（其实是懒），所以本教程使用了==vue-cli==进行了项目的基础结构搭建。npminstall-gvue-clivueinitwebpack... 继续阅读 >