Vue之X-Templates的使用

柔情只为你懂 2023-10-18 09:12 44阅读 0赞

如果你没有使用webpack、gulp等工具，假如组件的template的内容很冗长，如果都在JavaScript里面拼接脚本，效率是非常低的，因为不能像写HTML那样舒服。Vue提供了另外一种定义模板的方法：

在<script>标签里使用text/x-template类型，并且指定一个id，将这个id赋值给template。

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue之X-Templates的使用</title>
     </head>
     <body>
      <div id="app">
      <my-component></mycomponent>
      <script type="text/x-template" id="my-component">
       <div>这是组件的内容</div>
      </script>
     </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     Vue.component('my-component',{
      template:'#my-component'
     });
     var app = new Vue({
      el:'#app'
     })
    </script>
     </body>
    </html>

![Image 1][]

![70][]

在<script>标签里，你就可以写HTML代码了，不用考虑换行等问题。

[Image 1]: 
[70]: https://img-blog.csdn.net/2018092418232376?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之X-Templates的使用

如果你没有使用webpack、gulp等工具，假如组件的template的内容很冗长，如果都在JavaScript里面拼接脚本，效率是非常低的，因为不能像写HTML那样舒服。V

柔情只为你懂/ 2023年10月18日 09:12/ 0 赞/ 45 阅读

相关 Vue之v-model的使用

案例：先看效果图： ![在这里插入图片描述][20210207162019855.jpg_pic_center] `核心代码如下：` <body>

蔚落/ 2022年10月29日 01:49/ 0 赞/ 135 阅读

相关 Ext.XTemplate 模板

本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇，但是我个人不是很喜欢那种html混编C\的方式，仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成

悠悠/ 2022年08月25日 14:57/ 0 赞/ 4 阅读

相关 vue之axios使用

一、安装 1、利用npm安装`npm install axios --save` 2、利用bower安装`bower install axios --save`

雨点打透心脏的1/2处/ 2022年06月13日 00:14/ 0 赞/ 277 阅读

相关 VUE全家桶之vuex的使用

前言在vue项目中，如果我们涉及到兄弟组件间的传值（及多个组件共享一个状态）。遇到这种情况使用vuex来解决是目前比较流行的解决方案。虽然在vuex官方文档中详细介绍了

深藏阁楼爱情的钟/ 2022年05月01日 12:14/ 0 赞/ 227 阅读

相关 Vue之使用组件

创建一个组件Header.vue <template> <div class="header"> 这是header

超、凢脫俗/ 2022年04月22日 10:52/ 0 赞/ 216 阅读

相关 Vue之vue-resource插件使用

vue-resource 是实现Vue异步加载的库 vue-resource特点 1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB

Myth丶恋晨/ 2022年04月18日 05:45/ 0 赞/ 263 阅读

相关 vue之v-for的使用

vue之v-for的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

悠悠/ 2022年04月05日 06:22/ 0 赞/ 157 阅读

相关 Vue之computed与watch的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

电玩女神/ 2021年11月29日 17:06/ 0 赞/ 323 阅读

相关 Vue学习之过滤器的使用

过滤器概念： Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添

旧城等待，/ 2021年11月29日 04:46/ 0 赞/ 372 阅读