Vue之X-Templates的使用

如果你没有使用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>

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

Vue之X-Templates的使用相关推荐

idea vue.js插件安装
Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...
IntelliJ IDEA创建第一个Vue工程
1.1 基本概念(基本概念来自网络学习) 1.1.1 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对C ...
python django+vue搭建自动化测试平台
python环境的搭建参考我以前的文章 https://blog.csdn.net/saberpan/article/details/84783693 django的安装推荐所有cmd命令都在cmd ...
element ui框架（准备）
和vue代码配合最好的ui框架,基本上就是element ui了.做前端开发的同学,只要用到vue,就会使用到element ui.这和bootstrap有点相像,早期的时候用到jquery,基本就会 ...
vue 报错：Templates should only be responsible for mapping the state to the UI. Avoid placing tags with
今天又是踩坑的一天今天使用vue写后台管理系统时,控制台一直报错:Templates should only be responsible for mapping the state to the ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
如何在require中使用VUE
现在网上抄的沸沸扬扬的VUE看来是个很NB的东西啊,看了一下,确实相对于angular1来说简化了不少东西,性能方面也比angular1要好很多,所以现在用的人越来越多了,于是作为前端,学习一下新东西 ...
9102年webpack4搭建vue项目
前言首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客.因为公司使用vue比较多,构建vue项目使用vue-cli ...

Vue之X-Templates的使用

Vue之X-Templates的使用相关推荐

最新文章

热门文章