模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板

使用el选项指定模板

<!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>
</head><body><div id="app"><h1>{{greeting}}</h1><input type="text" v-model="greeting"></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {greeting: 'Hello Vuejs'}});/* el 选项只是用来指定模板的挂载点template 选项用来指定要挂载的模板。如果没有指定（template 选项）要挂载的模板，则使用挂载点内部的HTML作为实例的模板。*/</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>
</head><body><div id="app"></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',template: '<div><h1>{{greeting}}</h1></div>',data: {greeting: 'Hello Vuejs'}});/* el 选项只是用来指定模板的挂载点template 选项用来指定要挂载的模板。如果指定了 template 选项，则会将模板内容挂载到 el 选项指定的挂载点，此时，挂载点会被模板内容替换掉。*/</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>
</head><body><div id="app"></div><script src="./vue.js"></script><!-- 独立模板 --><script id="mytemplate" type="x-template"><section><h1>{{greeting}}</h1><h1>{{greeting}}</h1></section></script><script>const app = new Vue({el: '#app',template: '#mytemplate',data: {greeting: 'Hello Vuejs'}});/*template 选项指定指定模板内容时，除了写在行内，还可以单独写到一个 type 属性为 x-template 的 <script> 元素中。然后 <script> 元素的 id 与 template 选项关联起来。注意，模板内容必须要有一个根元素*/</script>
</body></html>

使用render选项指定要挂载的模板

<!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>
</head><body><div id="app"></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',render: function (createElement) {return createElement('h1', this.greeting)},data: {greeting: 'Hello Vuejs'}});/*除了使用 template 选项指定指定模板内容以为，还可以使用 render() 方法动态地创建模板内容。*/</script>
</body></html>

模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板相关推荐

html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
C++对象模型9——临时对象的生命周期、模板及实例化分析、内联函数
一.临时对象的生命周期 T c=a+b 假设T是一个类型,那么上述代码执行时,首先会产生一个临时对象用来存放a+b的结果(拷贝初始化临时对象),然后用该临时对象拷贝初始化c,最后临时对象被释放.如果开 ...
C++(13)--函数的进阶：内联、传递引用、参数默认值、重载、函数模板
模块化编程--函数的进阶 1.内联函数 1.1 inline基本情况 1.2 inline 的前世今生-带参的宏替换 2.传递引用(重点) 2.1引用.理由.注意事项 2.3 交换两个变量的数值 3. ...
函数模板、内联函数
函数重载就是有相同的函数名但参数的个数或类型不同从而根据不同的参数个数和参数类型来调用相应的方法. 我们发现函数重载只是解决了函数命名的问题,但函数体虽然相同我们还是要重复的写,为了解决这 ...
微信小程序开发实战基础二、wxml模板，动态更新内联样式
1.模板使用 1.wxml中创建模板 <template name="msgItem"> <view> <text> {{index}}: {{ ...
Django学习系列之五：Django 的模板的render替换render_to_string用法及templates模板查找路径顺序
Django学习系列之五:Django 的模板的render替换render_to_string用法及templates模板查找路径顺序 1.Django 的模板的render替换render_to_ ...
iangularjs 模板_在AngularJS中使用内联模板
我想加载一个内联视图模板. 我将模板包装在类型为的脚本标签中text/ng-template,并将ID设置为temp1.html.这是我的模块配置 learningApp.config(functio ...
MD61计划独立需求导入BAPI【按日维度/动态模板/动态字段】
实现按照选择屏幕输入区间下载动态模板,根据上传模板中实际日期列名,创建对应日期的计划独立需求. 下载效果: 上传效果: 完整代码如下,稍加修改可直接复用: *&--------------- ...
table+内联样式写邮件模板
兼容outlook,需要table加内联样式,,大概如下: <table border="0" cellspacing="0" cellpadding=& ...

模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板

使用el选项指定模板

使用template选项指定要挂载的模板-内联模板

使用template选项指定要挂载的模板-独立模板

使用render选项指定要挂载的模板

模板---使用el选项指定模板/使用template选项指定内联模板/使用template选项指定独立模板/使用render选项指定要挂载的模板相关推荐

最新文章

热门文章