云远12189-CSDN博客

原创 Vuex使用之Vue3

创建文件：src/store/index.js。修改main.js文件。

2024-02-28 01:53:05 208

原创 Vue动态组件切换is

/因为切换组件有性能开销问题,所以使用shallowRef或markRaw。

2024-02-28 01:19:40 246

原创 Vue组合式函数之方法复用

【代码】Vue组合式函数之方法复用。

2024-02-28 00:51:57 458

通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。向 app.config.globalProperties 中添加一些全局实例属性或方法。插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。一个可能上述三种都包含了的功能库 (例如 vue-router)。通过 app.provide() 使一个资源可被注入进整个应用。App.vue(对插件使用的组件)

2024-02-28 00:40:37 246

原创 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 937

原创 Vue异步组件之defineAsyncComponent

【代码】Vue异步组件之defineAsyncComponent。

2024-02-27 23:12:30 145

原创 Vue依赖注入之Provide/Inject

/使用inject接收父组件provide的住入值,其注入值为一个对象。//使用inject接收父组件provide的住入值,其注入值为一个对象。//let 变量名 = inject(父组件的provide注入值);//let 变量名 = inject(父组件的provide注入值);//provide("注入名", {以对象形式输出多个值});//provide("注入名", {以对象形式输出多个值});//provide("注入名", 值);//provide("注入名", 值);

2024-02-27 22:29:24 894

原创 Vue插槽之slot

'我是父组件定义的message'子组件classtest2.vue。子组件classtest.vue。

2024-02-27 21:21:46 485

原创 Vue组件之属性及监听器穿透attrs

/ 透传 attribute 被暴露为 ctx.attrs。中使用 useAttrs() API。"这里的字体大小是外部传递的""按钮被点击,我被修改了""点击按钮我会被修改"

2024-02-27 19:16:37 422

原创 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 490

原创 Vue组件事件之emit

/定义一个方法count++,传入自定义事件@addcount中。//需要执行的父组件中的自定义事件的值(即父组件中定义的方法)//返回一个等同于 $emit 方法的 emit 函数。//返回一个等同于 $emit 方法的 emit 函数。//将接收到的自定义事件\自定义属性传入setup。//将接收到的自定义事件\自定义属性传入setup。//使用emits接收父组件的自定义事件。//使用emits接收父组件的自定义事件。//此方法执行父组件俩个方法,//此方法执行父组件俩个方法,

2024-02-27 02:18:48 1064

原创 Vue组件声明注册之特别属性Props

3.当一个 prop 被声明为允许多种类型时，Boolean 的转换规则也将被应用。如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。//定义一个title标签,用来接收使用此组件接收到的标签。

2024-02-26 15:43:10 976

原创 Vue单文件组件SFC

为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 内模板中是不可用的，详情参见 DOM 内模板解析注意事项。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。//此组件的父控件不会访问到此组件任何的属性。

2024-02-26 10:06:31 476

原创 Vue模板引用之ref特殊属性

/ 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）//应为使用了setup,使得组件默认为私有的。//定义一个与li中ref值同名的响应式属性。//一定要在组件挂载后才能通过ref访问组件。//一定要在组件挂载后才能通过ref访问组件。// 声明一个 ref 来存放该元素的引用。// 声明一个 ref 来存放该元素的引用。// 必须和模板里的 ref 同名。// 必须和组件里的 ref 同名。//ref控件为单数时使用。

2024-02-24 01:40:52 780

原创 Vue监听器(上)之组合式watch

1. 定义监听器//要监视的属性被改变时触发watch( 要监视的属性, (更改后的心值, 更改前的旧值) => { 具体操作 },);//监视对象为getter的时候//表达式内任意响应式属性被改变时触发watch( () => return表达式, (表达式的新值, 表达式的旧值) => { 具体操作 });//数组中任意下标数据被改变时触发watch( value1, value2,....], ([valu

2024-02-23 23:42:48 1223

原创 Vue表单输入绑定

【代码】Vue表单输入绑定。

2024-02-23 01:27:34 404

原创 Vue修饰符

'我是子div的click,但是我使用了stop,我不会在调用父div的click方法'你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。'我使用了pervent修饰符,我不会在执行href跳转''我只在点击第一次时执行,因为我使用了once''您在input中按下了回车,所以看到了我''我是父div的click'"Hi,你看到我了""Hi,你看到我了""Hi,你看到我了"

2024-02-23 01:02:22 447

原创 Vue事件处理之v-on

"-----------------------------什么都没有传入-------------------------------------""-----------------------------传入参数但未传event--------------------------------""-----------------------------同时传入参数与event--------------------------------"//定义一个接受参数的方法,此时也会在传入event。

2024-02-23 00:24:16 760

原创 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 494

原创 Vue计算属性computed()

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。说白了方法每次执行都会被调用,而计算属性只有内部属性值被改变的时候才会被调用。

2024-02-22 21:38:28 262

原创 Vue响应式状态ref()与reactive()

{ “id”: 1, “name”: “小红” }[ “打扑克”, “学习”, “唱歌” ]

2024-02-22 19:02:42 382 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 407

原创 Vue报错集合

XXXXX在定义时可能为有大小写,但是其被在DOM元素中使用v-bind动态绑定时读取为全部小写。1.定义变量时大小写问题。

2024-02-19 23:41:20 116

原创 Vue模版语法之属性绑定v-bind

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。想要响应式地绑定一个属性，应该使用 v-bind 指令。

2024-02-19 23:28:55 817

空空如也

空空如也