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. 记录MySql错误消息

    本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. B.. 服务器错误代码和消息 服务器错误信息来自下述源文件: · 错误消息信息列在sh ...

  2. Lnmp架构部署动态网站环境.2019-7-3-1.2

    Nginx安装 一.安装准备 Pcre(Perl Compatible Regular Expressions,兼容正则表达式)安装pcre库是为了使Nginx支持HTTP Rewrite模块. 安装 ...

  3. Linux系统配置永久明细路由

    版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明. 本文链接地址:https://www.cnblogs.com/wannengachao/p/11947400.html 1.创 ...

  4. PyCharm2019.3专业版激活

    1. 首先到官网下载Professional(专业版),链接地址: https://www.jetbrains.com/pycharm/download/ 具体安装方法这里就不赘述 2. 下载补丁je ...

  5. Windows10下Git环境变量配置

    一.确定Git正确安装并能使用 右键项目目录,检查Git版本: 输入:  git --version 二. 配置环境变量 右键我的电脑 --> 属性 点击高级系统设置 --> 环境变量 - ...

  6. 多线程(六)多线程同步_SemaPhore信号量

    信号量依然是一种内核同步对象,它的作用在于控制共享资源的最大访问数量 例如:我们有一个服务器,为这服务器创建一个线程池,线程池有五个线程,每个线程处理1个请求.当五个线程都在处理请求时,这个线程池己到 ...

  7. luoguP4094 [HEOI2016/TJOI2016]字符串

    题意 考虑二分答案\(mid\),现在我们要判断\(s[c...c+mid-1]\)是否在\(s[a...b]\)出现过. 首先找到\(s[c...c+mid-1]\)所在的状态: 建出\(paren ...

  8. linux 安装盘作为 repo

    1) CentOS 7.7 安装完之后, /etc/yum.repos.d 下面有很多.repo. 其中有一个CentOS-Media.repo. 编辑文件把enabled 改成 1 . 然后把其他. ...

  9. 【day02】Xhtml

    一.HTML实体(HTML Entites) 1.HTML实体:W3C规定在浏览器看到的特殊符号必须用HTML实体  单引号(') ===== '  双引号(") ===== "  ...

  10. P2P中的NAT穿越(打洞)方案详解

    一.P2P(点对点技术) 点对点技术(peer-to-peer,简称P2P)又称对等互联网络技术,是一种网络新技术,依赖网络中参与者的计算能力和带宽,而不是把依赖都聚集在较少的几台服务器上. 点对点技 ...