vue中template的三种写法

第一种(使用模板字符串)早期字符串拼接年代

 <div id="app"></div>
 new Vue({
            el: "#app",
            template: '<div>                            <h1>{{message}}</h1>                        <div>',
            data: {
                message: '字符串拼接'
            }
        })

第二种(使用script元素)HTML5标准之前的写法

 <div id="app"></div>

    <script type="text/x-template" id="tem">
        <div>
            <h1>{{message}}</h1>
        </div>
    </script>
  new Vue({
            el: "#app",
            template: '#tem',
            data: {
                message: 'HTML5标准之前的写法,存在一定弊端(可自行google)                          之后HTML5发布的template元素弥补了此方式的缺点'
            }
        })

第三种(使用template元素)HTML5标准之后的写法【第二种的升级版】

 <div id="app"></div>

    <template id="tem">
        <div>
            <h1>{{message}}</h1>
        </div>
    </template>
  new Vue({
            el: "#app",
            template: '#tem',
            data: {
                message: 'HTML5中的template标签 ,注意:                          template是HTML5中的标签,                          不是自定义标签,                          也不是Vue中的组件                           MDN-docs:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template '
            }
        })

原文地址:https://www.cnblogs.com/liu-di/p/11437553.html

时间: 2024-11-05 15:58:53

vue中template的三种写法的相关文章

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

vue实例中中data属性三种写法

<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ book: "vue.js" } })</script> <script type="text/javascript">var app=new Vue({el:'#app',data:function(){book: "vue.js"}})</scri

C#中关于异步的三种写法

1 投票 IAsyncResult ar = d1.BeginInvoke(1, 3000, null, null); while (!ar.IsCompleted) class Program { static int TakesAWhile(int data, int ms) { Console.WriteLine("TakesAWhile started"); Thread.Sleep(ms); Console.WriteLine("TakesAWhile comple

js中斐波拉切数的三种写法;

js中斐波拉切数的三种写法: function factorial(num){ if(num <=1){ return 1; }else{ return num* factorial(num-1); } } console.log(factorial(5));//120 面这个函数的执行与函数名紧紧耦合在了一起,可以使用arguments.callee可以消除函数解耦 第二种(在严格模式下,访问这个属性会抛出TypeError错误) function factorial(num){ if(num

jquery 在页面中三种写法

jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x 更小.更快.如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了.jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可. 1 <script type=&q

js中回调函数的三种写法

回调函数的三种写法: 1.通过指针来调用 2.通过匿名函数来调用 3.定义与执行同时进行 // 通过指针来调用 function math(num1,num2,callback){ return callback(num1 , num2); } function aa(num1,num2){ return num1 + num2; } function bb(num1,num2){ return num1 - num2; } console.log( math(2,1,aa) ); // 3 c

vue定义data的三种方式与区别

var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2.第二种写法,函数. var app = new Vue({ el: '#yanggb', data: function() { return { yanggb: 'yanggb' } } }) 3.第三种写法,函数,是第二种写法的ES6写法. var app = new Vue({ el: '#yanggb', data() { return { yanggb:

HDU Today(三种写法)(最短路)

Description 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并在风景秀美的诸暨市?浦镇陶姚村买了个房子,开始安度晚年了. 这样住了一段时间,徐总对当地的交通还是不太了解.有时很郁闷,想去一个地方又不知道应该乘什么公交车,在什么地方转车,在什么地方下车(其实徐总自己有车,却一定要与民同乐,这就是徐总的性格). 徐总经常会问蹩脚的英文问路:"Can you h

总结 React 组件的三种写法 及最佳实践

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模