Vue.js 使用script或template标签创建组件模板内容

为了使HTML代码和JavaScript代码是分离的，便于以后的阅读和维护，我们可以并建议使用<script>或<template>标签创建组件模板内容。


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>使用script或template创建组件模板内容</title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><script-component></script-component><hr><template-component></template-component></div><script type="text/x-template" id='component_script'><h4>这是一段使用"script"创建的组件模板内容。</h4></script><template id='component_template'><p>这是一段使用"template标签"创建的组件模板内容。</p></template><script type="text/javascript">new Vue({el: '#app',components: {'script-component': {template: '#component_script'},'template-component': {template: '#component_template'}}})</script></body>
</html>

Vue.js 使用script或template标签创建组件模板内容相关推荐

js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
vue.js实战第一篇第七章组件详解_组件通信
正向数据传递props <div id="app"><my-component message="来自父组件的数据"></my-c ...
【Vue.js 3.0源码】KeepAlive 组件：如何让组件在内存中缓存和调度？
自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训. 一.前言多个平行 ...
Vue.js（19）之封装calendar组件
效果需求 1.实现一个日历组件,如图: 2.显示某天的事项: 3.事项是模拟父组件请求接口返回的,数据格式如下: [{id: '232',date: '2019-06-01',info: '我要去吃 ...
vue.js学习笔记：audio标签实现钢琴弹奏
1.钢琴键盘布置 1.html代码,在键盘内绑定CSS类white.black,用于切换当该键按下松开时的样式,使用v-on监听鼠标事件: <div id="app"> ...
用vue.js写的一个瀑布流的组件
很少写文章,很乱,,见谅. 我所见过的瀑布流都是固定的几列,然后每一列包含若干个元素(图文元素),每一列的总高度都差不多. 所以我这个组件的功能就很简单,可以设置列数量,然后只要再写一个渲染元素的方法 ...
vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问题单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
Vue.js——60分钟组件快速入门（上篇）
组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTM ...

Vue.js 使用script或template标签创建组件模板内容

Vue.js 使用script或template标签创建组件模板内容相关推荐

最新文章

热门文章