Vue之X-Templates的使用

柔情只为你懂 2023-10-18 09:12 43阅读 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 条评论，43人围观）

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

相关阅读

相关 Vue之X-Templates的使用

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

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

相关 Vue之v-model的使用

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

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

相关 vue之axios使用

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

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

相关 Vue之插槽使用

目录插槽简介示例代码运行结果 -------------------- 插槽简介 vue通过插槽和具名插槽可以向子组

桃扇骨/ 2022年05月19日 11:52/ 0 赞/ 211 阅读

相关 VUE全家桶之vuex的使用

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

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

相关 Vue之使用组件

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

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

相关 Vue之vue-resource插件使用

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

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

相关 vue之v-for的使用

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

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

相关 Vue之computed与watch的使用

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

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

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

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

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