将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
我想访问另一个 props 验证器中的 props 值： 道具： { 类型： { 类型：字符串， 默认值：“标准” }, 尺寸： { 类型：字符串， 默认值：“正常”， 验证器（值...
我如何访问作为另一个 $refs 的子级的 $refs？ 就像我的代码看起来像这样，我想要的是能够使用与我尝试过的语法类似的语法访问引用“ipsum”。的c...
如何在 vue 组件中使用 refs（最好是在循环中）来操作模板中的多个 dom 元素？举例来说，我想在每个 上应用带有 GSAP 的动画 如何在我的 vue 组件中（最好是在循环中）使用 refs 来操作模板中的多个 dom 元素？举例来说，我想在函数中的每个 <p ref="pre"> 上应用带有 GSAP 的动画。我该怎么做？就像我会以数组或其他方式访问它们吗？当前代码仅适用于第一个元素，对吗？ 我的模板 <template> <section ref="sectionText"> <p ref="pre"> text </p> </section> <section ref="sectionImage"> <p ref="pre"> some more text </p> </section> <section ref="sectionAudio"> <p ref="pre"> even more </p> </section> <section ref="sectionVideo"> <p ref="pre"> text </p> </section> </template> 我的组件 <script> import gsap from 'gsap' export default { mounted() { gsap.to(this.$refs.pre, 0.75, { opacity: 0 }) } } </script> 这种方法确保您可以在循环中使用 refs 将动画应用到多个 DOM 元素。 <template> <section ref="sectionText"> <p ref="setRef"> text </p> </section> <section ref="sectionImage"> <p ref="setRef"> some more text </p> </section> <section ref="sectionAudio"> <p ref="setRef"> even more </p> </section> <section ref="sectionVideo"> <p ref="setRef"> text </p> </section> </template> <script> import { gsap } from 'gsap'; export default { data() { return { preRefs: [] }; }, methods: { setRef(el) { if (el) { this.preRefs.push(el); } } }, mounted() { this.preRefs.forEach((pre) => { gsap.to(pre, 0.75, { opacity: 0 }); }); } } </script>
我有一个组件作为 DOM 渲染的一部分安装。该应用程序的骨架是 我有一个作为 DOM 渲染的一部分安装的组件。该应用程序的骨架是 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> 具有功能（它显示一些表单输入）并且 $emit 向父级提供数据。 有办法重新安装它吗？目标是拥有组件内容和设置，就好像它刚刚第一次渲染一样（包括重置保持其状态的data()元素）。 对此有一些解决方案，但它们都假设重写data()，我想避免这种情况。 我的理解是，组件实际上是在渲染过程中在正确位置注入 dom 中的 HTML/CSS/JS 代码，所以我担心“重新安装”它的概念不存在 - 我只是想在之前确定一下采用 data() 重写方式。 诀窍是改变密钥 当 key 发生变化时，vue 会将其视为新组件，因此会卸载“旧”组件，并挂载“新”组件。 参见示例，created()挂钩只会运行一次，因此如果您看到值发生变化，您就会看到一个全新的对象。 示例： Vue.component('my-component', { template: `<div>{{ rand }}</div>`, data() { return { remount: true } }, created() { this.remount = !this.remount; // true▶false▶true▶false... } }); new Vue({ el: '#app', data: { componentKey:0 } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> <div id="app"> <my-component :key="componentKey"></my-component> <button @click="componentKey=!componentKey">press this button to reload the component</button> </div> 在模板中，您将添加 v-if 指令： <template> <my-component v-if="renderComponent" /> </template> 在您的脚本中，您将添加使用 nextTick: 的方法 <script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // Remove my-component from the DOM this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; }); } } }; </script> 这就是这里发生的事情： 最初 renderComponent 设置为 true，因此渲染 my-component 当我们调用 forceRerender 时，我们立即将 renderComponent 设置为 false 我们停止渲染 my-component，因为 v-if 指令现在计算为 false 在下一个刻度上 renderComponent 设置回 true 现在 v-if 指令的计算结果为 true，因此我们再次开始渲染 my-component 可能来源：https://medium.com/hackernoon/the- Correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad，最初发布于https://michaelnthiessen。 com/force-re-render/ .
我一直在尝试将数据从 Rails 视图传递到 Vue 组件，如此处所述 一切都按预期进行，但我对如何访问通过
Vuex 和 Vue Router - beforeEnter 上的双重条件不起作用
我在 beforeEnter 中有双重条件，没有人可以进入正确的位置。有条件限制什么的吗？ :( 我在路由器文件中的代码： 常量路由 = { 路径：`${routerConfig.preRoute}/
Jest 和 Vue 测试 Computed 中的 UseHead
尝试在计算内部的组件中测试 UseHead，但它抛出以下错误无法读取未定义的属性（读取“名称”） Vue 组件有 useHead(计算(() ...
Chrome Core 在 IOS 浏览器中出现长按 UI 错误
我从另一个H5页面使用iframe打开一个H5页面，当我使用IOS Edge或IOS Chrome并在任何地方长按页面时，页面内容将被重置（我使用vue.js构建页面）。就像数据重置一样当长
出于一个非常利基和特定的原因，我需要 VueJS 的两个主要版本（2 和 3）在同一个网页上同时运行，并且每个版本彼此独立地运行自己的插件。这一切都会
我昨天才开始使用 vue.js 编码，我不知道如何在不使用“传统”JS 方式 document.getElementById('myTextBox').focus() 的情况下“聚焦”文本框。 最初，我的
http://localhost:8000/broadcasting/auth 404（未找到）
我正在尝试让我的应用程序连接到私人频道上的推送器。 但我收到以下错误： Pusher.js?b3eb:593 POST http://localhost:8000/broadcasting/auth 404 （未找到） ...
Vue 2 + Axios - 显示/隐藏 div 作为 Axois 请求结果的结果
我的 html 页面中有一个 div ... isCaptchaError - 在我的 Vue 实例中初始化： const 形式 = 新 Vue({ 电子...
pnpm patch 成功给项目打补丁，但是项目运行时补丁不生效？
我发现el-form有问题，所以我决定在我的项目中修补element-ui。 [email protected]、[email protected]、pnpm、element-ui@^2.15.14 我运行了 pnpm patch element-ui@^2.15.14 根目录补丁...
我想在浏览器中使用 VueNumberFormat （vue 2 库）。 我在 html 页面中加载库 <question vote="0"> <p>我想在浏览器中使用 VueNumberFormat （vue 2 库）。</p> <p>我在我的 html 页面中加载库</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="285e5d4d05465d454a4d5a054e475a45495c6819061b0619">[email protected]</a>/dist/library.js"></script> </code></pre> <p>接下来在我的 js 文件中我尝试使用这个库</p> <pre><code>Vue.use(VueNumberFormat, {prefix: 'R$ ', decimal: ',', thousand: '.'}); </code></pre> <p>页面加载后，我在浏览控制台中出现错误</p> <pre><code>library.js:3 Uncaught ReferenceError: require is not defined at library.js:3:11 </code></pre> <p>有什么方法可以在浏览器环境中使用这个或另一个库吗？</p> </question> <answer tick="false" vote="0"> <p>您正在使用的 cdn 链接使用 <pre><code>require</code></pre>，因此使其正常工作可能会很棘手。</p> <p>cdn 包含一个 esm 模块，您可以像这样使用</p> <pre><code><script type="module"> import vueNumberFormat from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="6b1d1e0e46051e06090e19460d0419060a1f2b5a4558455a">[email protected]</a>/+esm' </script> </code></pre> <p>但是如果您不熟悉使用 esm 模块，这可能会令人困惑。</p> <p>或者，github存储库包含可以直接使用的umd文件<a href="https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js" rel="nofollow noreferrer">https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js</a> 我找不到为此的 CDN，因此您必须下载此文件并自行托管它或为此找到一些 CDN，或者作为最后的手段将内容包含在脚本标记中</p> <pre><code><script> (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueNumberFormat"]=t(require("vue")):e["VueNumberFormat"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"025e":function(e,t,n){"use strict";n.d(t,"a",(function(){return o})),n.d(t,"d",(function(){return u})),n.d(t,"b",(function(){return i})),n.d(t,"c",(function(){return a}));var r=n("ffd9");const o=(e=0,t=r["a"])=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);"number"!==typeof e||n.isInteger||(e=e.toFixed(s(n.precision)));const o=m(e,n.acceptNegative)?"-":"",u=c(e),i=f(u,n.precision),a=d(i).split(".");var b=a[0];const v=a[1];return b=p(b,n.thousand),o+n.prefix+l(b,v,n.decimal)+n.suffix},u=(e=0,t={precision:2,isInteger:!1,acceptNegative:!0})=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);var o=m(e,n.acceptNegative)?-1:1,u=c(e),i=f(u,n.precision);return n.isInteger?parseInt(`${m(e,n.acceptNegative)?"-":""}${u.toString()}`):parseFloat(i)*o},i=(e,t)=>{var n=function(){e.setSelectionRange(t,t)};e===document.activeElement&&setTimeout(n,1)},a=(e,t=r["a"])=>{var n=e.value.length-e.selectionEnd;e.value=o(e.value,t),n=Math.max(n,t.suffix.length),n=e.value.length-n,n=Math.max(n,t.prefix.length+1),i(e,n)};function c(e){return d(e).replace(/\D+/g,"")||"0"}function s(e){return Math.max(0,Math.min(e,20))}function f(e,t){var n=Math.pow(10,t),r=parseFloat(e)/n;return r.toFixed(s(t))}function p(e,t){return e.replace(/(\d)(?=(?:\d{3})+\b)/gm,"$1"+t)}function l(e,t,n){return t?e+n+t:e}function d(e){return e?e.toString():""}function m(e,t=!0){if(!t)return!1;"string"!=typeof e&&(e=e.toString());const n=e.indexOf("+")>=0,r=0!==e&&e.indexOf("-")>=0||"-"==e[e.length-1];return!(n||!r)}},"6b0d":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=(e,t)=>{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n}},"7fb5":function(e,t,n){"use strict";var r=n("8bbf");const o=["value"];function u(e,t,n,u,i,a){return Object(r["openBlock"])(),Object(r["createElementBlock"])("input",{value:a.formattedValue,inputmode:"numeric",onInput:t[0]||(t[0]=e=>a.onInput(e)),onFocus:t[1]||(t[1]=e=>a.onFocus(e))},null,40,o)}var i=n("025e"),a=n("ffd9"),c={name:"VueNumberFormat",props:{value:{type:[String,Number],default:null},options:{type:Object,default:()=>{}}},emits:["input","update:value"],computed:{mergedOptions(){const e=this.$vueNumberFormatOptions||a["a"];return this.options?Object.assign({},e,this.options):e},formattedValue(){return Object(i["a"])(this.value,this.mergedOptions)}},created(){this.$vueNumberFormatOptions||(this.$vueNumberFormatOptions=a["a"])},methods:{onFocus(e){Object(i["b"])(e.target,e.target.value.length-this.mergedOptions.suffix.length)},onInput(e){Object(i["c"])(e.target,this.mergedOptions);const t=Object(i["d"])(e.target.value,this.mergedOptions);this.updateValue(t)},updateValue(e){this.$vueNumberFormatOptions&&"v2"===this.$vueNumberFormatOptions.vueVersion?this.$emit("input",e):this.$emit("update:value",e)}}},s=n("6b0d"),f=n.n(s);const p=f()(c,[["render",u]]);t["a"]=p},"8bbf":function(t,n){t.exports=e},b635:function(e,t,n){"use strict";(function(e){var r=n("7fb5"),o=n("ffd9"),u=n("025e");const i=(e,t)=>{if(i.installed)return;i.installed=!0,e.component("VueNumberFormat",r["a"]);const n=Object.assign({},o["a"],t);"undefined"!=typeof e.prototype?(n.vueVersion="v2",e.prototype.$vueNumberFormatOptions=n):(n.vueVersion="v3",e.config.globalProperties.$vueNumberFormatOptions=n),e.mixin({methods:{vueNumberFormat(e,t=n){const r=Object.assign({},n,t);return Object(u["a"])(e,r)},vueNumberUnformat(e,t=n){const r=Object.assign({},n,t);return Object(u["d"])(e,r)}}})};Object.assign(r["a"],{install:i,format:u["a"],unformat:u["d"]});let a=null;"undefined"!==typeof window?a=window.Vue:"undefined"!==typeof e&&(a=e.Vue),a&&a.use(r["a"]),t["a"]=r["a"]}).call(this,n("c8ba"))},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},fb15:function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var u=n("b635");t["default"]=u["a"]},ffd9:function(e,t,n){"use strict";t["a"]={prefix:"R$ ",suffix:"",decimal:",",thousand:".",precision:2,acceptNegative:!0,isInteger:!1}}})})); </script> </code></pre> </answer> </body></html>
在此输入图片描述移动端h5页面，ios 17+中视频画面显示有问题。有人遇到过这种情况吗？宽度和高度...
我正在使用 vue-js-modal 库并遵循文档中的相同步骤，但我需要实现当模式打开时用户在单击背景时无法关闭模式
我正在使用Vue2和Vue-router（版本^2.2.0）开发一个应用程序，后退和前进导航按钮必须显示用户是否可以后退/前进。 检查用户是否可以...
请有人教我点击时交换两个不同数据的方法 例如我们有一个数据 数据（） { 返回 { 数据一：[ { 名称：“西莫&...
如何通过 typescript 在 Vue2 中使用带有组合 api 的 vue 类组件
从 'vue-property-decorator' 导入 { Component, Vue } 从 '@/composables/customerRepository' 导入 { CustomerContext, getCustomerRepository } @成分 出口</desc> <question vote="7"> <pre><code><script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import { CustomerContext, getCustomerRepository } from '@/composables/customerRepository' @Component export default class CustomerList extends Vue { search = '' setup(): CustomerContext { const ctx = getCustomerRepository() return ctx } } </script> </code></pre> <p>在 Vue 2 中，我想通过 TypeScript 将 Composition API 与类组件样式一起使用，但我不确定语法是否正确。此外，<pre><code>setup()</code></pre>函数不会自动调用。</p> <p><pre><code>vue-class-component</code></pre>可以在 TypeScript 中使用 Compostion API 吗？</p> </question> <answer tick="true" vote="21"> <h3>Vue 2</h3> <p>首先，确保您已经安装了 Vue 2 的 <a href="https://www.npmjs.com/package/@vue/composition-api" rel="noreferrer"><pre><code>@vue/composition-api</code></pre></a> 插件：</p> <pre><code>// main.ts import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi) </code></pre> <p>然后将 <pre><code>setup()</code></pre> 定义为 <pre><code>@Component</code></pre> 选项（而不是类方法）：</p> <pre><code>// MyComponent.vue @Component({ setup(props, context) { //... } }) export default class CustomerList extends Vue { //... } </code></pre> <h3>Vue 3</h3> <p>对于 Vue 3，<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="a4d2d1c189c7c8c5d7d789c7cbc9d4cbcac1cad0e49c8adc">[email protected]</a></code></pre> 导出一个 <pre><code>setup()</code></pre> API，您可以将其分配给局部变量：</p> <pre><code><template> <div>counter: {{myContext.counter}}</div> <button @click="myContext.increment">Increment</button> </template> <script lang="ts"> import { Vue, setup } from 'vue-class-component' import { ref } from 'vue' export default class MyComponent extends Vue { myContext = setup(() => { const counter = ref(0) return { counter, increment() { counter.value++ } } }) } </script> </code></pre> <p><em><strong>注意：</strong> 从 <pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="f1878494dc929d908282dc929e9c819e9f949f85b1c9dfc1dfc1dc8392dfc0">[email protected]</a></code></pre> 开始，<pre><code>setup()</code></pre> 不接收任何参数，包括来自选项 API<a href="https://v3.vuejs.org/guide/composition-api-setup.html#arguments" rel="noreferrer"> 中使用的 <pre><code>context</code></pre> 的 <pre></pre><code>props</code><pre> 和 </pre><code>setup()</code></a> 参数。</em></p> </answer> <answer tick="false" vote="0"> <p>使用class来编写setup，支持vue2和vue3</p> <pre><code><template> <p>{{ count.text }}</p> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Setup, Hook } from 'vue-class-setup'; @Setup class Count { public value = 0; public get text() { return String(this.value); } @Hook('mounted') public init() { this.value++; } } export default defineComponent({ setup() { return { count: new Count() } } }) </script> </code></pre> <p><a href="https://github.com/fmfe/vue-class-setup" rel="nofollow noreferrer">https://github.com/fmfe/vue-class-setup</a></p> </answer> <answer tick="false" vote="0"> <pre><code>import ClassComponent from 'vue-class-component' ClassComponent.registerHooks(['setup']) </code></pre> <p>将其放在项目的开头，然后一切都会按您的预期进行</p> </answer> </body></html>
Element UI 日期时间选择器禁用当前时间之前的小时和分钟
我使用的是element-ui 2.15.7。如何禁用当前时间之前的小时和分钟。例如，当前时间是 27/11/2023 1:41 pm，所以我希望日期选择器禁用 0 -> 12 小时（仅 sh...