VUE
文章平均质量分 56
云远12189
这个作者很懒,什么都没留下…
展开
-
Vuex使用之Vue3
创建文件:src/store/index.js。修改main.js文件。原创 2024-02-28 01:53:05 · 224 阅读 · 0 评论 -
Vue动态组件切换is
/因为切换组件有性能开销问题,所以使用shallowRef或markRaw。原创 2024-02-28 01:19:40 · 273 阅读 · 0 评论 -
Vue组合式函数之方法复用
【代码】Vue组合式函数之方法复用。原创 2024-02-28 00:51:57 · 479 阅读 · 0 评论 -
Vue插件之Plugins
通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。向 app.config.globalProperties 中添加一些全局实例属性或方法。插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。一个可能上述三种都包含了的功能库 (例如 vue-router)。通过 app.provide() 使一个资源可被注入进整个应用。App.vue(对插件使用的组件)原创 2024-02-28 00:40:37 · 324 阅读 · 0 评论 -
Vue自定义指令directives
例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。prevNode:代表之前的渲染中指令所绑定元素的 VNode。//命名方法使得DOM元素中可以用v-focus来显示。//命名方法使得DOM元素中可以用v-focus来显示。// 在绑定元素的 attribute 前。// 及他自己的所有子节点都挂载完成后调用。// 绑定元素的父组件更新前调用。// 绑定元素的父组件卸载前调用。// 绑定元素的父组件卸载后调用。原创 2024-02-28 00:10:34 · 950 阅读 · 0 评论 -
Vue异步组件之defineAsyncComponent
【代码】Vue异步组件之defineAsyncComponent。原创 2024-02-27 23:12:30 · 257 阅读 · 0 评论 -
Vue依赖注入之Provide/Inject
/使用inject接收父组件provide的住入值,其注入值为一个对象。//使用inject接收父组件provide的住入值,其注入值为一个对象。//let 变量名 = inject(父组件的provide注入值);//let 变量名 = inject(父组件的provide注入值);//provide("注入名", {以对象形式输出多个值});//provide("注入名", {以对象形式输出多个值});//provide("注入名", 值);//provide("注入名", 值);原创 2024-02-27 22:29:24 · 916 阅读 · 0 评论 -
Vue插槽之slot
'我是父组件定义的message'子组件classtest2.vue。子组件classtest.vue。原创 2024-02-27 21:21:46 · 494 阅读 · 0 评论 -
Vue组件之属性及监听器穿透attrs
/ 透传 attribute 被暴露为 ctx.attrs。中使用 useAttrs() API。"这里的字体大小是外部传递的""按钮被点击,我被修改了""点击按钮我会被修改"原创 2024-02-27 19:16:37 · 541 阅读 · 0 评论 -
Vue组件之双向绑定v-model
/modifiers的值为{capitalize:title: true}//接收父组件传过来的v-model:title的值,并且设置默认值为1。//接收父组件传过来的v-model:name的值,并且设置为必填。//接收父组件传过来的v-model:obj的值,其为一个对象。//这里没有传值,是因为其子组件设置了默认值为1。//这里没有传值,是因为其子组件设置了默认值为1。//第二个参数为父组件v-model的修饰符。//这个没有在父组件传递,但是不会报错。//第一个参数为双向绑定的值。原创 2024-02-27 03:10:56 · 535 阅读 · 0 评论 -
Vue组件事件之emit
/定义一个方法count++,传入自定义事件@addcount中。//需要执行的父组件中的自定义事件的值(即父组件中定义的方法)//返回一个等同于 $emit 方法的 emit 函数。//返回一个等同于 $emit 方法的 emit 函数。//将接收到的自定义事件\自定义属性传入setup。//将接收到的自定义事件\自定义属性传入setup。//使用emits接收父组件的自定义事件。//使用emits接收父组件的自定义事件。//此方法执行父组件俩个方法,//此方法执行父组件俩个方法,原创 2024-02-27 02:18:48 · 2384 阅读 · 0 评论 -
Vue组件声明注册之特别属性Props
3.当一个 prop 被声明为允许多种类型时,Boolean 的转换规则也将被应用。如果声明了 default 值,那么在 prop 的值被解析为 undefined 时,无论 prop 是未被传递还是显式指明的 undefined,都会改为 default 值。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。原创 2024-02-26 15:43:10 · 1012 阅读 · 0 评论 -
Vue单文件组件SFC
为了方便,Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这使得在 JavaScript 中导入和注册组件都很容易,同时 IDE 也能提供较好的自动补全。在单文件组件和内联字符串模板中,我们都推荐这样做。但是,PascalCase 的标签名在 DOM 内模板中是不可用的,详情参见 DOM 内模板解析注意事项。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。//此组件的父控件不会访问到此组件任何的属性。原创 2024-02-26 10:06:31 · 544 阅读 · 0 评论 -
Vue模板引用之ref特殊属性
/ 此时还未挂载,或此元素已经被卸载(例如通过 v-if 控制)// 此时还未挂载,或此元素已经被卸载(例如通过 v-if 控制)//应为使用了setup,使得组件默认为私有的。//定义一个与li中ref值同名的响应式属性。//一定要在组件挂载后才能通过ref访问组件。//一定要在组件挂载后才能通过ref访问组件。// 声明一个 ref 来存放该元素的引用。// 声明一个 ref 来存放该元素的引用。// 必须和模板里的 ref 同名。// 必须和组件里的 ref 同名。//ref控件为单数时使用。原创 2024-02-24 01:40:52 · 802 阅读 · 0 评论 -
Vue监听器(上)之组合式watch
1. 定义监听器//要监视的属性被改变时触发watch( 要监视的属性, (更改后的心值, 更改前的旧值) => { 具体操作 },);//监视对象为getter的时候//表达式内任意响应式属性被改变时触发watch( () => return表达式, (表达式的新值, 表达式的旧值) => { 具体操作 });//数组中任意下标数据被改变时触发watch( value1, value2,....], ([valu原创 2024-02-23 23:42:48 · 1327 阅读 · 0 评论 -
Vue表单输入绑定
【代码】Vue表单输入绑定。原创 2024-02-23 01:27:34 · 408 阅读 · 0 评论 -
Vue修饰符
'我是子div的click,但是我使用了stop,我不会在调用父div的click方法'你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。'我使用了pervent修饰符,我不会在执行href跳转''我只在点击第一次时执行,因为我使用了once''您在input中按下了回车,所以看到了我''我是父div的click'"Hi,你看到我了""Hi,你看到我了""Hi,你看到我了"原创 2024-02-23 01:02:22 · 458 阅读 · 0 评论 -
Vue事件处理之v-on
"-----------------------------什么都没有传入-------------------------------------""-----------------------------传入参数但未传event--------------------------------""-----------------------------同时传入参数与event--------------------------------"//定义一个接受参数的方法,此时也会在传入event。原创 2024-02-23 00:24:16 · 771 阅读 · 0 评论 -
Vue样式绑定
/利用bool值控制class调用的样式名称是否显示(样式设置成对象)//利用v-bind的bool值控制class调用的样式名称是否显示。①通过class名称的bool值判断样式是否被启用。②样式名称在对象中,html中调用定义的对象。//从vue中获取ref方法。//从vue中获取ref方法。//从vue中获取ref方法。//从vue中获取ref方法。//从vue中获取ref方法。//定义对象形式style。//利用数组绑定样式。//利用数组绑定样式。//利用数组绑定样式。原创 2024-02-22 23:05:19 · 504 阅读 · 0 评论 -
Vue计算属性computed()
从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”,每当源状态发生变化时,就会创建一个新的快照。更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。说白了方法每次执行都会被调用,而计算属性只有内部属性值被改变的时候才会被调用。原创 2024-02-22 21:38:28 · 285 阅读 · 0 评论 -
Vue响应式状态ref()与reactive()
{ “id”: 1, “name”: “小红” }[ “打扑克”, “学习”, “唱歌” ]原创 2024-02-22 19:02:42 · 442 阅读 · 1 评论 -
Vue模版语法之条件渲染
2.v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。如果在运行时绑定条件很少改变,则 v-if 会更合适。4.一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。1.当 v-if 和 v-for 同时存在于一个元素上的时候,v-if 会首先被执行。5.v-show 不支持在 元素上使用,也不能和 v-else 搭配使用。3.因为 v-if 是一个指令,我们可以在一个 元素上使用 v-if。原创 2024-02-20 00:29:02 · 417 阅读 · 0 评论 -
Vue报错集合
XXXXX在定义时可能为有大小写,但是其被在DOM元素中使用v-bind动态绑定时读取为全部小写。1.定义变量时大小写问题。原创 2024-02-19 23:41:20 · 129 阅读 · 0 评论 -
Vue模版语法之属性绑定v-bind
没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。然而,你也可以自行在 app.config.globalProperties 上显式地添加它们,供所有的 Vue 表达式使用。模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 Math 和 Date。绑定在表达式中的方法在组件每次更新时都会被重新调用,因此不应该产生任何副作用,比如改变数据或触发异步操作。想要响应式地绑定一个属性,应该使用 v-bind 指令。原创 2024-02-19 23:28:55 · 922 阅读 · 0 评论 -
Vue模版语法之插值语法
'<h1>这里是插入了HTML</h1>'原创 2024-02-19 22:48:20 · 239 阅读 · 0 评论 -
Vuex使用(下)之四个map方法的使用
【代码】Vuex使用(下)之四个map方法的使用。原创 2024-02-14 00:53:22 · 232 阅读 · 0 评论 -
Vuex使用(上)
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。多个组件需要共享数据时。原创 2024-02-14 00:21:13 · 251 阅读 · 0 评论 -
VUE学习资料
1、饿了么:https://element.eleme.cn/#/zh-CN/component/slider。原创 2022-11-02 13:45:51 · 221 阅读 · 1 评论 -
VS Code设置中文
四、顶部搜索框输入:configure language选择中文包。二、顶部搜索框里输入:configure language。一、Ctrl+Shift+P。原创 2022-11-02 13:38:05 · 744 阅读 · 0 评论 -
cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。
C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。3、输入“ set-ExecutionPolicy RemoteSigned”回车。1、在系统中搜索框 输入 Windos PowerShell。5、再次回到cnpm -v执行成功。cnpm : 无法加载文件。2、点击“管理员身份运行”4、根据提示,输入A,回车。原创 2022-11-02 13:35:28 · 3997 阅读 · 0 评论 -
VS Code安装VUE及创建VUE项目
VS Code 安装vue原创 2022-11-02 13:31:08 · 1702 阅读 · 0 评论