vue

vue中的组件,Component元素,自定义路由,异步数据获取

组件是Vue最强大的功能之一。组件是一组可被复用的具有一定功能,独立的完整的代码片段,这个代码片段可以渲染一个完整视图结构组件开发如何注册组件?第一步,在页面HTML标签中使用这个组件名称,像使用DOM元素一样。(通常是一个自定义元素)。<divid="app">  <my-component>...

vue的表单的简单介绍 input radio checkbox等表单特性

在vue中我们可以通过v-model来为表单元素实现双向绑定1:v-model指令数据的双向绑定双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模型中的数据(M)通常来说双绑定应用在表单中比较多指令:vue对html元素拓展是一些属性名称(自定义属性名称)Vue指令有个特...

vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

自定义指令默认设置的核心指令(v-model,v-bind,v-for,v-if,v-on等),Vue也允许注册自定义指令。注意,在Vue2.0里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令相当于为元素添加一个...

Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

 Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。Vue.js提供了一些常用的内置指令,如下:v-if指令v-for指令v-show指令v-else指...

SPA单页应用的2种类型分页技术(React、Vue等组件化开发)

SPA单页应用的2种类型分页技术,常见于React、Vue等基于组件化开发的项目1、纯前端分页2、基于后台的分页(1)纯前端分页  1、请求获取数据:一次性获取所有数据,翻页时不再发送请求  2、请求接口:不需要指定页面(pageNum)和每页数量(pageSize)    3、响应数据:所有数据的数组 (2...

React的单向数据流与Vue的双向绑定

  小结:React遵循从上到下的数据流向,即单向数据流。1、单向数据流并非‘单向绑定’,甚至单向数据流与绑定没有‘任何关系’。对于React来说,单向数据流(从上到下)与单一数据源这两个原则,限定了React中要想在一个组件中更新另一个组件的状态(类...

React和Vue等框架什么时候操作DOM

虽然网上都在将,React和Vue等框架尽量减少直接的DOM操作,但还有有些情况,必须直接操作 ...

vue中,实现锚点定位及跳转(url不发生变化)

<div class="footer" @click="returnTop">methods:{  returnTop:function(){    document.querySelector("#header").scrollIntoView(true);  }} 如果滚动...

基于vue实现搜索高亮关键字

有一个需求是在已有列表中搜索关键词,然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示,所以该需求需要解决的就两个问题:1.搜索关键词过滤列表数据2.每个列表高亮关键字ps:此问题基于数组对象,其他数据类型也可参考此思路。关键词搜索:过滤数据很简单,无非就是监听search,对源数据过滤即可,贴一下代码:1...

vue把链接转二维码

使用qrcodejs2插件1.安装qrcodejs2:npminstallqrcodejs2--save2.在组件里面引入:importQRCodefrom'qrcodejs2'3.在HTML加入:<divid="qrcode"ref="qrcode"></div>4.方法:qrcode(){l...
代码星球·2020-04-08

vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

报错的信息大致是不要将内置或保留的HTML元素用作组件ID解决的办法是修改name符合规范或者直接删除组件内的name属性。...
代码星球·2020-04-08

[Vue warn]: Duplicate keys detected: 'area'. This may cause an update error.

运行vue程序,浏览器报错:原因:检测到重复的密钥:'area',因为在使用v-for循环绑定的时候,key的值是唯一的,不能相同,否则会出现意想不到的bug解决办法:v-for时绑定的key唯一...

关闭vue的eslint代码检测和WebStorm的代码检测

1.在vue项目中bulid>webpack.base.conf.js中:    如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函数注释掉。2.在webstorm中取消编辑器代码校验:  ...

浅谈Vue工程化与ES6模块导出---export与export default

一、概述在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。ES6中,在JavaScriptES6中,export与...

vue使用echarts库

导语:随着大数据的发展,数据可视化成了我们日常开发中普遍存在的一种需求。现在我就日常工作过程中的可视化开发总结一下,回顾一下,本篇使用百度开源的echarts库来做案例。echarts官网echartsGithub下载echartsnpminstallecharts-S全局引入在src下面的main.js中引入echa...
代码星球·2020-04-08