el属性和template属性的关系

一、简介：

本篇文章主要介绍el属性和template属性的关系：一句话来概括，当el和template同时出现的时候，template中的代码会替代el挂载的DOM元素。

const app = new Vue({el: '#app',data: {message: 'hello',name: 'lzc'},template: `<div><h2>{{message}}</h2><button>按钮</button></div>`
});

看例子：

1. 这是index.html中，el属性挂载的DOM元素:

2. 这是template的模板代码：

最终浏览器的执行结果是：

由此可以验证我开头那句话，当el属性和template属性同时出现的时候，template属性中的代码会替代掉el属性挂载的DOM元素。

el属性和template属性的关系相关推荐

HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
什么是类，什么是对象，什么是属性，它们之间的关系（易懂）
1.什么是类点击 File-new-class出来的就是类, 起的名字就叫类名 public class Two { //public 公共的 class 类 Two类名 }//这就是类 2.什么是 ...
line-height属性与font-size属性的关系
在CSS样式中,关于文字的line-height属性和font-size属性从图中可以看出: 行高=行间距(两倍行半距)+文字大小文字的大小由font-size属性决定,行高由line-heigh ...
vue2知识点：组件的props属性、非props属性、props属性校验
文章目录 3.10props属性举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出 3.11props校验举例 3.12非props属性举例:定义子组件设 ...
vue属性_computed(计算属性)methods(方法)
目录 1.计算属性 2.计算方法 3.深入理解计算属性当需要使用大量逻辑时,若直接放在模板中会使得模板过重且难以维护,如下例 <div id="app">{{ mes ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...
Python 类—类属性（私有属性、公有属性、实例属性、局部变量）类方法（实例方法、静态方法）
1. 创建类类是对某个对象的定义,它包含有关对象动作方式的信息,包括它的名称.方法.属性和事件.类不存在于内存中,因此它本身并不是对象.当程序运行需要引用类的代码时,就会在内存中创建一个类的新实例, ...
html表单的常用属性有哪些,整理HTML5中表单的常用属性及新属性
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下 HTML5 新的表单属性 HTML5 ...
python类中的属性分为类属性和实例属性两种_python中类和实例如何绑定属性与方法示例详解...
前言 python类与实例的方法的调用中觉得云里雾里,思考之后将自己的想法记录下,一来加深自己理解,巩固自己记忆,而来帮助一些想要学习python的朋友理解这门抽象的语言,由于Python是动态语言, ...

el属性和template属性的关系

el属性和template属性的关系相关推荐

最新文章

热门文章