下载资源前端资源详情

23vue应用实例方法与配置案例.zip

大小:879.38KB

价格:19积分

下载量:0

评分:

5.0

上传者:chinayun_6401

更新日期:2025-09-22

vue应用实例方法与配置案例二

资源文件列表(大概)

文件名

大小

23vue应用实例方法与配置案例/

23vue应用实例方法与配置案例/05app.directive/

23vue应用实例方法与配置案例/05app.directive/vue 2.X/

23vue应用实例方法与配置案例/05app.directive/vue 2.X/index.html

2.12KB

23vue应用实例方法与配置案例/05app.directive/vue 2.X/js/

23vue应用实例方法与配置案例/05app.directive/vue 2.X/js/vue.js

424.68KB

23vue应用实例方法与配置案例/05app.directive/vue 3.X/

23vue应用实例方法与配置案例/05app.directive/vue 3.X/index.html

2.71KB

23vue应用实例方法与配置案例/05app.directive/vue 3.X/js/

23vue应用实例方法与配置案例/05app.directive/vue 3.X/js/vue.global.js

525.07KB

23vue应用实例方法与配置案例/06app.use/

23vue应用实例方法与配置案例/06app.use/index.html

1.15KB

23vue应用实例方法与配置案例/06app.use/js/

23vue应用实例方法与配置案例/06app.use/js/vue.global.js

525.07KB

23vue应用实例方法与配置案例/07app.mixin/

23vue应用实例方法与配置案例/07app.mixin/css/

23vue应用实例方法与配置案例/07app.mixin/css/element-plus.css

319.25KB

23vue应用实例方法与配置案例/07app.mixin/index.html

2.59KB

23vue应用实例方法与配置案例/07app.mixin/js/

23vue应用实例方法与配置案例/07app.mixin/js/element-plus.js

1.97MB

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>

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

vue应用实例方法与配置案例二

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

适用Redhat/CentOS 7的openssh9.8p1-RPM安装包，集成oracle安装所需askpass软件

适用Redhat/CentOS 6的openssh9.8p1-RPM安装包，集成oracle安装所需askpass软件

wordpress 6.6.1 中文版

spring-test