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
阅读全文
浙公网安备 33010602011771号