js 使用script或template标签:分离js代码template中的HTML元素

参考:https://www.jianshu.com/p/332252abe016

方法一. script:

<div id="app">
      <com-first></com-first>
 </div>
 <script type="text/x-template" id="comFirst">
      <div>component 1</div>
  </script>
<script>
        Vue.component(‘com-first‘,{
            template: ‘#comFirst‘
        })

        new Vue({
            el: ‘#app‘
        })
</script>

方法二. template:

<div id="app">
      <com-first></com-first>
</div>
<template id="comFirst">
      <div>component 1</div>
</template>
<script>
     Vue.component(‘com-first‘,{
            template: ‘#comFirst‘
        })

        new Vue({
            el: ‘#app‘
        })
</script>

原文地址:https://www.cnblogs.com/linjiangxian/p/11460886.html

时间: 2024-10-08 19:48:37

js 使用script或template标签:分离js代码template中的HTML元素的相关文章

js正则实现从一段复杂html代码字符串中匹配并处理特定信息

js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他进行加粗.加下滑线处理. 解决思路: 1.用正则匹配“|”出现的次数,处理刚好出现2次的(html字符串中一般不会含有这个字符) 2.使用正则分组,获取“|”之间的内容,并进行替换(添加样式) 代码: function specialDeal(){ htmlStr = htmlStr.replace

template标签就相当于React中的fragment

原文地址:https://www.cnblogs.com/eret9616/p/11180581.html

Angular.js 与script.js 异步加载

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angular.js</title> <script type="text/javascript" src="./js/script.js"></script> <!--<script type="text/ja

HTML5 &lt;template&gt;标签元素简介

一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是"模板元素". 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: <script type="text/template"> // ... </script> 实际上,并不存在type="text/template"这样的标准写法,<template&g

HTML5中&lt;template&gt;标签的详细介绍

HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: 1 2 3 <script type="text/template"> /

js 替换 script 标签内容,包括 换行符

这几天在做项目的时候需要用到js替换 script 标签内的内容 用自己写的字符串去匹配都能成功,但是一旦将大串的DOM内容去匹配的时候 却一直提示失败. 上网查了很多资料,一直匹配不了,调试了很久 郁闷的时候,灵光一闪,难不成是换行的问题,一测试,果然如此 var str = 'lkjkjk' +'<SCRIPT type=text/html> abc </SCRIPT>' var reg = /<script.*>.*<\/script>/gi aler

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA

JS动态引入js、CSS动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA

JS 之 script标签

1.script标签 1.js代码的解析(包括下载js文件)会阻塞页面加载 2.当js文件放在头部,页面必须等所有js代码都被下载,解析和执行完成后才开始呈现页面内容(遇到body标签才呈现),对于那些需要很多js文件的页面来说,会有很大的延迟,浏览器页面空白时间,              所以尽量把全部js文件引用放在body标签内的最底部,先呈现内容,用户体验更好2.defer延迟脚本 script标签加上defer属性,浏览器会异步地下载该文件,不会影响后续dom的渲染,如果有多个def