ZIPvue应用实例方法与配置案例二 879.38KB

chinayun_6401

资源文件列表:

23vue应用实例方法与配置案例.zip 大约有21个文件
  1. 23vue应用实例方法与配置案例/
  2. 23vue应用实例方法与配置案例/05app.directive/
  3. 23vue应用实例方法与配置案例/05app.directive/vue 2.X/
  4. 23vue应用实例方法与配置案例/05app.directive/vue 2.X/index.html 2.12KB
  5. 23vue应用实例方法与配置案例/05app.directive/vue 2.X/js/
  6. 23vue应用实例方法与配置案例/05app.directive/vue 2.X/js/vue.js 424.68KB
  7. 23vue应用实例方法与配置案例/05app.directive/vue 3.X/
  8. 23vue应用实例方法与配置案例/05app.directive/vue 3.X/index.html 2.71KB
  9. 23vue应用实例方法与配置案例/05app.directive/vue 3.X/js/
  10. 23vue应用实例方法与配置案例/05app.directive/vue 3.X/js/vue.global.js 525.07KB
  11. 23vue应用实例方法与配置案例/06app.use/
  12. 23vue应用实例方法与配置案例/06app.use/index.html 1.15KB
  13. 23vue应用实例方法与配置案例/06app.use/js/
  14. 23vue应用实例方法与配置案例/06app.use/js/vue.global.js 525.07KB
  15. 23vue应用实例方法与配置案例/07app.mixin/
  16. 23vue应用实例方法与配置案例/07app.mixin/css/
  17. 23vue应用实例方法与配置案例/07app.mixin/css/element-plus.css 319.25KB
  18. 23vue应用实例方法与配置案例/07app.mixin/index.html 2.59KB
  19. 23vue应用实例方法与配置案例/07app.mixin/js/
  20. 23vue应用实例方法与配置案例/07app.mixin/js/element-plus.js 1.97MB
  21. 23vue应用实例方法与配置案例/07app.mixin/js/vue.global.js 525.07KB

资源介绍:

本篇资源围绕 Vue 应用实例的关键方法与配置案例展开了讲述，具体有 createApp() 、 createSSRApp() 、 app.mount() 、 app.unmount() 、 app.component() 、 app.directive() 、 app.use() 、 app.mixin() 、 app.provide() 、 app.runWithContext() 、 app.version 、 app.config 、 app.config.errorHandler 、 app.config.warnHandler 、 app.config.performance 、 app.config.compilerOptions 、 app.config.globalProperties 、 app.config.optionMergeStrategies 。每一个案例皆为作者自行编写创作，借由自身经验使初学者能够迅速把握其中的知识点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>app.directive</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p>段落</p> <p v-highlight="'yellow'" v-if="isShow">这是一段需要突出显示的文字</p> <button @click="isShow=!isShow">v-if显示隐藏</button> <input type="text" v-focus v-show="flag"/> <button @click="flag=!flag">v-show显示隐藏</button> </div> </body> <script> const {createApp}=Vue; const rootComponent={ data(){ return{ isShow:true, flag:true } } } // 定义一个突出显示文字指令（对象形式） const highLight = { // 在绑定元素的attribute前，或事件监听器应用前调用 created(el, binding, vnode) { console.log('——————created——————'); }, // 在元素被插入到 DOM 前调用 beforeMount(el, binding, vnode) { console.log('——————beforeMount——————'); }, // 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用 mounted(el, binding, vnode) { // console.log(el,binding,vnode); console.log('——————mounted——————'); el.style.backgroundColor=binding.value; }, // 绑定元素的父组件更新前调用 beforeUpdate(el, binding, vnode, prevVnode) { console.log('——————beforeUpdate——————'); }, // 在绑定元素的父组件及他自己的所有子节点都更新后调用 updated(el, binding, vnode, prevVnode) { console.log('——————updated——————'); }, // 绑定元素的父组件卸载前调用 beforeUnmount(el, binding, vnode) { console.log('——————beforeUnmount——————'); }, // 绑定元素的父组件卸载后调用 unmounted(el, binding, vnode) { console.log('——————unmounted——————'); } } // 定义一个自动获取焦点指令（函数形式） const focusFun=(el,binding,vnode)=>{ // console.log(el,binding,vnode); el.focus(); } const app=createApp(rootComponent); // 注册（指令对象形式） app.directive('highlight',highLight); // 注册（指令函数形式) app.directive('focus',focusFun); app.mount('#app'); </script> </html>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP适用Redhat/CentOS 7的openssh9.8p1-RPM安装包，集成oracle安装所需askpass软件12.06MB8月前
    ZIP适用Redhat/CentOS 6的openssh9.8p1-RPM安装包，集成oracle安装所需askpass软件11.74MB8月前
    ZIPwordpress 6.6.1 中文版27.61MB8月前
    ZIPspring-test277.18KB8月前
    ZIPHtmlx javasctip Libs 2.0.1 htmlx练习代码51.54KB8月前
    ZIPcontent_1723073528854.zip4.84MB8月前
    ZIPmongodb源码.zip212.62KB8月前
    ZIPKeil的注册工具keygen25.48KB8月前