想要成为码农-优快云博客

原创 Vue中的VueComponent构造函数

关于VueComponent：1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponen

2022-01-10 21:10:10 305 3

原创 Vue非单组件中的几个注意事项

几个注意点：1.关于组件名:一个单词组成：第一种写法(首字母小写)：school第二种写法(首字母大写)：School多个单词组成：第一种写法(kebab-case命名)：my-school第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)备注：(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。(2).可以使用name配置项指定组件在开发者工具中呈现的名字。 2.关于组件标签: 第一种写法：<school&

2022-01-10 20:18:20 180

原创 Vue中如何使用组件

Vue中使用组件的三大步骤：一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签) 一、如何定义一个组件？使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下： 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据

2022-01-09 22:12:19 1358

原创 Vue自定义指令总结

自定义指令总结：一、定义语法：(1).局部指令：new Vue({ new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}}) })(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 二、配置对象中常用的3个回调： (1).bind：指令与元素成功绑定时调用。

2022-01-09 14:33:35 1378

原创 Vue中的v-html内置指令

v-html指令：1.作用：向指定节点中渲染包含html结构的内容。2.与插值语法的区别：(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意：v-html有安全性问题！！！！(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！...

2022-01-03 11:22:20 506

原创 Vue中的内置指令(一)

Vue中的内置指令1、v-bind:单向绑定解析表达式，可简写为:xxx2、v-model:双向数据绑定3、v-for:遍历数组、对象、字符串4、v-on:绑定事件监听，可简写为@5、v-if:条件渲染(动态控制节点是否存在)6、v-else:条件渲染(动态控制节点是否村存在)7、v-show:条件渲染(动态控制节点是否展示)7、v-text:向其所在节点中渲染文本内容...

2022-01-02 22:27:44 480

原创 Vue是如何收集表单数据的?

收集表单数据：若：，则v-model收集的是value值，用户输入的就是value值。若：，则v-model收集的是value值，且要给标签配置value值。若：1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）2.配置input的value属性:(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2)v-model的初始值是数组，那么收集的的就是value组成的数组备注：v-model的三个修

2022-01-02 21:39:33 152

原创 Vue中数据监测的原理

Vue监视数据的原理：1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propert

2022-01-02 20:55:09 141

原创使用watch和computed两种方式实现列表过滤

使用watch方式new Vue({ el: "#root", data() { return { keyWord: "", persons: [ { id: "001", name: "马冬梅", age: 19, sex: '女' }, { id:

2022-01-02 15:20:16 413

原创面试题：react、vue中的key有什么作用?(key的内部原理)

1、虚拟DOM中key的作用：key时虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【】新的数据生成【新的虚拟DOM】随后Vue进行【新虚拟的DOM】与【旧虚拟的DOM】的对比比较：2、对比规则：1)：旧虚拟DOM中找到了与新虚拟DOM相同的key：- 若虚拟DOM中内容没变，直接使用之前真是的DOM- 若虚拟DOM中内容变了，则生成新的真是DOM，随后替换掉页面中之前的真是DOM2)：就虚拟DOM中未找到与新虚拟DOM相同的key- 创建新的真实DOM，随后渲染到页面3、用

2022-01-02 14:44:03 353

原创 Vue中可以列表渲染哪些？

v-for指令1、用于展示列表数据2、语法：v-for="(item, index) in xxx" :key=“index”3、可遍历：数组、对象、字符串、指定次数<div id="root">  <h2>人员列表</h2> <ul> <li v-for="(p,index) in persons" :key="index">

2021-12-29 22:18:35 247

原创 Vue中的条件渲染

条件渲染：1、v-if写法：- v-if=“表达式”- v-else-if=“表达式”- v-else=“表达式”适用于：切换频率比较低的场景特点：不展示DOM元素直接被移除特点：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被打乱2、v-show写法：v-show=“表达式”适用于：切换频率较高的场景特点：不展示的DOM元素未被溢出，仅仅是使用样式被隐藏掉 **注意：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到**

2021-12-29 21:49:05 275

原创 Vue中绑定class和style样式

绑定样式：1、class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串写法适用于：类名不确定，要动态获取对象写法适用于：要绑定多个样式，个数不确定，名字也不确定数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定使不使用2、style样式如:style="{fontSize:xxx}" 其中xxx是动态值如:style="[a,b]"其中a、b是样式对象...

2021-12-29 21:17:36 218

原创理解Vue中computed和watch的区别

conputed和watch之间的区别：1、conputed能完成的功能，watch都可以完成。2、watch能完成的功能，conputed不一定能完成，例如：watch可以寄进行异步操作两个重要原则：1、所有被Vue管理的函数，最好携程普通函数，这样this的指向才是vm 或组件实例对象2、所有不被Vue管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数)，最好携程箭头函数这样this的指向才是vm 或组件实例对象 <div id="root">

2021-12-29 20:38:07 597

原创 Vue中监视属性的简写形式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-12-28 15:37:59 147

原创学习Vue中的深度监视(附实例)

深度监视：1、Vue中的watch默认不检测对象内部值的改变(一层)2、配置deep:true可以检测对象内部值改变(多层)备注：1、Vue滋生可以检测对象内部值的改变，但是Vue提供的watch默认不可以2、使用watch时根据数据的集体结构，决定是否采用深度监视<div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气&lt

2021-12-28 14:57:11 631

原创学习Vue中的监视属性

监视属性watch：1、当被监视的属性变化是，回调函数自动调用，进行相关操作2、监视的属性必须存在，才能进行监视！！3、坚实的两种写法：- new vue时传入watch配置- 通过vm.$watch监视 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div>

2021-12-28 14:41:03 128

原创理解Vue中的计算属性

计算属性:1、定义：要用的属性不存在，要脱过已有属性计算得来2、原理：底层借助了Object.defineproperty方法提供的getter和setter3、get函数什么时候执行？- 初次读取时会执行一次- 当依赖的数据发生改变时会被再次调用4、优势：以methods实现相比，内部有缓存机制(复用)，效率更高，调试方便5、备注：- 计算属性最终会在vm上，直接读取使用即可- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时一栏的数据发生改变 <div

2021-12-28 13:24:40 231

原创 Vue中的键盘事件

1、Vue中常用的按键别名:回车:enter删除:delete(捕获"删除"和"退格键")退出:esc空格:space换行:tab上:up下:down左:left右:right2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)3、系统修饰键(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发(2).配合keydown使用:正常触发事件4

2021-12-28 12:17:55 341

原创 Vue中的事件修饰符

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-12-28 11:31:33 114

原创 Vue中事件的基本使用

事件的基本使用:1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名2、事件的回调需要配置在methods对象中，最终会在vm上3、methods中配置的函数，不要使用箭头函数！否则this就不是vm，而是window4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象5、@click=“demo” 和 @click=“demo($event”) 效果一致，但后者可以传参 <div id="root"> &l

2021-12-28 10:59:51 259

原创理解Vue中的数据代理

1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)2、Vue中数据代理的好处：更加方便的操作data中的数据3、基本原理：通过Obecjt.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性，都指定一个getter/setter在getter/setter内部去操作(读/写)data中对应的属性...

2021-12-26 22:53:08 139

原创理解Vue中的MVVM

MVVM模型1、M：模型(Model)：data中的数据2、V：视图(View)：模板代码3、VM:视图模型(ViewModel)：Vue实例观察发现：1、data中所有的属性，最后都出现在了vm身上2、vm身上的所有属性，及vue原型上的所有属性，在Vue模板中都可以直接使用<div id="root"> <h1>学校名称:{{name}}</h1> <h1>学校名称:{{address}}</h1>

2021-12-26 21:38:07 174

原创 Vue中data与el的两种写法

data与el的两种写法1、el有2种写法- .new Vue时候配置el属性- .先创建Vue实例，随后再通过vm.$mount("#root")指定el的值2、data有2种写法- 对象式- 函数式如何选择：选择使用函数式写法，在用到组件时，data必须使用函数式，否则会报错3、一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了 <div id="root"> <h1>你好, {{name}

2021-12-26 21:17:43 178

原创 Vue中的两种数据绑定方式

Vue中有2中数据绑定的方式：1、单向绑定(v-bind)：数据只能从data流向页面2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data备注：1、双向绑定一般都应用在表单类元素上(如：input、select等)2、v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值 <div id="root">  <!-- 单向数据绑定

2021-12-26 20:45:38 763 2

原创 Vue中的模板语法学习

Vue模板语法有2大类：1、插值语法：功能：用于解析标签体内容写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性2、指令语法：功能:用于解析标签(包括：标签属性、标签体内容、绑定事件…)举例:v-bind:href=“xxx” 或简写为:href=“xxx”,xxx同样要写js表达式备注：Vue中有很多的指令，且形式都是:v-xxx,此处我们只是拿v-bind举个例子<div id="root"> <h1>插值语法<

2021-12-26 20:21:57 94

原创初识Vue，HelloWord案例

初识Vue：1、想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象2、root容器里的代码依然复合html规范，只不过混入了一些特殊的Vue语法3、root容器里的代码被称为【Vue模板】4、Vue实例和容器是一一对应的5、正是开发中只有一个Vue实例，并且会配合着组件一起使用6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新注意区分：js表达式和 js代码(语句)1

2021-12-26 19:56:42 319

原创 DOM拖拽事件源码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-12-26 14:14:40 98 1

原创 DOM关于事件的传播

事件的传播- 关于事件的传播网景公司和微软公司有不同的理解- 微软公司认为事件应该是由内向外传播，也就是当事件触发时应该先触发当前元素上的事件，然后再向当前元素的祖先元素传播也就是说事件应该在冒泡阶段执行- 网景公司认为事件应该是由外向内创博的，当事件触发时，应该先触发当前元素最外层的祖先元素事件，然后再向内传播给后代元素- W3C综合了两个公司的方案，将事件的传播分成了三个阶段1、事件的捕获阶段- 在事件的捕获阶段时从最外层的祖先元素，向目标元素进行实践的捕获，但是默认此时不会触发事件

2021-12-26 13:38:00 328

原创通过DOM来说去元素的内联样式

通过js修改元素的样式：语法：元素.style.样式名 = 样式值注意：如果CSS样式中含有减号“-” 这种名称在JS中是不合法的比如background-color 需要将这种样式名修改为驼峰命名法去掉减号，然后将-后的字母大写我们通过style属性设置的样式都是内联样式而内联样式

2021-12-25 22:50:20 335 2

原创通过DOM来获取元素的样式

获取元素当前显示的样式语法：元素.currentStyle.样式名它可以用来读取当前元素的样式如果当前元素没有设置改样式，则获取它的默认值在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过对象.样式名来读取样式

2021-12-25 22:49:36 548

原创使用DOM写出简单的复仇者联盟轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

2021-12-24 20:56:44 113

原创 JavaScript中DOM的那些事儿

DOM简介1、什么是DOMDOM，全程Document Object Model文档对象模型JS中通过DOM来对HTML文档进行操作。了解了DOM就可以随心所欲的操作WEB页面文档：表示的是整个HTML网页文档对象：表示将网页中的每一个部分都转换为一个对象模型：表示对象之间的关系，这样可以方便获取对象2、节点节点Node，是构成我们网页的最基本的组成部分，网页中每一个部分都可以称为是一个节点。比如：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节

2021-12-24 11:04:26 125

原创 JavaScript中的arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数：1、函数的上下文对象this2、封装实参的对象arguments- arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度- 在调用函数时，我们所传递的实参都在arguments中保存- arguments,length可以用来获取实参的长度- 即使不定义形参，也可以通过argumengts来使用实参，只不过比较麻烦arguments[0]表示第一个实参arguments[1]表示第二个实参…- 函数对象中还有一个

2021-12-08 18:58:21 500

原创 JavaScript中call()和apply()函数方法

call()和apply()- 这两个方式都是函数对象的方法，需要通过函数对象来调用- 当对函数调用call()和apply()都会调用函数执行- 在调用call()和aplly()可以将一个对象指定为第一个参数此时这个对象将会成为函数执行时的this- call()方法可以将实参在对象之后依次传递- apply()方法需要将实参封装到一个数组中统一传递 - this的情况： 1、以函数形式调用时，this永远倒是window 2、

2021-12-08 18:43:05 292

原创 JavaScript数组的3个属性和14个方法（内含举例）

JavaScript数组的3个属性和14个方法属性constructor：返回对创建此对象的数组函数的引用。length：设置或返回数组中元素的数目。prototype：使您有能力向对象添加属性和方法。方法concat()：连接两个或更多的数组，并返回结果。join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()：删除并返回数组的最后一个元素push()：向数组的末尾添加一个或更多元素，并返回新的长度。reverse()：颠倒数组中元素的顺序。shift()：删除并返回数组的第

2021-12-06 19:47:13 1347 19

空空如也

空空如也