VUE的模板分离写法。

1、第一种（不常用）

  1.     <script type="text/x-template" id="myCpm">
  2.         <div>
  3.             <h2>模板分离的写法</h2>
  4.         </div>
  5.     </script>

2、第二种

  1.     <template id="myCpm2">
  2.         <div>
  3.             <h2>模板分离的写法</h2>
  4.         </div>
  5.     </template>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <script src="../js/vue.js"></script>
  8. </head>
  9. <div id="app">
  10.     <cpn></cpn>
  11.     <cpn2></cpn2>
  12. </div>
  13.  
  14. <body>
  15.     <!-- 第一种 -->
  16.     <script type="text/x-template" id="myCpm">
  17.         <div>
  18.             <h2>模板分离的写法</h2>
  19.         </div>
  20.     </script>
  21.     <!-- 第二种 -->
  22.     <template id="myCpm2">
  23.         <div>
  24.             <h2>模板分离的写法</h2>
  25.         </div>
  26.     </template>
  27.  
  28.     <script>
  29.         Vue.component('cpn', { template: '#myCpm' })
  30.         // 第一种注册全局组件
  31.         let vm = new Vue({
  32.             el: '#app',
  33.             data: () => ({}),
  34.             components: {
  35.                 'cpn2': { template: '#myCpm2' }
  36.             }
  37.             // 第二种注册局部组件
  38.         })
  39.     </script>
  40. </body>
  41.  
  42. </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. 外置 tomcat 服务器设置

    外置 Tomcat 没这么太用, 今天在 windows  搭 xwiki  服务器, 比预期多花了点时间, 主要是 tomcat 环境变量没配对, tomcat 启动后闪退, 还没有日志. 最后定位 ...

  2. Flask 异步化

    web网站包含前端和后端, 异步处理可以用在前端, 也可以用在后端.  前端 jquery 进行 ajax 请求时, 可设置 async 属性为 true, 并为 success 设置一个 callb ...

  3. 分布式文件管理系统HDFS

    Hadoop 分布式文件管理系统HDFS可以部署在廉价硬件之上,能够高容错. 可靠地存储海量数据(可以达到TB甚至PB级),它还可以和Yam中的MapReduce 编程模型很好地结合,为应用程序提供高 ...

  4. arm-linux-gcc-5.4.0安装方法

    首先需要下载arm-linux-gcc的安装包 这里提供一个5.4.0版本的安装包,如有需要自行下载. 下载链接:https://pan.baidu.com/s/1prpdmVNWBFzg79OXQs ...

  5. 问题解决：import paddle.fluid出错：DLL load failed: 找不到指定的模块

    问题描述: 使用Pycharm编程,导入paddlepaddle库出错.即:import paddle.fluid出错:DLL load failed: 找不到指定的模块 解决方法: 补上缺失的DLL ...

  6. web-文件包含

    提示 构造payload ?file=flag.php 得到一串字符,那么我们用PHP伪协议尝试一下 构造payload ?file=php://filter/read=convert.base64- ...

  7. VMWare虚拟机提示：锁定文件失败，打不开磁盘...模块"Disk"启动失败的解决办法

    我出现该问题的原因: 昨天电脑一下子卡死,于是我就重启了电脑,重启之后我没有打开VMware虚拟机,结果第二天一上班打开VMware就发现出现了“锁定文件失败,打不开磁盘......模块"D ...

  8. appium Ui自动化调起应用点击

    appium Ui自动化调起微信并点击登录按钮的java代码(对的,就这么一丢丢). public class testWX { public static void main(String[] ar ...

  9. （day49）Django框架简介

    目录 一.Web框架 (一)本质 (1)动静态网页 (2)wsgiref模块 (3)jinja2模块 (4)手动实现思路 (二)python主流框架 (1)Django (2)flask (3)tor ...

  10. ASP.NET开发实战——（七）ASP.NET与数据库

    在之前的文章中介绍了使用ASP.NET MVC来开发一个博客系统,并且已将初具雏形,可以查看文章列表页面,也可以点击文章列表的其中一篇文章查看详情,这已经完成了最开始需求分析的读者的查看列表和查看文章 ...