04 2021 档案
Vue之监听数据变化watch、computed、methods
摘要:一、业务场景:前两个文本框中输入值,最后一个文本框自动监听前面输入的值 方式一:使用事件绑定机制@keyup,在methods中写入监听方法 <body> <div id="app"> firstName:<input type="text" v-model="firstname" @keyup="
阅读全文
Vue路由-使用命名视图实现经典布局
摘要:经典布局:上、左、右 html代码结构 <div id="app"> <router-view></router-view> <div class="contain"> <router-view name="left"></router-view> <router-view name="main">
阅读全文
Vue路由-使用children属性实现路由
摘要:在登录父组件中嵌套两个字组件 account1和account2,点击按钮后,可以在父组件中切换子组件 第一步,创建父组件,父组件中包含两个子组件 注意:需要在父组件中设置占位符,用来放置子组件 <template id="tmp1"> <div> <h1>这是登录父组件</h1> <router-
阅读全文
Vue之路由传参
摘要:一、使用query方式传参 优点:在路由中 使用查询字符串给路由传递参数 不需要修改路由规则的path属性 1,如何在组件内部拿到页面传递过来的参数 <div id="app"> <router-link to="/login?id=10&name=zs">登录</router-link> <rou
阅读全文
Vue路由之touter-link、router-direct的使用
摘要:一、router-link 通过router-link渲染出来的组件是a标签 可通过设置tag属性来设置渲染出来的标签,将router-link渲染为span标签 <router-link to="/login" tag="span">登录</router-link> 不管将router-link渲
阅读全文
Vue之路由的基本使用
摘要:整体过程:点击超链接 修改url地址 由于已经将路由对象注册到Vue实例上 路由就会监听到url地址的改变 于是就会进行路由规则的匹配 匹配到规则后就会展示component对应的组件 通过router-view展示到页面上 第一步:导入vue-router <script src="https:/
阅读全文
CSS之清除浮动的最常用的四种方法,以及优缺点
摘要:为什么要清除浮动? 清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题 1.如下,我给父盒子设置一个boder,内部放两个盒子一个big 一个small,未给big和small设置浮动,则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上
阅读全文
vue之使用ref获取DOM元素和组件引用
摘要:说明: vm.$refs 是一个对象,拥有已注册过 ref 的所有元素(或者子组件) 使用: 在HTML元素中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意: 如果获取的是一个子组件,通过 ref 就能获取到子组件中的 data 和 methods 添加 ref 属性 <div
阅读全文
CSS知识小点(一)
摘要:CSS3 box-sizing 属性 https://www.runoob.com/cssref/css3-pr-box-sizing.html 行高 line-height 设置行高等于height 让元素上下居中,这个仅适用于单行文本,flex布局也只是对元素可以设置垂直居中,不作用于文本 块元
阅读全文
Vscode 小白使用介绍
摘要:入门使用:https://www.cnblogs.com/tu-0718/p/10935910.html 插件介绍:https://blog.csdn.net/weixin_39919165/article/details/111164648 https://blog.csdn.net/qq_422
阅读全文
Vue之子组件向父组件传值--$emit
摘要:二、父组件向子组件传递方法 该问题可以理解为“子组件如何调用父组件的方法”,根据对父组件向子组件传值过程的理解,该过程还是分为两个步骤: 1、父组件如何将方法传给子组件? 2、子组件如何获取父组件传过来的方法? 解读vue示例代码: 1、父组件通过“事件绑定机制”将方法传给子组件。 2、子组件在me
阅读全文
Vue之父组件向子组件传值--props
摘要:一、父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1、父组件如何将值传给子组件? 2、子组件如何获取父组件传递过来的值? 解读vue示例代码: 1、父组件向子组件传值是通过“属性绑定”的形式实现的(第2行) 2、子组件默认是无法
阅读全文
Vue之组件切换
摘要:一,使用v-if和v-else指令 1,定义注册和登陆组件,设置flag标识,默认为true <script> Vue.component('login', { template: '#tmp1' }) Vue.component('register', { template: '#tmp2' })
阅读全文
Vue中组件的data和methods
摘要:1,定义组件中数据和方法 组件可以有自己的数据 组件的data和实例data不一样,实例data是一个对象 组件的data是一个方法,该方法必须返回一个对象 组件中的data数组使用方式和实例中的data使用方式完全一样 <script> var vm = new Vue({ el: '#app',
阅读全文
Vue之创建组件
摘要:1,定义公有组件 <body> <div id="app"> <!--步骤3:引入组件--> <mycom3></mycom3> </div> <!--步骤2:在被控制的#app外面 使用template元素,定义组件的HTML模板结构--> <template id="tmp1"> <div> <
阅读全文
Vue生命周期代码示例
摘要:一,页面准备 1,创建页面 <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{msg}}</h3> </div> 2,创建Vue实例对象 <script> var vm = new V
阅读全文
inline、block和inline-block的区别
摘要:block:div h1 li 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(很霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 inli
阅读全文
Vue自定义指令
摘要:一,全局指令 1,自定义全局指令 使用Vue.directive()定义全局指令,参数1:指令的名称 参数2:对象,这个对象身上 有一些指令相关的钩子函数 这些函数可以在特定的阶段执行相关操作 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用
阅读全文
定义格式化时间的全局过滤器
摘要:ES6字符串新方法 String.prototype.papStart(maxLength, fillString=' ')或者String.prototype.papEnd(maxLength, fillString=' ')来填充字符串 maxLength表示填充后字符串的最大长度,fillSt
阅读全文
Vue过滤器的使用
摘要:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: 一,不带参数的过滤器及其使用 1,不带参数的过滤器的定义语法
阅读全文
daterangepicker 设置默认值为空(转载)
摘要:DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到 ,但是目前使用中,感觉功能不甚齐全,所以将遇到的问题和解决方法记录下来。 1无法默认值为空 DateRangePicker可以
阅读全文
js时间戳与日期格式之间的互转
摘要:转载https://segmentfault.com/a/1190000000481753 1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 2.
阅读全文
Vue之v-model双向数据绑定
摘要:一,总结 v-bind只能实现数据的单项绑定,从M自动绑定到V,无法实现数据的双向绑定 v-model可以实现表单元素和Model中数据的双向数据绑定 注意:v-model只能运用在表单元素中 input(radio text address email),select,checkbox,texta
阅读全文
Vue指令之v-if和v-show
摘要:一,总结 1、v-if 的特点: 实现方式:根据后面数据的真假判断是否重新删除或创建元素。 性能消耗:有较高的切换性能消耗。 编译过程:v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。 2、v-show的特点: 实现方式:每次不会重新进行DOM的删除和创建
阅读全文
Vue中v-for key的使用注意事项
摘要:一,创建页面 <div id="app"> <div> <label for="">Id <input type="text" v-model="id"> </label> <label for="">name <input type="text" v-model="name"> <input ty
阅读全文
Vue中v-for指令的四种使用
摘要:一,循环普通数组 1,创建Vue实例对象 <div id="app"> <p v-for="(item, i) in list">每一项值{{item}} 索引值为{{i}}</p> </div> 2,循环数据 <script> var vm = new Vue({ el: '#app', data
阅读全文