参考: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>

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

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

    js正则实现从一段复杂html代码字符串中匹配并处理特定信息 问题: 现在要从一个复杂的html代码字符串(包含各种html标签,数字.中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他 ...

  2. template标签就相当于React中的fragment

    template标签就相当于React中的fragment

  3. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

  4. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  5. 6.游戏特别离不开脚本(3)-JS脚本操作java(直接解析JS公式,并非完整JS文件或者函数)

    engine.put("usList", us); engine.put("obj", new JSModifiedJava()) ;  取个变量名就put进去 ...

  6. 还在拼字符串?试试HTML5的template标签

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

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

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

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

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  9. JS 之 script标签

    1.script标签 1.js代码的解析(包括下载js文件)会阻塞页面加载 2.当js文件放在头部,页面必须等所有js代码都被下载,解析和执行完成后才开始呈现页面内容(遇到body标签才呈现),对于那 ...

随机推荐

  1. JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  2. Google Projectsheet Planning 插件的WBS

    生成 WBS的序列號 在 Sldebar中的 "WBS" 按鈕: "< WBS" 取消下級目錄 "WBS >" 生成下級目錄 G ...

  3. Appium 微信 webview 的自动化技术

    Appium 微信 webview 的自动化技术   最近好多人问微信webview自动化的事情, 碰巧我也在追微信webview的自动化和性能分析方法. 先发出来一点我的进展给大家参考下. 此方法用 ...

  4. Python代码中func(*args, **kwargs)

    这是Python函数可变参数 args及kwargs *args表示任何多个无名参数,它是一个tuple **kwargs表示关键字参数,它是一个dict 测试代码如下: def foo(*args, ...

  5. QQ空间删除日志

    按下F12,贴上如下代码 var delay = 2000; function del() { document.querySelector(".app_canvas_frame" ...

  6. CSS压缩

    通过W3C 统一验证工具的检测没有错误后,为了提高加载速度和节约空间(相对来说,css量很少的情况下,几乎没啥区别),可以通过css压缩工具把css进行压缩. w3c css压缩 http://too ...

  7. 阿里云在云栖大会发布RPA最新3.4版本,将与达摩院联合探索人工智能领域

    9月26日,在2019年杭州云栖大会上,阿里云发布了RPA最新V3.4版本,全新升级了增加诸如录屏审计.JAVA应用录制能力.达摩院OCR内置组件.语法检查与智能提示能力增强等功能. RPA全名称Ro ...

  8. text-html 转译

    var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html编码(转义)*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素,如D ...

  9. svg实现渐变进度圆环

    效果图 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="ut ...

  10. selenium python bindings 项目结构总结

    一个合理的文档结构在import的过程中会避免很多错误,踩完坑来记录. webtests/ framework.py webdriver.py test_file.py module/ __init_ ...