草庐IT

javascript - Vue.js 从模板中分离样式

coder 2025-01-05 原文

我使用带有 <style> 的模板出于 CMS 原因，必须靠近其 div 的 block 。

当我运行 Vue.js 时，它似乎删除了样式 block ，说...

- Templates should only be responsible for mapping the state to the UI.     
  Avoid placing tags with side-effects in your templates, such as <style>, 
  as they will not be parsed.

我能做什么？

var app = new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>

<div id="app">
  <style>
    #div_123 {
      background: http://placehold.it/850x150;
    }

    @media screen and (max-width: 640px) {
      #div_123 {
         background: http://placehold.it/350x150;
      }
    }
  </style>
  <div id="div_123">
    Test
  </div>
</div>

最佳答案

问题

在 Vue 2 中，根实例比在 Vue 1 中更像是一个组件。

这意味着当您将 Vue 实例绑定(bind)到 #app 时，它会将 #app 中的所有内容消化为 vue 模板。这意味着标签无效，它们将从模板中删除。这就是 Vue 2 中的工作方式。

休闲

我在这里用 codepen 重现了这个问题

https://codepen.io/Fusty/pen/gqXavm?editors=1010

嵌套在 Vue 绑定(bind)到的标签中的 <style> 标签。它应该设计背景红色和文本颜色绿色。然而，我们只看到了这一点(取决于你的浏览器启动 Vue 的速度)，最终 vue 删除了这些样式标签，因为它将 #app 消化为模板，然后用它认为应该存在的内容更新 DOM(没有 <style>标签)。

更好的娱乐

感谢 Vue-Land discord 上的用户@joestrouth1#6053，我们也有这个问题的分支。

https://codepen.io/joestrouth1/pen/WPXrbg?editors=1011

查看控制台。上面写着。 . .

"[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

1  |  <div>
2  |      <style>
   |      ^^^^^^^
... etc ...

提示模板中的样式标签。

这集中在实际问题上。值得一提的是，这不会发生在 Vue 1 中。可能是因为它比组件更独特地对待根实例，但我不是 100% 确定这个主题。

解决方案(Hack，不是最佳实践或特别推荐)

在 Vue 实例的 <style> 生命周期钩子(Hook)期间，created 标签仍然在 DOM 中，并且在 mounted 生命周期钩子(Hook)触发时被删除。让我们查询 #app 元素中的所有样式标签，保存它们，然后在 Vue 消化模板后将它们追加回 #app 元素。

将以下内容添加到您的根 Vue 实例将获取您的 Vue 实例绑定(bind)到的任何元素中的任何 <style> 标记(通过 el: 'someSelector' )并将它们附加(可能重新定位)到您的 Vue 实例绑定(bind)到的元素。

  created: function() {
    this.styleTagNodeList = document.querySelector(this.$options.el).querySelectorAll('style');
  },
  mounted: function() {
    for(var i = 0; i < this.styleTagNodeList.length; ++i)
      this.$el.appendChild(this.styleTagNodeList[i]);
  }

注意:这绝对是一种黑客行为，可能会产生我尚未遇到的意外后果，因此无法明确否认。使用风险自负。

关于javascript - Vue.js 从模板中分离样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42746964/

中分javascriptcodesectionstylevue.js

有关javascript - Vue.js 从模板中分离样式的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  3. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  7. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby-on-rails - 在 rails 中分配/替换参数哈希 - 2

    我在RailsController操作中有下面的代码序列。在IF之前，params包含请求参数，正如预期的那样。在它之后，params为零。谁能解释一下这里发生了什么？iffalseparams={:user=>{:name=>"user",:comment=>'comment'}}end谢谢。 最佳答案 params其中包含请求参数实际上是一个方法调用，它返回包含参数的散列。你的params=行正在分配给一个名为params的局部变量.iffalse之后block，Ruby已经看到了本地params变量，所以当你引用params时

  10. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

随机推荐