VUE的模板分离写法。

1、第一种（不常用）

    <script type="text/x-template" id="myCpm">

        <div>

            <h2>模板分离的写法</h2>

        </div>

    </script>

2、第二种

    <template id="myCpm2">

        <div>

            <h2>模板分离的写法</h2>

        </div>

    </template>

****完整代码*****

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<div id="app">

    <cpn></cpn>

    <cpn2></cpn2>

</div>

<body>

    <!-- 第一种 -->

    <script type="text/x-template" id="myCpm">

        <div>

            <h2>模板分离的写法</h2>

        </div>

    </script>

    <!-- 第二种 -->

    <template id="myCpm2">

        <div>

            <h2>模板分离的写法</h2>

        </div>

    </template>

    <script>

        Vue.component('cpn', { template: '#myCpm' })

        // 第一种注册全局组件

        let vm = new Vue({

            el: '#app',

            data: () => ({}),

            components: {

                'cpn2': { template: '#myCpm2' }

            }

            // 第二种注册局部组件

        })

    </script>

</body>

</html>

Vue-组件模板抽离的写法的更多相关文章

  1. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  2. vue 组件 模板中根数据绑定需要指明路径并通信父

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  3. vue 组件 模板input双向数据数据

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>T ...

  4. webpack+vue+.vue组件模板文件 所需要的包

    {  "name": "webpack-study02",  "version": "1.0.0",  "de ...

  5. [前端开发]Vue组件化的思想

    组件化的思想 将一个页面中的处理逻辑放在一起,处理起来就会很复杂,不利于后续管理和扩展. 如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了. 注册组件的 ...

  6. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  7. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  8. Vue 定义组件模板的七种方式(一般用单文件组件更好)

    在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...

  9. Vue 下拉列表 组件模板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. docker 安装 rabbitMQ服务器

    1. 镜像拉取 拉取rabbitMQ镜像文件,后边要接上 management 表名是拉取带有web管理端的镜像,有web界面方便管理. 2.默认用户运行镜像 docker run -d -p 567 ...

  2. USB通信协议深入理解

    0. 基本概念 一个[传输](控制.批量.中断.等时):由多个[事务]组成: 一个[事务](IN.OUT.SETUP):由一多个[Packet]组成. USB数据在[主机软件]与[USB设备特定的端点 ...

  3. ffmpeg下载m3u8流媒体

    安装 编译好的windows可用版本的下载地址(官网中可以连接到这个网站,和官方网站保持同步): http://ffmpeg.zeranoe.com/builds/ 该版本为FFMPEG的Static ...

  4. 解决问题：Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.

    Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean. 注释掉, ...

  5. CF1256A Payment Without Change

    CF1256A Payment Without Change 洛谷评测传送门 题目描述 You have aa coins of value nn and bb coins of value 11 . ...

  6. 并行计算：并行I/O服务器的操作参数

    视频来源:新竹清华大学:并行计算与并行编程课程 上图结论:随着年限,计算力的增长很快,而I/O近于平缓,二者之间的差距增大,带来不利的影响.需要一些方法来处理这较大的差距. 解决方案: 1:I/O 内 ...

  7. 事件代理/事件委托----点击li弹出对应的下标和内容

    <body> <ul> <li>这是第一行</li> <li>这是第二行</li> <li>这是第三行</li ...

  8. 【正则】day01

    正则表达式一.概述    验证    网络爬虫. 概念:    具有语法格式的字符串. 函数    PCRE    1.perl语言正则语法兼容.(java c)    2.速度快,效率高.    P ...

  9. FFT/NTT基础题总结

    在学各种数各种反演之前把以前做的$FFT$/$NTT$的题整理一遍 还请数论$dalao$口下留情 T1快速傅立叶之二 题目中要求求出 $c_k=\sum\limits_{i=k}^{n-1}a_i* ...

  10. Unreal Engine 4 系列教程 Part 7：音频教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...