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. Fundebug录屏插件更新至0.6.0

    摘要: 录屏插件的性能进一步优化,传输的数据体积大幅度减少. 录屏功能介绍 Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提 ...

  2. Python—基本数据类型

    核心数据类型: 数字(int整型.float浮点型.complex复数.bool布尔型) 字符串 str 列表(List) 元组(Tuple) 字典(Dictionary) 集合() 数字 整数,浮点 ...

  3. gyp --depth . -D component=shared_library -Ibuild/standalone.gypi build/all.gyp

    gyp --depth . -D component=shared_library -Ibuild/standalone.gypi build/all.gyp

  4. Apache（基于主机名）

    1.配置hosts文件 (1).hosts文件作用是定义IP地址与主机名的映射关系,即强制将某个主机名地址解析到指定的IP地址. (2)输入命令“vi /etc/hosts”,打开hosts文件,输入 ...

  5. Pwnable-blackjack

    游戏源码 http://cboard.cprogramming.com/c-programming/114023-simple-blackjack-program.html 打开之后是一个游戏 你有5 ...

  6. Pwnable-fd

    打开Ubuntu输入ssh fd@pwnable.kr -p2222,连接之后输入密码guest 之后就是ls -l看看里面的文件和权限,fd.fd.c.flag 看看fd.c的源码 #include ...

  7. php安全字段和防止XSS跨站脚本攻击过滤函数

    function escape($string) { global $_POST; $search = array ( '/</i', '/>/i', '/\">/i', ...

  8. Vue入门案例（二）

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.js ...

  9. shell的几个实战脚本例子（欠）

    如何让shell实现 可选择性执行 的功能 巡检内存使用率 批量创建用户 场景:公司想要做测试,需要10000个用户 数据库里查询学生成绩 #如何登录mysql数据库 #如何写sql对数据进行操作 # ...

  10. 2019 SDN上机第五次作业

    1.浏览RYU官网学习RYU控制器的安装和RYU开发入门教程,提交你对于教程代码的理解,包括但不限于: 描述官方教程实现了一个什么样的交换机功能? 实现将接收到的数据包发送到所有端口 控制器设定交换机 ...