VUE常见知识疑点问题总结

1.vue.js @click和v-on:click有什么区别?

没有区别,@ 只是一个 v-on: 的缩写,为了书写方便。

1
2
3
4
5
6
7
8
9
10
11
Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
v-bind 缩写
 
<a rel="external nofollow"></a>
 
<a rel="external nofollow"></a>
v-on 缩写
 
<a></a>
 
<a></a>

2.v-on和v-bind的区别

v-bind指令用于设置HTML属性:v-bind:href  缩写为 :href

1
<a rel="external nofollow">aa</a>

v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click

1
<a>aa</a>

3.v-if和v-show对比:

  • v-if当条件为false的时候,压根不会有对应的元素在DOm中。
  • v-show当条件为false时,仅仅是将元素的dispaly属性设置为none而已。

开发中如何选择呢:

  • 当需要再显示与隐藏之间切片很频繁的时,使用v-show
  • 当只有一次切换时,使用v-if 

4.关于

 请教了下别人,听完解释,有个基本概念,但是对于应用实践,他告诉template是用来写界面的,也没毛病,继续懵逼着,还是自己摸索下。

template 标签在Vue实例绑定的元素内部是可以显示template标签中的内容,但是查看后台的dom结构不存在template标签。

如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上,但是查看后台dom结构存在template标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
     
    <div>我是template</div>
        <div>我是template</div>
     
</div>
 
 
<div id="div1">我是template</div>
    <div>我是template</div>
 
    let vm = new Vue({
        el: "#app",
    });

vue实例绑定的元素内部的template标签不支持v-show指令,即v-show=”false”对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <div>我是template</div>
        <div>我是template</div>
    <div>
     
        <div>我是template</div>
        <div>我是template</div>
    </div>
     
    <div>我是template</div>
        <div>我是template</div>
     
</div>
 
    let vm = new Vue({
        el: "#app",
    });

vue实例中的template属性

将实例中template属性值进行编译,并将编译后的dom替换掉vue实例绑定的元素,如果该vue实例绑定的元素中存在内容,这些内容会直接被覆盖。

  • 1)如果vue实例中有template属性,会将该属性值进行编译,将编译后的虚拟dom直接替换掉vue实例绑定的元素(即el绑定的那个元素);
  • 2)template属性中的dom结构只能有一个根元素,如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素;
  • 3)在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<div id="app"></div>
 
<div>{{msg}}<div>
    <div>111<div>
 
 
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            flag:true
        },
        template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容,并且在查看dom结构时没有template标签
    });
 
</div>
<p>上面的例子中html中的template标签可以变成自定的标签,如下。但是下面这种方式也可以将标签中的内容替换掉app元素,但是<strong>标签中的内容也会显示在页面上</strong>。所以此处利用template标签来定义vue实例中需要设置的template属性。</p>
<div class="jb51code"><pre class="brush:js;"><div>{{msg}}<div>
    <div>111<div>
</div>
<p class="maodian"><a name="_label4"></a></p>
<h2>5. 认识Vue 的 exportexport defaultimport</h2>
<p>在ES6中,exportexport default均可用于导出变量(含常量)、函数、类、文件、模块等,然后在其它文件或模块中通过import 变量(含常量)|函数|类|文件|模块名的方式,将其导入,以便能够对其进行使用。</p>
<p>一个模块就是一个独立的文件,该文件内部的内容,外部无法获取。如果希望外部能够读取模块内部的内容,比如某个变量,就必须使用export关键字导出该变量,然后在其它模块中通过import方式导入使用。</p>
<div class="jb51code"><pre class="brush:js;">//model1.js
export var author = "shouke"
export var addr = "sz"
// 等价写法
var author = "shouke"
var addr = "sz"
export { author, addr }</pre>
</div>
<div class="jb51code">
<pre class="brush:js;">//model2.js
import { author } from "./model1"
import { addr } from "./model1"</pre>
</div>
<p style="text-align:center"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-803ba19e98c6008965eb757f3892e6cf.png"></p>
<p>一个js文件是可以有多个 export</p>
<p>但是一个js文件中只能有一个export default</p>
<p>6.let const var的区别</p>
<p><strong> var是ES5提出的,let和const是ES6提出的</strong></p>
<p>ES5中作用域有:全局作用域、函数作用域。没有块作用域的概念。<br>ES6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。</p>
<ul>
<li>const声明的是常量,必须赋值</li>
<li>1)一旦声明必须赋值,不能使用null占位。</li>
<li>2)声明后不能再修改</li>
<li>3)如果声明的是复合类型数据,可以修改其属性</li>
<li>letvar声明的是变量,声明之后可以更改,声明时可以不赋值</li>
<li>var允许重复声明变量,后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量,会报错。</li>
<li>var声明的变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用,值为undefined。</li>
<li>let和const不存在变量提升。即它们所声明的变量一定要在声明后使用,否则报ReferenceError错。</li>
<li>var不存在块级作用域,不能跨函数访问。</li>
<li>let和const存在块级作用域,不能跨块访问,也不能跨函数访问。</li>
</ul>
<p class="maodian"><a name="_label5"></a></p>
<h2>7.Options API vs Composition API</h2>
<p> 字面上, 选项 API 与 组合 API,细品, 这反映了设计面向的改变:<br> 1. 选项,谁的选项,关键在“谁”。谁?组件。也是 Vue2.x 的设计基础。组件有什么,<br>     有状态,有改变状态的方法,有生命周期,还有组件和组件之间的关系。这种情况<br>     下,“数据”要接受一定的“规矩”,“什么时候能做什么事”,“什么时候有什么表现”;<br>      这个状态下,开发模式像是“被动接受”。</p>
<p>  2. 组合,什么组合,关键在“什么”。什么?数据。数据的组合。Vue3.x 设计重点变了,数<br>       据变绝对的C了,现在去组件里串门,不用“守规矩”了,只需要说“我在 onMounted 的时<br>        候要这样这样,你看着办”,真只能的以“数据”为中心,没人能管得了了,想去哪就去哪,<br>        自然就灵活了</p>
<p class="maodian"><a name="_label6"></a></p>
<h2>8.VUE3中watch和watchEffect的用法</h2>
<p> watch和watchEffect都是监听器,但在写法和使用上有所区别。</p>
<ul>
<li>watch可监听老旧值</li>
<li>watchEffect监听新值</li>
<li>watchEffect局限性,只能监听最新的变化,中间值不监听到</li>
</ul>
<p>watch和watchEffect监听器在同一个页面中都可以使用多次,对于分别监听多个变量的时候</p>
<p>1)watchEffect :</p>
<ul>
<li>立即执行,没有惰性。</li>
<li>不需要手动传入依赖</li>
<li>每次初始化时会执行一次回调函数来自动获取依赖</li>
<li>无法获取到原值,只能得到变化后的值</li>
</ul>
<div class="jb51code">
<pre class="brush:js;">watchEffect(()=>{
      console.log(name.value)
 })
 function change(){
      name.value = 'blue'
      // age.value=1
      // console.log(111)
}</pre>
</div>
<p> 2)watch</p>
<ul>
<li>具备一定的惰性。</li>
<li>参数可以拿到最新值和之前的值。</li>
<li>可以侦听多个数据的变化,用一个侦听器承载。</li>
<li>给 watch 第三个参数 添加 <code>{ immediate:true }</code> 可以立即执行,没有惰性。</li>
</ul>
<div class="jb51code">
<pre class="brush:js;">function changeDB(){
      // obj.age = 22
      // obj.xz.price = '22k'
      obj.name='redred'
  }
    // 监视reactive定义数据的某一个属性
    watch(()=> obj.name,(newVal,oldVal)=>{
      console.log("有新名字拉~~",newVal)
      console.log("原来的名字哦~",oldVal)
    })</pre>
</div>
<p class="maodian"><a name="_label7"></a></p>
<h2>9.VUE3中ref和reactive的区别</h2>
<p><strong>reactive 和 ref 都是用来定义响应式数据的 。</strong>reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型。</p>
<p style="text-align:center"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-61fb5c51aa06b23d6bebb45188fb882a.png"></p>
<p style="text-align:center"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-7740cfbe5064b1e2b33f16b66d006d01.png"></p>
<p>如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value</p>
<p>如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value</p>
<p>Vue在解析数据之前, 会自动判断这个数据是否是ref类型的, 如果是就自动添加.value, 如果不是就不自动添加.value</p>
<p class="maodian"><a name="_label8"></a></p>
<h2>10.defineProps、defineEmits、defineExpose  </h2>
<p><strong>defineProps</strong>获取组件传值</p>
<div class="jb51code">
<pre class="brush:js;"><h1>{{ msg }}</h1>
  <div>1111</div>
 
  defineProps()
     // 采用ts专有声明,有默认值
    interface Props {
        msg?: string
        labels?: string[]
    }
    const props = withDefaults(defineProps(), {
        msg: 'hello',
        labels: () => ['one', 'two']
    })
  defineProps({ // 非ts专有声明
    msg: String,
    num: {
      type:Number,
      default: ''
    }
  })
 
</pre>
</div>
<p><strong>defineEmits</strong>子组件向父组件事件传递</p>
<p>vue3.0中  在子组件中触发父组件中的函数的技巧目前有两个:<strong>defineEmits和</strong>useContext ,现在useContext 已经弃用。下面是<strong>defineEmits</strong>的示例<strong>:</strong></p>
<p style="text-align:center"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-14709a3b71f561199ca974f4f1474363.png"></p>
<p><strong>defineExpose</strong>组件暴露自己的属性</p>
<div class="jb51code">
<pre class="brush:js;"><div>子组件helloword.vue</div>
 
import { ref } from 'vue'
const count = ref(123456)
defineExpose({
  count
})
 
</pre>
</div>
<div class="jb51code">
<pre class="brush:js;"><div>父组件</div>
   
import { ref } from 'vue'
import helloword from './components/HelloWorld.vue'
const hello = ref(null)
const helloClick = () => {
  console.log(hello.value.count) // 123456
}
 
</pre>
</div>
<p>到此这篇关于VUE常见知识疑点问题总结的文章就介绍到这了,更多相关VUE常见知识疑点内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!</p>
<p></p></div>
<div class="lbd_bot clearfix">
                            <span id="art_bot" class="jbTestPos"></span>
                        </div>
<div class="tags clearfix">
                            <i class="icon-tag"></i><p></p>
<ul class="meta-tags">
<li class="tag item"><a href="http://common.jb51.net/tag/VUE/1.htm" target="_blank" title="搜索关于VUE的文章" rel="nofollow noopener">VUE</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/v%2Don/1.htm" target="_blank" title="搜索关于v-on的文章" rel="nofollow noopener">v-on</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/v%2Dbind/1.htm" target="_blank" title="搜索关于v-bind的文章" rel="nofollow noopener">v-bind</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/%40click/1.htm" target="_blank" title="搜索关于@click的文章" rel="nofollow noopener">@click</a></li>
<li class="tag item"><a href="http://common.jb51.net/tag/watch/1.htm" target="_blank" title="搜索关于watch的文章" rel="nofollow noopener">watch</a></li>
</ul>
</div>
<div class="lbd clearfix">
                            <span id="art_down" class="jbTestPos"></span>
                        </div>
<div id="shoucang"></div>
<div class="xgcomm clearfix">
<h2>相关文章</h2>
<ul>
<li class="lbd clearfix"><span id="art_xg" class="jbTestPos"></span></li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/javascript/300246j3o.htm" title="在vue框架下使用指令vue add element安装element报错问题" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-1a1b05c64693fbf380aa1344a7812747.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/javascript/300246j3o.htm" title="在vue框架下使用指令vue add element安装element报错问题" rel="noopener">在vue框架下使用指令vue add element安装element报错问题</a></p>
<div class="item-info">
<div class="js">这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教</div>
<p><span class="lbtn" style="float:right"> 2023-10-10 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/161498.htm" title="vue+egg+jwt实现登录验证的示例代码" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-4f55910a645b073bc4fc65dc10dc14bd.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/161498.htm" title="vue+egg+jwt实现登录验证的示例代码" rel="noopener">vue+egg+jwt实现登录验证的示例代码</a></p>
<div class="item-info">
<div class="js">这篇文章主要介绍了vue+egg+jwt实现登录验证的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧</div>
<p><span class="lbtn" style="float:right"> 2019-05-05 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/265211.htm" title="vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-0ea3c7666119d5615e582f823fb3fad6.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/265211.htm" title="vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析" rel="noopener">vue3使用element-plus中el-table组件报错关键字'emitsOptions'与&</a></p>
<div class="item-info">
<div class="js">这篇文章主要给大家介绍了关于vue3使用element-plus中el-table组件报错关键字'emitsOptions''insertBefore'的相关资料,文中将解决方法介绍的非常详细,需要的朋友可以参考下</div>
<p><span class="lbtn" style="float:right"> 2022-10-10 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/259100.htm" title="vue ui的安装步骤以及使用详解" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-4f96a78db829b1556ff16de21e013c7a.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/259100.htm" title="vue ui的安装步骤以及使用详解" rel="noopener">vue ui的安装步骤以及使用详解</a></p>
<div class="item-info">
<div class="js">最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下</div>
<p><span class="lbtn" style="float:right"> 2022-08-08 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/254467.htm" title="Vue3插槽Slot实现原理详解" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-8cc1031babc6aff2319f1c6af8544aa0.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/254467.htm" title="Vue3插槽Slot实现原理详解" rel="noopener">Vue3插槽Slot实现原理详解</a></p>
<div class="item-info">
<div class="js">这篇文章主要为大家介绍了Vue3插槽Slot实现原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪</div>
<p><span class="lbtn" style="float:right"> 2022-07-07 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/181512.htm" title="基于Element的组件改造的树形选择器(树形下拉框)" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-0c932a99bb7b6f23c937db507070cc7b.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/181512.htm" title="基于Element的组件改造的树形选择器(树形下拉框)" rel="noopener">基于Element的组件改造的树形选择器(树形下拉框)</a></p>
<div class="item-info">
<div class="js">这篇文章主要介绍了基于Element的组件改造的树形选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧</div>
<p><span class="lbtn" style="float:right"> 2020-02-02 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/127560.htm" title="Vuejs实现购物车功能" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-cca732bf65a93ed2ec0ac80c638460fe.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/127560.htm" title="Vuejs实现购物车功能" rel="noopener">Vuejs实现购物车功能</a></p>
<div class="item-info">
<div class="js">这篇文章主要为大家详细介绍了Vuejs实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下</div>
<p><span class="lbtn" style="float:right"> 2017-11-11 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/134955.htm" title="Vue-cli中为单独页面设置背景色的实现方法" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-2d9f31f2af7b675a3d153d2b7f1035a7.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/134955.htm" title="Vue-cli中为单独页面设置背景色的实现方法" rel="noopener">Vue-cli中为单独页面设置背景色的实现方法</a></p>
<div class="item-info">
<div class="js">下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧</div>
<p><span class="lbtn" style="float:right"> 2018-02-02 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/article/275441.htm" title="Vue.js状态管理之Pinia与Vuex详解" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-b452cee8ec5cd9e58ab98eba17281e59.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/article/275441.htm" title="Vue.js状态管理之Pinia与Vuex详解" rel="noopener">Vue.js状态管理之Pinia与Vuex详解</a></p>
<div class="item-info">
<div class="js">Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下</div>
<p><span class="lbtn" style="float:right"> 2023-02-02 </span>
</p></div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="https://www.2it.club/javascript/290676pl6.htm" title="vue中el-table实现穿梭框(数据可以上移下移)" class="img-wrap" target="_blank" rel="noopener"> <img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/02/frc-f4838ec7e2d4da28e0b57d4e852dadd4.png"></a><p></p>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" target="_blank" href="https://www.2it.club/javascript/290676pl6.htm" title="vue中el-table实现穿梭框(数据可以上移下移)" rel="noopener">vue中el-table实现穿梭框(数据可以上移下移)</a></p>
<div class="item-info">
<div class="js">本文主要介绍了vue中el-table实现穿梭框(数据可以上移下移),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧</div>
<p><span class="lbtn" style="float:right"> 2023-06-06 </span>
</p></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="lbd clearfix mt5">
                            <span id="art_down2" class="jbTestPos"></span>
                        </div>
<p>                        <a href=""></a></p>
<div id="comments">
<h2>最新评论</h2>
<div class="pd5">
<div id="SOHUCS"></div>
<p></p></div>
<p></p></div>
<p></p></div>
<p></p></div>
<div class="main-right">
<div id="sidebar-right">
<div class="r300 clearfix"><span id="side_up" class="jbTestPos"></span></div>
<div class="sidebox-recomm"></div>
<div class="r300 clearfix"><span id="zbafer" class="jbTestPos"></span></div>
<div class="sidebox bor-blue">
<div class="bor-default pb10">
<h4 class="blue">大家感兴趣的内容</h4>
<ul class="newsList newList-in">
<li>
<em class="no1">1</em><a href="https://www.2it.club/article/140370.htm" title="vue引用js文件的多种方式(推荐)" target="_blank" rel="noopener">vue引用js文件的多种方式(推荐)</a>
</li>
<li>
<em class="no2">2</em><a href="https://www.2it.club/article/183611.htm" title="vue跳转页面的几种方法(推荐)" target="_blank" rel="noopener">vue跳转页面的几种方法(推荐)</a>
</li>
<li>
<em class="no3">3</em><a href="https://www.2it.club/article/160401.htm" title="详解vue 路由跳转四种方式 (带参数)" target="_blank" rel="noopener">详解vue 路由跳转四种方式 (带参数)</a>
</li>
<li>
<em class="no4">4</em><a href="https://www.2it.club/article/151984.htm" title="vue项目刷新当前页面的三种方法" target="_blank" rel="noopener">vue项目刷新当前页面的三种方法</a>
</li>
<li>
<em class="no5">5</em><a href="https://www.2it.club/article/140581.htm" title="vue之父子组件间通信实例讲解(props、$ref、$emit)" target="_blank" rel="noopener">vue之父子组件间通信实例讲解(props、$ref、$em</a>
</li>
<li>
<em class="no6">6</em><a href="https://www.2it.club/article/143049.htm" title="Vue props用法详解(小结)" target="_blank" rel="noopener">Vue props用法详解(小结)</a>
</li>
<li>
<em class="no7">7</em><a href="https://www.2it.club/article/137438.htm" title="vue.js中created方法作用" target="_blank" rel="noopener">vue.js中created方法作用</a>
</li>
<li>
<em class="no8">8</em><a href="https://www.2it.club/article/146177.htm" title="element-ui中select组件绑定值改变,触发change事件方法" target="_blank" rel="noopener">element-ui中select组件绑定值改变,触发cha</a>
</li>
<li>
<em class="no9">9</em><a href="https://www.2it.club/article/151038.htm" title="Vue.js 中的 v-show 指令及用法详解" target="_blank" rel="noopener">Vue.js 中的 v-show 指令及用法详解</a>
</li>
<li>
<em class="no10">10</em><a href="https://www.2it.club/article/95802.htm" title="简单理解vue中Props属性" target="_blank" rel="noopener">简单理解vue中Props属性</a>
</li>
</ul>
</div></div>
<div class="r300 clearfix mt10"><span id="idctu" class="jbTestPos"></span></div>
<div class="sidebox bor-blue">
<div class="bor-default pb10">
<h4 class="blue">最近更新的内容</h4>
<ul class="newsListA">
<li><a href="https://www.2it.club/article/83432.htm" title="JavaScript的MVVM库Vue.js入门学习笔记" target="_blank" rel="noopener">JavaScript的MVVM库Vue.js入门学习笔记</a></li>
<li><a href="https://www.2it.club/article/180124.htm" title="Vue开发中遇到的跨域问题及解决方法" target="_blank" rel="noopener">Vue开发中遇到的跨域问题及解决方法</a></li>
<li><a href="https://www.2it.club/article/279479.htm" title="vue3中7种路由守卫的使用大全举例" target="_blank" rel="noopener">vue3中7种路由守卫的使用大全举例</a></li>
<li><a href="https://www.2it.club/article/261138.htm" title="vue+elemet实现表格手动合并行列" target="_blank" rel="noopener">vue+elemet实现表格手动合并行列</a></li>
<li><a href="https://www.2it.club/article/173792.htm" title="vue视频播放暂停代码" target="_blank" rel="noopener">vue视频播放暂停代码</a></li>
<li><a href="https://www.2it.club/article/182196.htm" title="Node.js+Vue脚手架环境搭建的方法步骤" target="_blank" rel="noopener">Node.js+Vue脚手架环境搭建的方法步骤</a></li>
<li><a href="https://www.2it.club/article/259280.htm" title="手把手带你安装vue-cli并创建第一个vue-cli应用程序" target="_blank" rel="noopener">手把手带你安装vue-cli并创建第一个vue-cli应用程序</a></li>
<li><a href="https://www.2it.club/article/268488.htm" title="vue 指令与过滤器案例代码" target="_blank" rel="noopener">vue 指令与过滤器案例代码</a></li>
<li><a href="https://www.2it.club/article/116446.htm" title="详解Vue组件之间的数据通信实例" target="_blank" rel="noopener">详解Vue组件之间的数据通信实例</a></li>
<li><a href="https://www.2it.club/article/200060.htm" title="详解Vue的mixin策略" target="_blank" rel="noopener">详解Vue的mixin策略</a></li>
</ul>
</div></div>
<div class="r300 clearfix mt10">
                            <span id="idctu1" class="jbTestPos"></span>
                        </div>
<div class="sidebox bor-blue">
<div class="bor-default pb10">
<h4 class="blue">常用在线小工具</h4>
<ul class="newsListA"><span id="bctools" class="jbTestPos"></span></ul>
</div></div>
<div class="r300 clearfix mt10"><span id="idctu2" class="jbTestPos"></span></div>
<div class="mt10 rFixedBox">
<div class="r300 clearfix"><span id="r2gg" class="jbTestPos"></span></div>
<div class="r300 clearfix mt10">
                                <span id="rbbd" class="jbTestPos"></span>
                            </div>
<p></p></div>
<p></p></div>
<p></p></div>
<p></p></pre></div>
<p></p></div>
<div id="right-share">
<div class="right-share jb-share" id="jb-share">
                <a class="rshare-weixin" title="">微信</a><br>
                <a rel="nofollow noopener" class="rshare-qzone" target="_blank" href="http://tougao.jb51.net/" title="投稿">投稿</a><br>
                <a rel="nofollow noopener" class="rshare-sqq" target="_blank" href="https://task.jb51.net/" title="脚本任务">脚本任务</a><br>
                <a rel="nofollow noopener" class="rshare-tsina" target="_blank" href="http://tools.jb51.net/" title="在线工具">在线工具</a>
            </div>
<p>            <a class="rshare-top"></a></p>
<div id="weixin-code" class="hide">
<div class="popup_weixin_head">
<p>关注微信公众号</p>
<p></p></div>
<p></p></div>
<p></p></div>
<div class="AutoCatelog">
<div class="AutoCatelogLlist" id="CatelogList"></div>
<p></p></div>
<p></p></div>
<div id="footer">
<div class="footer-bottom">
<p>
                <a rel="nofollow noopener" href="https://www.2it.club/about.htm" target="_blank">关于我们</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/support.htm" target="_blank">广告合作</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/linkus.htm" target="_blank">联系我们</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/sm.htm" target="_blank">免责声明</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/sitemap.htm" target="_blank">网站地图</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/javascript/tencent://message/?uin=461478385&Site=https://www.2it.club" target="_blank">投诉建议</a> -<br>
                <a rel="nofollow noopener" href="https://www.2it.club/up.htm" target="_blank">在线投稿</a>
            </p>
<p>©CopyRight 2006-2024 JB51.Net Inc All Rights Reserved. IT俱乐部 版权所有</p>
<p></p></div>
<p></p></div>
<p>        var ourl = "104.116.116.112.115.58.47.47.98.108.111.103.46.99.115.100.110.46.110.101.116.47.104.101.110.105.54.53.54.48.47.97.114.116.105.99.108.101.47.100.101.116.97.105.108.115.47.49.50.50.57.53.54.51.57.52.";</p>
<p>    </p>
<p>if ('undefined' == typeof(window.Viewer)) {<br>
        document.write(unescape("%3Cscr"+"ipt src='/skin/js/viewer.min.js' type='text/javascript'%3E%3C/scr"+"ipt%3E"));<br>
    }<br>
var viewer = new Viewer(getid('content'));</p>
<div id="tongji">
</div>
<p>    $(function(){$.get("//www.2it.club/pl.asp?id=316134");})<br>
        {<br>
            "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",<br>
            "@id": "https://www.2it.club/javascript/316134d1b.htm",<br>
            "appid": "1549322409310619",<br>
            "title": "VUE常见知识疑点问题总结",<br>
            "description": "这篇文章主要介绍了VUE常见知识疑点问题总结,详细介绍了vue.js @click和v-on:click有什么区别,v-on和v-bind的区别,通过本文可以认识Vue的export、export default、import的详细介绍,感兴趣的朋友一起看看吧",<br>
            "pubDate": "2024-02-22T11:56:03",<br>
            "upDate": "2024-02-22T11:56:02"<br>
        }</p>
</div>
本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/9435.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部