- 博客(39)
- 收藏
- 关注
RSS订阅原创 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中
nextTick和$nextTick区别1.nextTick(callback)：当数据发生变化，更新后执行回调。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。2.$nextTick(callback)：当dom发生变化，更新后执行的回调。将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。3.这两个方法没有太大的不同。区别在于：nextTick(callback) 是全局的方法；而 $nextTick(call
2022-06-28 20:48:56
580
2
原创 数据代理(响应式原理的一部分)
Object.defineProperty的对象以及对象劫持有以下优势：1.无需显式调用，如Vue2中Object.defineProperty的对象以及对象劫持+发布订阅模式，只要数据发生变化直接通知变化，并驱动视图更新。2.可在set函数中精确得知数据变化并驱动试图更新...
2022-06-22 17:30:15
197
原创 MVVM模型的理解
MVVM是 Model-View-ViewModel的缩写，即模型-视图-视图模型。MVVM 是一种设计思想。模型（Model）： 数据保存—存放着各种数据，有的是固定写死的，大多数是从后端返回的数据视图 （View）：用户界面，也就是DOM视图模型（View-Model）:连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知
2022-06-22 17:28:49
659
原创 Data为什么必须是函数1
1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就...
2022-06-22 17:24:32
99
1
原创 数组的响应方式
1我们改变DOM绑定的数据时，DOM会动态的改变值。数组也是一样的。但是对于动态变化数据，有要求，不是任何情况改变数据都会变化。 2而数组的方法，例如push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法修改数组的数据，DOM元素会随之修改。 3. push()：在最后添加元素 pop()：删除最后一个元素 ...
2022-05-26 11:51:45
142
原创 v-model结合select使用
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- v-model结合select可以单选也可以多选。 --> <!-- select单选 --> <select na
2022-05-26 11:50:22
319
原创 v-model结合radio使用
radio单选框的name属性是互斥的，如果使用v-model，可以不使用name就可以互斥。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <label for="male">男</l.
2022-05-26 11:49:00
1634
原创 v-model结合checkbox类型使用
1. checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。 2.checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。代码如下<!DOCTYPE html><html> <head> <...
2022-05-26 11:47:22
1269
原创 v-model的修饰符
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据<br> <input type="text" v-
2022-05-26 11:46:07
211
原创 v-model的使用原理
v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。代码如下<!DOCTYPE html
2022-05-26 11:45:06
130
原创 v-model的基本使用
v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app
2022-05-26 11:43:59
127
原创 v-for循环
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for='item in names'>{{item}}</li> <li v-for=
2022-05-26 11:42:20
94
原创 v-for循环key原理
数据-虚拟dom-真实dom 改变数据 新的数据-新的虚拟dom-新的真实dom如果只是单纯的渲染数据完全可以用index作为key 因为他没有改变数据的结构代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app">...
2022-05-26 11:41:19
176
原创 v-for使用key
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for='item in letters'>{{item}}</li> <button
2022-05-26 11:39:14
170
原创 v-show
1.反复开关一个东西用v-show因为他几乎不影响性能<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button type="button" v-show="isshow">kkkk</button&g
2022-05-24 19:34:36
123
原创 v-ifdemo
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Docu
2022-05-24 19:32:56
110
原创 v-if用于条件判断，判断Dom元素是否显示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div v-if="age<18">小于18岁未成年</div> <div v-else-if='age<60'>大于18岁.
2022-05-24 19:30:43
414
原创 失去登录焦点是使用enter
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on
2022-05-24 19:29:47
104
原创 v-on的按键修饰符
代码如下<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input @keyup.enter='submit' v-model='value'/> <input type="text" placeholder="按下回车提示输入" @
2022-05-24 19:28:33
93
原创 v-on的事件修饰词
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div @clisk='btn'> <button type="button"@click.stop='btn2'>阻止冒泡</
2022-05-24 19:27:35
75
原创 v-on的参数传递
1.如需要传参 在页面中传的是实参 在methods中写的是形参.2.如果在页面中没有写实参但是留有括号 在在methods中写了形参 会打印undefined3.如果在页面中没有写实参也没有留有括号 在在methods中写了形参 会打印event4.如果你想同时传事件和参数 在页面中那就要第一参数写$event,第二个是参数5.如果你只传事件 那么在页面中可以完全不写括<!DOCTYPE html><html> <head> <meta...
2022-05-24 19:26:14
134
原创 v-on的基本使用方法
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body><div id="app"> <h2>{{count}}</h2> <button type="button"@click='add'>+</button>
2022-05-24 19:23:39
210
原创 计算属性和methods的对比
1.计算属性是一个属性 必须要有返回值 methods不一定 2.计算属性在页面渲染时 不需要加括号 methods必须要加 3.计算属性有缓存 methods没有缓存 从性能上来讲 计算属性更具有优势 */代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...
2022-05-23 20:11:10
638
原创 计算属性的setter和getter练习
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2>{{firstName}}-{{lastName}}</h2> <h2>{{fullName}}</h2>
2022-05-23 20:07:35
115
原创 计算属性的复杂使用
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2>总价:{{totalPrcie}}</h2> </div> <script src="../vue.js"&g
2022-05-23 20:06:22
87
原创 v-cloak的语法
代码如下<body> <div id="app" v-cloak> <h2>{{msg}}</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: "#app", data() { return { msg: "张三" } }
2022-05-23 20:05:04
72
原创 计算属性的基本使用
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2>{{firstName+''+lastName}}</h2> <h2>{{getFullName()}}</h.
2022-05-23 20:03:52
126
原创 v-text的语法
代码如下<body> <div id="app"> <h2 v-text="message">你也好</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", d
2022-05-19 15:23:12
75
原创 v-html的语法
代码如下<body> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app
2022-05-19 15:22:03
204
原创 v-once的语法
代码如下<body> <div id="app"> <h2 v-once>{{msg}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app",
2022-05-19 15:20:51
72
原创 Mustache语法
代码如下<body> <div id="app"> <h2>{{firstName+lastName}}</h2> <h2>{{firstName +'-'+lastName}}</h2> <h2>{{firstName}}{{lastName}}</h2> <h2>{{count*3}}</h2> </div>
2022-05-19 15:19:32
199
原创 v-model 指令
代码如下<body> <div id="app"> <h2>{{msg}}</h2> <!-- v-model是双向绑定 --> <input type="text" v-model="msg"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></
2022-05-19 15:17:52
82
原创 v-on的指令
代码如下<body> <div id="app"> <h1>{{name}}</h1> <!-- v-on是监听 监听事件的变化 --> <button type="button" v-on:click='add'>增加</button> <button type="button" @click='ksk'>减少</button> </div> <sc
2022-05-19 15:15:49
143
原创 v-for的指令
代码如下<body> <!-- v-for for in--> <div id="app"> <ul> <!-- <li v-for="item in county">{{item}}</li> --> <li v-for="item of county">{{item}}</li> <
2022-05-19 15:13:05
163
原创 条件与循环v-if
v-if 让一个元素彻底消代码如下<body> <!-- v-if 让一个元素彻底消失--> <div id="app"> <p v-if="seen">我是web2208示范班学员</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <sc.
2022-05-19 15:11:16
162
原创 vue的常用指令v-bind
代码如下<body> <div id="app"> <!-- v-bind是vue中的一个指令 主要用于绑定一个属性 他是语法糖是v-bind:=>: --> <!-- <span v-bind:title="msg"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> --> <span :title="msg"><!-- 语法糖 --> 鼠标悬
2022-05-19 14:35:05
249
原创 认识vue
<div id="app"> <h2>{{msg}}</h2> <h3>{{name}}</h3> <h3>{{age.myage}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app =.
2022-05-19 14:31:18
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人