Vue
关注
分享
扫一扫
gyuei
专栏内容均为个人笔记
展开
-
Vue之动态绑定style
1.对象语法示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div原创 2020-12-22 18:23:17 · 967 阅读 · 0 评论 -
Vue中{{}}、v-text和v-html
区别：{{}}和v-text会将元素当成纯文本输出v-html会将元素当成html标签解析后输出示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t原创 2020-12-22 14:28:52 · 509 阅读 · 0 评论 -
Vue组件之 子传父踩坑记录
问题:Event "fatherChange" is emitted in component <MyComponent> but the handler is registered for "fatherChange". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You sho原创 2020-12-17 18:29:40 · 2150 阅读 · 1 评论 -
Vue 之获取元素高度
html部分如下<div ref="enterBox"></div>js部分代码如下：created() { // 获取可视区域的宽度和高度 this.getEnterBoxStyle() }, methods: { getEnterBoxStyle() { // 页面渲染完成后的回调 this.$nextTick(() => { const viewsWidth = window.getCompu原创 2020-09-17 10:28:09 · 1557 阅读 · 0 评论 -
Vue之使用Promise自定义confirm确认框组件
参考网址:https://www.cnblogs.com/conglvse/p/9667647.html文件目录如图所示:使用Promise模拟浏览器确认框，可自定义标题，内容，按钮文字和类型在iconfont库下载所需要的icon图标添加购物车并下载至本地，引入下载的iconfont文件夹在项目文件夹components下新建一个目标文件夹Confirm----新建文件Confirm.vue,代码示例如下:<template> <!-- 组件参考网址：https原创 2020-05-13 17:40:19 · 2891 阅读 · 0 评论 -
Vue 插件集合
UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 U...原创 2020-04-14 17:57:25 · 1029 阅读 · 0 评论 -
Vue阻止冒泡事件 阻止默认事件
防止触发不需要的事件示例：阻止冒泡事件<div class="hx-confirm-content" @click.stop="stopAction()"> <div class="hx-confirm-body" @click="handleAction('close')">{{content}}</div></div>js部...原创 2019-12-27 14:39:19 · 343 阅读 · 0 评论 -
Img中src路径变成Object问题处理
处理办法：关闭浏览器，重新启动项目原创 2019-12-16 16:41:06 · 2411 阅读 · 0 评论 -
v-for条件下的input双向绑定
<input class="addIpt" type="text" name="driver_name" disabled v-for="(item, index) in driver_name" v-model="driver_name[index]"/>js部分代码如下：data: function(){ return{ //v-for中的inpu...原创 2019-12-09 16:08:37 · 1279 阅读 · 0 评论 -
v-for 实现模块的增加、删除以及v-for条件下的input双向绑定
点击添加按钮，实现某个模块内容的增加和删除初始化效果：html部分代码如下：<div class="row padleft padingtop"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <span class="Iptstitle">提单号</span>...原创 2019-12-09 15:25:42 · 434 阅读 · 0 评论 -
单选按钮radio嵌套radio(多层radio)
当点击出口按钮时，显示另外一组单选按钮；点击进口按钮时，另外一组单选按钮隐藏最终效果如下：html部分代码如下：<div class="group_rows"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padleft padingtop" > <span clas...原创 2019-11-27 14:46:07 · 1472 阅读 · 0 评论 -
Vue单选按钮radio输入绑定
html部分代码如下：<!-- 单选按钮的文字和input组合 --><div style="display: inline-block;"> <input type="radio" id="tradein" value="radioin" v-model="pickedradio" /> <labe...原创 2019-11-27 13:34:17 · 2320 阅读 · 0 评论 -
Vue中的双击事件 @dblclick=" " v-on:dblclick=" "
目的：双击按钮显示相应内容@dblclick=“事件名”html部分代码如下所示：<button class="btn btn-default" data-toggle="modal" @dblclick="copyText()">登录</button><div id="modalget"></div>js部分代码如下所示：d...原创 2019-11-26 14:10:27 · 17411 阅读 · 0 评论 -
Vue自定义滚动条niceScroll
参考网址：https://nicescroll.areaaperta.com/https://github.com/inuyaksa/jquery.nicescroll/blob/master/README.mdhtml部分代码如下：<div class="box" style="overflow:auto;height:150px;"> <ul> <...原创 2019-11-16 11:06:43 · 725 阅读 · 0 评论 -
Vue无限滚动加载(数据懒加载)
参考网站：https://element.eleme.cn/#/zh-CN/component/infiniteScroll?tdsourcetag=s_pcqq_aiomsg要实现滚动加载的列表上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。<template> <div class="infinite-list-wr...原创 2019-11-16 10:29:06 · 8715 阅读 · 1 评论 -
Vue图片预览功能的实现
参考网址：https://mirari.cc/v-viewer/目的：写一个关于图片预览的组件window+R找到项目所在的文件夹----输入npm install v-viewer + 回车在components文件夹下建一个XXX.vue的文件，文件内代码如下：<template> <div class="hello"> <viewer :...原创 2019-11-14 13:51:38 · 1145 阅读 · 0 评论 -
利用Vue实现分页组件
效果：参考文章：https://www.cnblogs.com/sebastian-tyd/p/7853109.html功能描述：1、单击页码跳转到相应的页面2、可以在输入框中输入想要到达的页面3、单击上一页和下一页按钮，可以实现前进和后退功能4、当处于第一页时，不显示上一页按钮；当处于最后一页时不显示下一页按钮；html部分代码如下所示：<div id="app">...原创 2019-11-09 17:25:41 · 208 阅读 · 0 评论 -
Vue实现tab标题切换实例
本文主要讲述利用Vue实现简单的tab切换效果，有需要的朋友可以参考html部分布局html部分代码如下所示：<div id="app"> <ul class="tab-tilte"> <li>标题一</li> <li>标题二</li> <li>标题...原创 2019-11-09 11:44:24 · 758 阅读 · 0 评论