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. Xamarin.Forms iOS 真机测试 打包

    等着打包过程中记录一下如何打一个debug包到真机上测试的流程1. 需要在XCode中创建一个新的项目,选择iOS==>Single View App,点击Next 2. 在新的弹框中需要App ...

  2. BouncyCastle配置

    1.BouncyCastle简介 BouncyCastle是一款开源的密码包,其中包含了大量的密码算法,使用BouncyCastle的目的就是为了扩充算法支持 下载地址最新加密组件包 http://w ...

  3. Ubuntu18.04 安装TensorFlow 和 Keras

    TensorFlow和Keras是当前两款主流的深度学习框架,Keras被采纳为TensorFlow的高级API,平时做深度学习任务,可以使用Keras作为深度学习框架,并用TensorFlow作为后 ...

  4. c语言程序设计第1章

    开始记录自己学习c语言的过程,选用的教材是浙江大学何钦铭.颜晖编写的<c语言程序设计>(第3版). 一.第一个程序 /*求阶乘问题.输入一个正整数n,输出n!*/ #include< ...

  5. Avalon的小故事 (1)

    我:这个游戏真没意思,我为什么要玩这种东西 A:你渡过了前期才能发现这个游戏的乐趣 我:那我为什么不换一个游戏玩呢?换一个开头就让人欲罢不能的游戏? B:你这是逃避!你个懦夫! 我:我连自己选择游戏的 ...

  6. 游戏引擎架构 (Jason Gregory 著)

    第一部分 基础 第1章 导论 (已看) 第2章 专业工具 (已看) 第3章 游戏软件工程基础 (已看) 第4章 游戏所需的三维数学 (已看) 第二部分 低阶引擎系统 第5章 游戏支持系统 (已看) 第 ...

  7. 《一起学mysql》1

    自从达内毕业后就没用过mysql,一直用的hive,hdfs 存储数据,最近突然又接触到了关系型数据库.本想随便从网上 找个教程看看,但是都不是很满意,pdf看着又难受,还是自己个儿写个笔记吧.   ...

  8. LeetCode 94：二叉树的中序遍历 Binary Tree Inorder Traversal

    题目: 给定一个二叉树,返回它的中序 遍历. Given a binary tree, return the inorder traversal of its nodes' values. 示例: 输 ...

  9. VMware 中安装kvm虚拟机

    环境准备: 安装vmware时需要自定义安装-开启虚拟化技术   安装成功之后就可以继续进行了. 1 查看CPU是否支持KVM egrep 'vmx|svm' /proc/cpuinfo --colo ...

  10. axios 源码解析(下) 拦截器的详解

    axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器    ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...