- 博客(32)
- 收藏
- 关注
RSS订阅原创 Vue和 React的区别
而 Vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM。如上，所以 React 的性能优化需要手动去做，而Vue的性能优化是自动的，但是Vue的响应式机制也有问题，就是当 state 特别多的时候，Watcher 会很多，会导致卡顿。VUE 是由尤雨溪开发的，VUE 使用了模板系统而不是JSX，因其实模板系统都是用的普通的 HTML，所以对应用的升级更方便、更容易，而不需要整体重构。
2024-07-08 15:02:55
412
原创 Typescript中的函数学习
一. Typescript中的函数ES5中定义函数的方法 // 函数声明 function run() { return 'run' } // 函数表达式（匿名函数） const fn = function () { return 'run' }TS中定义函数的方法 // 如果返回值的类型不为字符串则报错 function fn():string { return 'run' } // 如果返回值的类型不为数字则报错 const fn = functi
2021-07-06 23:43:16
351
2
原创 时间日期库dayjs 快速高效的处理时间日期的js库（轻量级，拿来就能用）
NPMnpm install dayjs --saveimport dayjs from 'dayjs'// 或者 CommonJS// var dayjs = require('dayjs');dayjs().format();CDN<!--压缩版dayjs--><script src="https://unpkg.com/dayjs"></script><script> dayjs().format();</script&
2020-06-03 11:52:25
695
原创 获取当前月的第一天和最后一天
使用到 day.jsimport dayjs form ‘…/…/js/day.js’;firstDay 第一天 lastDay 最后一天//获取当前时间let date=new Date();//获取当前月的第一天 let monthStart = date.setDate(1); //获取当前月 let currentMonth=date.getMonth(); //获取到下一个月，++currentMonth表示本月+1，一元运算let nextMont.
2020-06-02 09:59:20
3700
原创 js数据类型之数组类型二（元素查找，数组排序，循环遍历，迭代器方法及扩展）
查找元素数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。indexOf
2020-04-27 13:51:03
213
原创 [git]warning: LF will be replaced by CRLF in 解决办法
三大主流操作系统的换行符：Uinx/Linux采用换行符LF表示下一行（LF：LineFeed，中文意思是换行）；Dos和Windows采用回车+换行CRLF表示下一行（CRLF：CarriageReturn LineFeed，中文意思是回车换行）；Mac OS采用回车CR表示下一行（CR：CarriageReturn，中文意思是回车）。在Git中，可以通过以下命令来显示当前你的Git...
2020-04-22 23:39:35
145
原创 一些常见的flex布局案例
1.产品列表均匀分布案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>产品列表均匀分布案例</title> <style> * { margin: 0;...
2020-04-16 00:02:25
841
原创 细谈flex布局，你怎么说？
1.什么是Flex布局？Flex是Flexible box的缩写，意思为“弹性布局”，提供我们更加灵活的操作盒模型任何一个容器都可以指定为Flex布局.box{display:flex}行内元素也可以使用 Flex布局.box { display:inline-flex }/*将行内元素做为内联块级弹性伸缩盒显示*/弹性盒模型用于决定元素在盒子里的分布方式以及如何处理...
2020-04-14 21:03:37
243
原创 **avigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navig
今天在跑项目时候遇到一个问题：在进行$router.push( { path:’ ’ }) 时候1.写成当前页面路径会报错2.写成其他路径，当点击两次时候会报错【也就是无法连续两次跳转这个路径】报错如下：avigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”, message: ...
2020-02-25 20:50:44
672
原创 Vue.component 组件
其实组件就是制作自定义的标签，这些标签在HTML中是没有的。1.全局化注册组件**html代码 ： **<div id='app'> <web></web></div>js 代码：<script> Vue.component('web'{ template:`<div style='color='red''&g...
2020-02-23 15:10:51
377
原创 template 模板（三种编写方式）
1.直接写在选项中的模板<script> const app = new Vue({ el:'#app' , data:{ message:'我是选项模板' } , template:`<p><a href="#">{{message}}</a></p>` )</script>优...
2020-02-23 14:51:51
2579
原创 Vue 的生命周期（钩子函数）
Vue 的生命周期Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。beforeCreate()created()beforeMount()Mounted()beforeUpdate()updated()activited()deactivited()beforeDestroy()destroyed()<!DOCTY...
2020-02-23 14:07:10
116
原创 Vue.set 全局操作
1.Vue.set 能做什么？Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。实例：vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。在外部改变数据的三种方法：html代码：<div id="app"> <p>{{count}}</p><...
2020-02-22 15:16:05
314
原创 Vue.extend实例扩展构造器
Vue.extend实例扩展构造器Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于 Vue.component 用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。实例：我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直...
2020-02-22 12:00:54
345
原创 Vue.directive 自定义指令
Vue.directive() 自定义指令在 Vue 中，我们知道有很多内部指令供我们使用。当然，我们也可以定义一些自己的指令，在必要的时候使用。1.实列：我们写一个自定义指令，让我们的文字改变颜色。单击按钮，让数字增加这个简单的小例子。然后改变数字的颜色。html 代码： <div id="app"> <p v-changecolor='co...
2020-02-20 22:26:46
180
原创 Vue 的全局API
什么是全局API？全局API不是在构造器中，而是先声明全局变量或直接在Vue上定义新功能，Vue内置了一些全局API。通俗讲，就是在构造器外使用Vue提供给我们的API函数来定义新的功能。...
2020-02-20 21:48:57
352
原创 Vue内部指令v-bind
v-bindv-bind：处理 HTMlL 中的标签属性的html 代码：<a v-bind:href='url'>点击我跳转<a/>在 html 中我们用 v-bind:href=‘url’ 动态绑定了 href 的值，这个值要注册到 vue 构造器的 data 属性中js 代码：const app = new Vue({ el:'#app', ...
2020-02-19 18:22:16
330
原创 Vue内部指令 v-model
v-modelv-model指令 绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。1.简单的双向数据绑定html代码： <p>{{message}}</p><br> 请输入：<input type="text" v-model="message">...
2020-02-19 12:03:17
156
原创 Vue的内部指令 v-on
v-onv-on 的省略缩写 @v-on 事件的监听 可以用 v-on 指令来监听DOM事件来触发js代码话不多说我们直接来一个最简单的示例全部代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text...
2020-02-17 19:08:52
170
原创 Vue内部指令 v-text & v-html
v-text之前我们学习过 大括号表达式 {{ }}但是这种方式有一些弊端，当网速卡顿或者出现BUG时候就会暴露我们实例中的数据名 {{msg}}Vue给我们提供了一个内部指令，v-text 来处理这个问题。核心代码：<span v-text='msg'><span/>v-html当js中穿插 html 代码块时，可以使用 v-html...
2020-02-17 17:14:50
513
原创 Vue的内部指令v-for
v-for指令：解决模板循环问题v-for 用来循环渲染一组 data 中的数组形式 ：item in items items是指源数据数组，item是数组元素迭代的别名基本用法：模板写法：<li v-for=“ item in items”>{{item}}</li>js写法：const app = new Vue({ el:'app'...
2020-02-17 15:55:41
266
1
原创 Vue的内部指令v-if&v-else&v-show
1.v-if 的使用v-if 是vue的内部指令，是用在html中v-if 的作用是用来判断是否加载html中的DOM示例核心代码 ：<div v-if="show">你好，我的朋友们</div>Vue.js代码 ： <script type="text/javascript"> const app = new Vue(...
2020-02-16 21:29:26
275
原创 Vue起步
下载Vue2.0的两个版本开发版本：包含完整的警告和调试模式生产版本：删除了警告，进行了压缩项目目录构建live-server 的使用用cnpm或者npm全局安装npm i live-server -g在项目目录中打开live-server编写第一个程序 helloWorld代码<!DOCTYPE html><html lang="en"&...
2020-02-15 15:18:11
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人