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. [PHP] time_wait与长连接短连接

    服务端上查看tcp连接的建立情况,直接使用netstat命令来统计,看到了很多的time_wait状态的连接.这些状态是tcp连接中主动关闭的一方会出现的状态.该服务器是nginx的webserver ...

  2. nginx 配置实例-负载均衡

    1.实现效果 (1)浏览器地址栏输入地址 http://www.123.com/edu/a.html,负载均衡效果,平均 8080 和 8081 端口中 2.准备工作 (1)准备两台 tomcat 服 ...

  3. kettle教程---kettle作业调度，根据更新时间增量更新

    本文接上一篇,只写到读取日志.在平时工作当中,会遇到这种情况,而且很常见.比如:增量抽取(每隔2个小时抽取截至到上次抽取时间的记录) 本文中会用到作业,先来熟悉下作业的概念 简单地说,一个转换就是一个 ...

  4. tomcat快速入门

    简介 Tomcat 是什么 Tomcat 是由 Apache 开发的一个 Servlet 容器,实现了对 Servlet 和 JSP 的支持,并提供了作为Web服务器的一些特有功能,如Tomcat管理 ...

  5. TeamyinyinFish-> 测试报告

    测试人员 1. 姓名:鱼嘤嘤 2. 年龄: 21 3. 职业: 大三学生 4. 感情状况: 单身 用户故事 软件工程课上,老师想要他们组实现一个小组项目,鱼嘤嘤原本想摸鱼,但是转念一想觉得 还是需要好 ...

  6. Monkey小白入门篇

    一.monkey简介 中文名:猴子 职业:压力测试小工具 用途:对待测Android应用程序进行压力测试,测试app是否会crash Android官方描述: The Monkey is a prog ...

  7. vue.js 使用 v-text 和 v-html

    v-text:转义输出 v-html:不转义输出 值得一说的是 如果直接使用{{html}}的话会直接转义 看代码: <!doctype html> <html lang=" ...

  8. 5G最新套餐以及对应限速标准

    原文: http://news.mydrivers.com/1/654/654529.htm 再过两天,国内的5G就要正式运营了,中国移动.联通.电信的5G预约用户亿元超过千万,三家运营商的5G套餐费 ...

  9. Ubuntu 14.04 安装mysql

    Ubuntu 14.04 没有mysql5.7的源,需要连接外部资源下载安装. wget http://dev.mysql.com/get/mysql-apt-config_0.8.1-1_all.d ...

  10. 在Ubuntu18.04.2LTS上安装视频播放器smplayer/vlc

    在Ubuntu18.04.2LTS上安装视频播放器smplayer/vlc 一.前言 在Ubuntu上的视频播放器质量很差,没有解码器,非常的不方便,于是我们需要手动去安装适合我们的播放器,比如smp ...