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 的 export 、 export default 、 import </h2> <p>在ES6中, export 与 export 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> let 和 var 声明的是变量,声明之后可以更改,声明时可以不赋值</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> <div id= "code" ><img decoding= "async" src= "https://www.2it.club/wp-content/uploads/2024/02/frc-9e0af7cdeba34ecfcaec11de1b448116.jpg" ></div> <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/javascript/tencent://message/?uin=461478385&Site=https://www.2it.club" target= "_blank" >投诉建议</a> -<br> </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> "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> |