- 博客(45)
- 收藏
- 关注
RSS订阅
1原创 Vue-项目环境准备（node、npm、码云、Git）
1. node.jsnode.js 是一个让 JavaScript 运行在服务端的开发平台在Node上运行的JavaScript相比其他后端开发语言，最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。node安装及环境配置这里是引用下载后，在Windows上安装时务必选择全部组件，包括勾选Add to Path。安装完成后，在Windows环境下，cmd打开命令提示符，然后输入node -v，如果安装正常，就会看到v12.6.0这样的版本
2020-05-15 23:41:15
269
原创 Vue-过渡&动画
1. Vue中的CSS动画原理如果要元素具有动画效果，则需要在元素外部包裹一个transition（过渡）标签，这样Vie就会自动帮我们构建一个动画流程；同时我们可以给标签通过name属性取一个名字，（如果不取名，Vue默认的class前缀是v）例如： <div id="root"> <transition name="fade"> <div v-if="show">Hello</div> &l
2020-05-15 18:02:34
469
原创 Vue-动态组件与v-once指令
动态组件——会根据is绑定数据的变化，动态地加载组件， 每一次切换时，都会销毁再创建一个组件，会消耗性能通过v-once指令可以提高静态内容的展示效率，它会把组件缓存到内存中，之后需要的时候再取出渲染举个栗子：我们要实现一个点击按钮，然后两个不同的div块交替显示<div id="root"> <!-- <child01 v-if="show==='01'"></child01> <child02 v-if="show=
2020-05-15 10:34:18
186
原创 Vue-插槽（slot）
目录1.插槽是什么？2.插槽的作用域3.后备内容（默认内容）插槽4.具名插槽5.作用域插槽在开始讲插槽之前，我们来思考一下：我们都知道，父组件可以随意地向子组件传递一个值，那么问题来了，如果我们要传递一个dom元素，比如说p标签呢？这个时候，我们会发现，p标签被转义了，没有直接渲染出来:(为了p标签的正常渲染，可以使用v-html，但是与此同时，它外层又会多了一个div标签：聪明的童鞋可能想到——用模板占位符template啊！其实在这里它么得用，是渲染不出来的：害，这也不行，那也不行，那究
2020-05-14 10:45:47
234
原创 Vue-非父子组件间传值
非父子组件间传值主要通过两种方式：vuex（一般用于大项目，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。）bus通过 一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。...
2020-05-13 21:31:52
325
原创 Vue-给组件绑定原生事件
当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件。所以在下面这个例子里，点击子组件，并不会有弹窗提示。如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。在元素上绑定的事件，监听的是原生事件在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。也就是酱婶的：在开发的过程中这样写有点太麻烦，假如我有这样的需求，我就想在子组件上监听原生的事件
2020-05-13 17:49:40
1922
原创 Vue-组件参数校验与非props特性
1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。子组件通过props接收传递参数，并说明传递参数的属性：type——参数类型required——是否必传default ——默认传的值validator——自定义校验器，要求字符串长度等2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系）（1）传递的属性不会在控制台的dom标签上显示（2）子组件模板可以通过插值
2020-05-13 17:36:42
140
原创 Vue-父子组件传值
1.父组件向子组件传值父组件通过props的方式向子组件传值2.子组件向父组件传值子组件通过$emit的方式向父组件传值$emit绑定一个自定义事件, 当这个语句被执行时, 就会触发事件并将参数传递给父组件,父组件通过v-on监听并接收参数。3.Vue有一个特性——单向数据流父组件可以向子组件传递数据，子组件只能接收，但不能直接修改，可以通过拷贝一个数据的副本进行修改。举个栗子：假如，有个慷慨的父组件想把100w传给他的子组件，这是完全ojbk的！那这个接收到了100w的子组件只能够去用
2020-05-13 17:23:10
106
原创 Vue-组件使用的细节点
1.用is标签解决组件使用当中可能出现的小bug模板标签使用时（table、ul）出现的bug：页面使用子组件模板来渲染table里的tr、td标签时， 会被作为无效的内容提升到外部，并导致最终渲染结果出错，tr显示会跟table同级，这不符合html规范——html只支持在table里写tr，ul里写lo，select里写option。这是无效的写法：<table> <blog-post-row></blog-post-row></table>
2020-05-12 09:27:58
115
原创 Vue-列表渲染
目录1.Vue怎么渲染一个列表？2.维护状态：key3.数组更新4.显示过滤/排序后的结果5.在 v-for 里使用值范围6.在 template标签上使用 v-for7.在组件上使用 v-for1.Vue怎么渲染一个列表？基于数组使用v-for 指令v-for 指令需要使用 item in items 语法，不过我们更推荐使用of代替in，因为这样更接近js迭代器的语法。其中 items...
2020-05-05 18:34:42
301
原创 Vue-条件渲染
1.v-ifv-if用于条件性地渲染一块内容。后边跟的依旧是一个js表达式，这个表达式的返回值决定了这块内容是否会被真实地挂载到页面上。（这块内容只会在指令的表达式返回 truthy 值的时候被渲染）<div v-if="show">Hello World</div>也可以用 v-else 添加一个“else 块”，不过一定要连写在一起使用：<div v-...
2020-05-03 20:58:36
176
原创 Vue-样式绑定（Class与Style）
操作元素的 class 列表和内联样式是数据绑定的一个常见需求，我们可以通过v-bind（或者简写为：）进行绑定，它后边跟的就是一个表达式，其类型除了字符串之外，还可以是对象或数组。那么v-bind是如何绑定class的呢？1.对象语法（class的对象绑定）我们可以传给 v-bind:class 一个对象（对象中也可以传入更多字段），以动态地切换 class：<div v-bind...
2020-05-01 21:29:38
699
原创 Vue-计算属性的getter和setter
计算属性默认只有 getter，不过在需要时也可以提供一个 setter：<body> <div id="root">{{fullName}}</div> <script> var vm = new Vue({ el:"#root", data:{ ...
2020-03-25 09:38:02
366
原创 Vue-方法、计算属性（computed）、侦听器（watch）
方法func计算得到的结果不会被系统缓存，每当数据有变化就会重新计算<body> <div id="root"> <div>{{fullName()}}</div> <!-- 方法想在插值表达式进行调用的时候，需要在后面加括号 --> <div>{{age}}&l...
2020-03-24 11:52:35
83
原创 Vue-模板语法
插值表达式：{{ }}将数据解析为纯文本，不能输出真正的html在页面加载时显示{{}}，所以通常使用v-html和v-text代替原始HTML：v-html输出真正的html文本：v-text将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{ }}<body> <div id="root"> ...
2020-03-23 16:31:36
377
原创 Vue-TodoList（父子组件传值）
在组件的模板里绑定点击事件handleItemClick,props接收content和index两个变量在组件的methods里声明handleItemClick方法，并用$emit触发当前实例上的事件，附加参数index传给监听器delete回调。在组件标签里添加监听事件delete在vue实例methods里声明delete方法(传参数index),利用splice（）方法，从当前下...
2020-03-20 12:00:20
253
原创 Vue-TodoList（组件化改造）
1. Vue组件是什么组件（Component）是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代码，可以将组件看作自定义的HTML元素组件系统让我们可以用独立可复用的小组件来构建大型应用2. 如何使用组件（1）...
2020-03-20 11:39:57
334
原创 Vue实践TodoList（v-for、v-model、v-on）
通过v-for指令绑定数组的数据，来渲染一个项目列表：<body> <div id="todo"> <input type="text"> <button>commit</button> <ul> <li v-for = "item i...
2020-03-16 23:21:46
187
原创 Vue-声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<body> <div id='app'>{{content}}</div> //通过插值表达式{{}}调用data里的数据进行渲染 <script> // var dom = document.getElementById('a...
2020-03-16 22:18:25
310
原创 Vue的安装
Vue官网教程https://cn.vuejs.org/v2/guide/installation.html直接下载Vue.js包（建议下载开发版本的包，包含完整的警告和调试模式）html文档中用script标签引入包，Vue 会被注册为一个全局变量。<script src="vue.js"></script>...
2020-03-16 16:59:53
68
原创 Vue实现跑马灯效果
实现跑马灯效果的分析：给按钮绑定 点击事件 用v-on 或者@在按钮的事件处理函数中 写相关业务逻辑代码：拿到msg字符串，调用substring进行字符串的截取操作（截取第一个放到最后位置）为了实现“跑起来”的效果，也就是自动循环截取功能，需把步骤2放到定时器步骤：导入vue包创建控制区域定义vue实例注意：在vue实例中，需通过this.属性/方法名，才能访问da...
2020-03-16 16:49:14
2147
原创 浏览器的兼容性
文章目录1. 样式兼容性（css）2. 交互兼容性（javascript）3. 浏览器 hack（也就是CSS hack）来自hr的灵魂拷问："你对浏览器的兼容性有了解过吗？"回答这个问题的正确姿势＜（＾－＾）＞解锁√浏览器的兼容性，无非就仨：样式兼容性（css）交互兼容性（javascript）浏览器 hackLet’s talk about it !!!1. 样式兼容性（c...
2019-10-21 21:39:54
164
原创 前端框架模式MVC、MVP和MVVM的区别
1. 概述三种常见的前端架构模式——MVC、MVP、MVVM通过分离关注点来改进代码的组织方式。MVC模式是MVP、MVVM模式的基础这两种模式更像是MVC模式的优化改良版他们三个的MV（model，view）相同，不同的是MV之间的纽带部分2. MVC允许在不改变视图的情况下，改变视图对用户输入的响应方式用户对View的操作交给了Controller处理在Con...
2019-10-10 16:04:40
382
原创 框架和库的区别
1、框架用三个字概括就是大而全框架提供了一整套的解决方案对项目的侵入性较大项目如果需要更换框架，则需要重新架构整个项目2、库用三个字概括就是小而巧只提供了特定的API，也就是提供某一个小功能对项目的侵入性较小如果某个库无法完成某些需求，可以很容易切换到其它库实现需求，而代码无需做很大的修改...
2019-10-10 16:03:26
156
原创 Vue.js是什么
Vue.js是什么？是前端的主流框架之一，和Angular.js、React.js 一起并称为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，有配套的第三方类库，可以整合起来做大型项目的开发主要工作就是和界面打交道，来制作前端页面效果；为什么要学习流行框架？为了提高开发效率，时间就是效率，效率就是金钱提高开发效率的发展历程：原生JS -...
2019-10-10 16:01:42
103
原创 常见CSS的浏览器兼容问题
文章目录1. 边框2. 背景3. 字体4. 2D转换5. 3D转换6. 过渡7. 动画8. 双倍浮动bug9. 表单元素行高不一致10. IE6（默认16px为最小）不识别较小高度的标签（一般为10px）11. 图片添加超链接时，在IE浏览器中会有蓝色的边框12. 最小高度min-height不兼容IE613. 图片默认有间隙14. 按钮默认大小不一15. 百分比bug16. 鼠标指针bug17....
2019-10-08 21:05:16
835
原创 解决CSS的浏览器兼容性问题
文章目录1. 为什么会有浏览器兼容性问题？2. 如何解决CSS浏览器兼容性问题？（1）浏览器CSS样式初始化（2）浏览器私有属性（3）自动化插件（4）CSS hack1. 为什么会有浏览器兼容性问题？都是浏览器厂商太多的锅！！！Chrome啥时候能够一统江湖啊T~T关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。浏...
2019-10-08 17:44:46
761
原创 cookie和session的区别
文章目录1. 什么是 cookie？2. cookie 的作用3. cookie的特点4. 什么是session？5. session的作用6. session的特点7. cookie和session的不同8. cookie和session结合使用的方式1. 什么是 cookie？cookie 是一些数据, 存储于你电脑上的文本文件中2. cookie 的作用解决 "如何记录客户端的用户信...
2019-10-08 15:53:11
94
原创 js闭包和匿名函数
文章目录1. 闭包是什么2. 为什么闭包函数能够访问其他函数作用域的变量3. 为什么其他非闭包的函数没有权限访问另一个函数的内部作用域4. 闭包解决了什么问题5. 闭包的应用场景6. 创建闭包的常见的方式7. 匿名函数8. 立即执行函数9. 立即执行函数的作用1. 闭包是什么闭包就是：一个函数，这个函数能够访问其他函数的作用域中的变量2. 为什么闭包函数能够访问其他函数作用域的变量闭包产...
2019-10-08 15:03:34
164
原创 JS的三大组成部分
1. 什么是JS？JavaScript是一种高级的、解释型的编程语言（脚本语言）高级编程语言是高度封装的编程语言，以人类日常语言为基础，使用一般人易于接受的文字表示，有较高的可读性。解释型语言是一种编程语言类型，它会直接运行代码，不像编译语言（经过编译器先行编译为机器代码，之后再运行）编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种...
2019-10-07 18:27:31
1866
原创 js原型与原型链
文章目录构造函数为什么要使用构造函数？构造函数执行流程1. 原型显式原型（属性）隐式原型（属性）原型的内存结构2. 原型链（隐式原型链）原型链的属性构造函数用 new 关键字来调用的函数，称为构造函数（首字母一般大写）为什么要使用构造函数？创建对象时，可能因为对象具有一些相似的特征(属性)和行为(方法)，产生很多重复代码，而使用构造函数就可以实现代码复用。举个栗子，录入班同学的个人信息，...
2019-10-04 22:22:43
145
原创 JS模块化
JS模块化模块化的理解什么是模块?将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信一个模块的组成数据—>内部的属性操作数据的行为—>内部的函数模块化编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目模块化的进化过程全局fun...
2019-10-02 13:36:23
96
转载 ES笔记
文章导航：理解ESES5ES6ES7理解ES全称: ECMAScriptjs语言的规范我们用的js是它的实现js的组成ECMAScript(js基础)扩展–>浏览器端BOMDOM扩展–>服务器端Node.jsES5严格模式运行模式: 正常(混杂)模式与严格模式应用上严格式: ‘strict mode’;作用:使得Ja...
2019-10-02 10:36:07
210
原创 js的变量、对象、函数、类、方法
1. 变量——用于存储数据的容器就像代数那样，使用字母（比如 x）来保存值，这些字母被称为变量变量的命名要求：必须以字母开头能以 $ 和 _ 符号开头（不推荐）大小写敏感局部变量（该变量的作用域是局部的）在 JavaScript 函数内部声明的变量（使用 var）是局部变量，只能在函数内部访问可在不同的函数中使用同名局部变量，因为只有声明过该变量的函数才能识别出该变...
2019-09-29 13:32:51
484
原创 js的变量提升
1. 什么是变量提升？？？其实，就是解释器悄咪咪地把定义在方法后面的变量或函数，提升到最前面2. 那什么时候变量不会提升？！！JavaScript 只有声明的变量会提升，初始化的不会（也就是说，赋值的不会）举个栗子：//实例1var x = 5; // 初始化 xvar y = 7; // 初始化 yelem.innerHTML = x + " " + y; /...
2019-09-29 13:31:53
100
原创 js的生命周期
1. 什么是生命周期？通俗地讲，就是一个变量的生老病死，也就是从哪到哪有效。从软件的角度来看，是指程序的创建和调用（开始、暂停、唤起、停止、卸载）的过程。2. 生命周期什么时候初始化？在变量声明时初始化！局部变量在函数执行完后销毁全局变量在页面关闭后销毁3. 如何判断是局部还是全局变量？！！方法内部定义变量的时候，如果没有加var，就是全局变量，否则为局部变量于果方法还没...
2019-09-29 13:30:53
5590
原创 ES6知识总结
ES6是什么ECMA和js的关系：ECMA是标准，Javascript是ECMA的实现。js是一种语言，但凡语言都有一套标准，而ECMA就是javascript的标准。ES6（ECMAscript6.0）在2015年正式发布，又称为ECMAscript2015。1. let、constES6之前，定义变量都是使用var，但var存在一些问题，比如：可以重复声明，仅支持函数作用域。所...
2019-09-28 21:41:07
178
原创 js函数调用的4种方式
1. 作为函数调用当函数没有被自身的对象调用时 this 的值就会变成全局对象 function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 202. 作为方法调用方法：当一个函数被保存为对象的一个属性时当一个方法被...
2019-09-28 15:10:51
678
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人