vue - 制作模板
1. 选项模板
2. template模板
3. script标签模板
<!-- 选项模板 -->
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Vue入门之组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body> <div id="app">
</div> <script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template: `<h1 style="color:red">我是选项模板</h1>`
});
</script>
</body> </html>
<!-- template模板 -->
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<template id="demo2">
<h2 style="color:red">我是template标签模板{{message}}</h2>
</template>
</div> <script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template: '#demo2'
});
</script>
</body> </html>
<!-- script标签模板 -->
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
</div> <script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script> <script type="text/javascript">
// 实例化
new Vue({
el: '#app',
data: {
message: 'hello'
},
template: '#demo3'
});
</script>
</body> </html>
vue - 制作模板的更多相关文章
- Vue2.0 【第二季】第5节 Template制作模板
目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue：模板&渲染函数学习
模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- VUE：模板语法（小白自学）
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
随机推荐
- hashMap原理剖析
在日常开发中,hashMap应该算是比较常用的一个类了,今天就来学习一下hashMap的实现原理. 概念 1.什么时hash? 书面定义:就是把一个不固定长度的二进制值映射成一个固定长度的二进制值. ...
- Linux安装apache服务
1.通过yum包下载安装httpd yum -y install httpd*(等待安装) 到下面就安装完毕 2.启动apache服务 service httpd restart 3.现在就可以查看a ...
- luogu P2619 [国家集训队2]Tree I
题目链接 luogu P2619 [国家集训队2]Tree I 题解 普通思路就不说了二分增量,生成树check 说一下坑点 二分时,若黑白边权有相同,因为权值相同优先选白边,若在最有增量时出现黑白等 ...
- HDU 5514 Frogs（容斥原理）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5514 [题目大意] m个石子围成一圈,标号为0~m-1,现在有n只青蛙,每只每次跳a[i]个石子, ...
- mysql数据库文件简介和应用
存放目录: 用 whereis my.cnf 查看mysql配置文件的目录,查看my.cnf的datadir参数可找到mysql数据库文件的存放目录. 本机存放的目录为/var/lib/mysql,进 ...
- 关于利用ajax时，设置访问延时的方法
在实际开发中应使用后端的延时方法,一般为sleep,可以设置延时几秒后返回给前端请求的数据 众所周知,在js中,并不存在例如C++或者JAVA.PHP中的sleep延时方法, 目前仅有的所谓延时方法S ...
- 反激 (Flyback) 控制器 -- LTC3803
LTC3803 - 采用 ThinSOT 封装的恒定频率.电流模式.反激式 DC/DC 控制器 特点 VIN 和 VOUT 仅受限于外部元件 可调斜率补偿 内部软起动 200kHz 恒定频率操作 ±1 ...
- Android中MVC模型（复合模式）
mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...
- B+树索引
结构上 B树中关键字集合分布在整棵树中,叶节点中不包含任何关键字信息,而B+树关键字集合分布在叶子结点中,非叶节点只是叶子结点中关键字的索引: B树中任何一个关键字只出现在一个结点中,而B+树中的关键 ...
- Linux环境redis集群搭建
集群后tomcat context.xml的配置 <!-- 集群配置--> <Valve className="com.radiadesign.catalina.sessi ...