vue双大括号为空

Posted 2023-04-04

参考技术A 首先获取这个节点，获取文本内容；然后我们需要去匹配所有的 ，这里我们采用正则，并且获取到 里面的内容。这里打印的args为一个数组，在这里插入图片描述可以看到数组的第二个值就是双大括号的内容，就是我们要的东西，所以下一步就是把它转化为data里面的值就可以了。
Vue中主要思路思路就是三步：
1、获取所有节点
2、找到所有 的节点
3、替换 的内容 参考技术B Vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

使用 Laravel 变量索引 Vue​​ 字典

【中文标题】使用 Laravel 变量索引 Vue​​ 字典

【英文标题】：Indexing a Vue dictionary with Laravel variable

【发布时间】：2021-11-09 09:36:24

【问题描述】：

我想在 Vue 的双大括号内使用 Laravel 的双大括号语法，用 @ 语法转义。

在下面的代码中（不起作用），savingNotes 是 Vue 中的字典，我想使用 Laravel 变量作为键来为该字典选择一个项目。

@foreach($notes as $key => $note)
    <div class="note">
        <div class="note-heading">
            @ savingNotes[ $key ] 
             $note->name 
        </div>
        <hr class="note-hr">
        <div class="note-content">
             $note->content 
        </div>
    </div>
@endforeach

【参考方案1】：

您可以使用 @verbatim directive 来转义您会被 VueJS 隐藏的部分

@verbatim savingNotes @endverbatim ['$key'] @verbatim  @endverbatim 

但是，这是令人头疼的代码。更清晰的方法是在 VueJS 中创建一个自定义指令并将密钥传递给它。

new Vue(
  el: "#app",
  directives: 
    'saving-notes': 
        inserted: function (el, binding, vnode) 
            el.innerHTML = vnode.context.savingNotes[binding.expression]
        
    
  ,
  data: 
      savingNotes: 
        'test-key': 'testvalue'
      
  ,
)

然后在你的刀片模板中，写：

    <div class="note-heading">
            <span saving-notes="$key"></span>
             $note->name 
    </div>