<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>Attic - VUE</title>
    <link>https://tingyulou.top/forum.php?mod=forumdisplay&amp;fid=57</link>
    <description>Latest 20 threads of VUE</description>
    <copyright>Copyright(C) Attic</copyright>
    <generator>Discuz! Board by Comsenz Inc.</generator>
    <lastBuildDate>Wed, 06 May 2026 12:00:14 +0000</lastBuildDate>
    <ttl>60</ttl>
    <image>
      <url>https://tingyulou.top/static/image/common/logo_88_31.gif</url>
      <title>Attic</title>
      <link>https://tingyulou.top/</link>
    </image>
    <item>
      <title>vue3-upload</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=319</link>
      <description><![CDATA[&amp;lt;publicFormAgGrid :agGridConfig=&amp;quot;agGridConfig&amp;quot; v-show= \'true\'&amp;gt;
      &amp;lt;template #button&amp;gt;
        &amp;lt;publicUpLoad :url=&amp;quot;importExcel&amp;quot; :aggridInstance=&amp;quot;agGridConfig&amp;quot; @on-uploadCallBack=&amp;quot;uploadCallBack&amp;quot;]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 30 Oct 2025 03:02:05 +0000</pubDate>
    </item>
    <item>
      <title>vue3</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=312</link>
      <description><![CDATA[map 语法
// 解析 sn 字符串转为数组,a,b,c=&amp;gt;[a,b,c]
  const snList = data?.sn ? data.sn.split(\',\').map((s: string) =&amp;gt; s.trim()).filter(Boolean) : [\'\'];

  // 转换为组件需要的格式
  serialNumbers.value = snList.map((value: string, index: number) =&amp;gt; ({
  ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 09 Oct 2025 05:40:21 +0000</pubDate>
    </item>
    <item>
      <title>html语法</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=298</link>
      <description><![CDATA[Css复合选择器
.a .b是子孙集
.a&amp;gt;.b是直接子集
.test1.test2 中间没有间隙，是交集选择器
.a,.b并集选择器
合子模型 和布局
弹性布局Flex]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Tue, 12 Aug 2025 09:38:08 +0000</pubDate>
    </item>
    <item>
      <title>vue2语法常用</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=296</link>
      <description><![CDATA[1 赋值
this.$set(this.temp, &amp;quot;unReportAlarmPersionId&amp;quot;, &amp;quot;&amp;quot;);]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 31 Jul 2025 06:26:18 +0000</pubDate>
    </item>
    <item>
      <title>webstorm vue2版本切vue3</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=293</link>
      <description><![CDATA[node -v
v12.22.12
npm -v
6.14.16
安装nvm
brew install nvm
创建nvm目录
mkdir ~/.nvm
添加到zsh配置文件
echo \'export NVM_DIR=&amp;quot;$HOME/.nvm&amp;quot;\' &amp;gt;&amp;gt; ~/.zshrc
echo \'source $(brew --prefix nvm)/nvm.sh\' &amp;gt;&amp;gt; ~/.zshrc
重新加载配置
source ~/.zshrc
检查nv]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Mon, 28 Jul 2025 02:06:28 +0000</pubDate>
    </item>
    <item>
      <title>vue组件</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=275</link>
      <description><![CDATA[dom中自定义的标签都要小写，浏览器都会自动解析成小写
组件分为全局注册组件和局部注册组件，全局组件使用Vue.component()方法，有两个参数，第一个参数自定义组件的名字，第二个参数是一个函数对象，函数对象使用Vue.extend()方法创建的组件构造器，也可以是一个选项 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 11:51:35 +0000</pubDate>
    </item>
    <item>
      <title>ref获取dom</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=274</link>
      <description><![CDATA[ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
&amp;lt;div id=&amp;quot;app&amp;quot; v-cloak&amp;gt;
    &amp;lt;div class=&amp;quot;box1&amp;quot; ref=&amp;quot;box1&amp;quot;&amp;gt;我是第一个盒子&amp;lt;/div&amp;gt;
   ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 11:41:21 +0000</pubDate>
    </item>
    <item>
      <title>watch监听</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=273</link>
      <description><![CDATA[虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，在实际开发中可以解决自定义封装组件或是插件，异步初始化数据获 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 11:37:51 +0000</pubDate>
    </item>
    <item>
      <title>computed实战用法</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=272</link>
      <description><![CDATA[模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。代码如下：

{{message.split(\'\').reverse().join(\'\')}}
data(){
            return {
                  message:&amp;quot;abcdefg&amp;quot;
            }
}
const show ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 11:13:32 +0000</pubDate>
    </item>
    <item>
      <title>双向绑定原理</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=271</link>
      <description><![CDATA[双向绑定的原理也叫响应式原理，面试的时候经常会问到，所以大家需要了解一下，Vue是采用对象设计模式之发布者-订阅者模式的方式，通过Object.defineProperty()属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。来完成双向绑定。
Object.defin ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 11:05:44 +0000</pubDate>
    </item>
    <item>
      <title>vue模板语法三</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=270</link>
      <description><![CDATA[1、v-model
指定单选默认值

如果 v-model 表达式的初始值未能匹配任何选项，&amp;lt;select&amp;gt; 元素将被渲染为“未选中”状态。在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS 不会触发 change 事件。因此，推荐像上面这样提供一个值为空的禁用选项。

下拉框中 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Thu, 24 Apr 2025 10:47:50 +0000</pubDate>
    </item>
    <item>
      <title>VUE模板语法二</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=267</link>
      <description><![CDATA[1、事件修饰符与按键修饰符
1.事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue为v-on提 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Wed, 23 Apr 2025 09:51:47 +0000</pubDate>
    </item>
    <item>
      <title>VUE模板语法指令核心语法</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=265</link>
      <description><![CDATA[指令 (Directives) 是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
1.v-cloak
v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。
当网络较慢，网页还在加载Vue.js ，而导致Vue来 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Sat, 19 Apr 2025 02:00:21 +0000</pubDate>
    </item>
    <item>
      <title>VUE知识</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=264</link>
      <description><![CDATA[v-bind:    简写[：]
&amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;程序思维&amp;lt;/a&amp;gt; = :href

v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute
&amp;lt;!-- 与 :id=&amp;quot;id&amp;quot; 相同 --&amp;gt;
&amp;lt;div :id&amp;gt;&amp;lt;/div&amp;gt;

&amp;lt;!-- 这也同样有效 --&amp;gt;
&amp;lt;div v-bind:id&amp;gt;&amp;lt;/div&amp;gt;

 ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Sat, 19 Apr 2025 01:47:01 +0000</pubDate>
    </item>
    <item>
      <title>vue模板语法插值Mastache</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=262</link>
      <description><![CDATA[&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
    &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&amp;quot;/&amp;gt;
    &amp;lt;meta name=&amp;q]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Wed, 16 Apr 2025 10:53:06 +0000</pubDate>
    </item>
    <item>
      <title>VUe生命周期及钩子关键字</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=261</link>
      <description><![CDATA[每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
beforeCreate：初始化之前

crea ...]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Wed, 16 Apr 2025 10:06:00 +0000</pubDate>
    </item>
    <item>
      <title>VUE数据和方法</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=260</link>
      <description><![CDATA[let data={a:&amp;quot;张三&amp;quot;};
    let vue=new Vue({
        el:&amp;quot;#app&amp;quot;,
        //data:data   不用定义对象的方式
        //以定义方法的形式去定义
        data(){
            return data
        }
    });
    console.log(vue);
    console.log(data.a==vue.$da]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Wed, 16 Apr 2025 08:56:03 +0000</pubDate>
    </item>
    <item>
      <title>VUE新建方式</title>
      <link>https://tingyulou.top/forum.php?mod=viewthread&amp;tid=259</link>
      <description><![CDATA[&amp;lt;!DOCTYPE html&amp;gt;

&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
    &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&amp;quot;/&amp;gt;
    &amp;lt;meta name=]]></description>
      <category>VUE</category>
      <author>Kyle</author>
      <pubDate>Wed, 16 Apr 2025 08:43:56 +0000</pubDate>
    </item>
  </channel>
</rss>