Vue挂载点、模版、实例之间的关系

已于 2022-03-30 10:49:42 修改
阅读量479 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-02-02 22:41:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66805177/article/details/122772862
版权

vue挂载点：el属性中id对应的Dom节点

模版：挂载点里的内容；也可template方式插入内容

实例：new Vue({})

之间关系：vue实例绑定到挂载点后会自动对模版和数据进行处理，生成最终要展示的内容

代码示例：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkBtMF82NjgwNTE3Nw,size_20,color_FFFFFF,t_70,g_se,x_16

訫鸳鸯蝴蝶梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 组件的挂载与父子组件的传值实例
11-19
1：将需要挂载的组件放置在component之中 2：全局挂载在main.js之中 import Vue from 'vue' import App from './App.vue' import getTime from './component/child/getTime' //全局注册 整个项目的组件都可以使用 //注册给整个vue 对象 //引入需要注册的全局组件 //在vue类的方法 component里面进行注册 Vue.component('v-times',getTime); Vue.component('v-times',{ template:"<div>{{msg}}
vue 根实例 template 和 组件 template
weixin_41796631的博客
04-05 2573
1. 根实例 template 和 组件 template 是一样的，都只能有一个根元素（根元素指的是包含在最外层的元素）； new Vue({ el: '#app', store, components: {App, zujian}, //注册这两个组件 template: '<zujian></zujian>' }) 2. 优先级：根实例 temp...
vue组件与vue实例的关系
weixin_34189116的博客
10-08 1435
vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：关系：vue构造->vue组件->vue实例也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：<script> //vue构造 Vu...
vue项目中，index.html和main.js和App.vue的关系
meteorshower2013的博客
08-07 1956
总结： index.html是主渲染文件，mian.js是桥梁，App.vue是模块。 main.js中创建的vue对象，通过el的值与index.html的元素产生关联。 vue中的template替换index.html的元素 vue中的components替换template，template的值需要是 ...
Vue项目结构中，index.html, main.js 和App.vue的关系
Andrew_SJ的博客
07-12 1745
index.html—主页，项目入口 App.vue—根组件 main.js—入口文件 原文链接：Vue项目结构中，index.html, main.js 和App.vue的关系 index.html是入口，App.vue用来写初始的模板代码，main.js用来New Vue对象，同时将App.vue中的模板内容挂载到index.html中。 在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，.
Vue框架-01-了解并使用Vue
paiidds的博客
09-26 455
初学 Vue
Vue中index.html、main.js、App.vue，之间关系
JavaAndLI的博客
09-15 2665
使用Vue 提供的官方的 CLI和构建工具webpack生成的vue项目，对于其中的main.js，App.vue，index.html这三文件之前的关系不是很明确，现在记录如下
Vue学习（一）——挂载点、模板、实例之间的关系
Bambi12的博客
11-09 425
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;Vue入门&amp;lt;/title&amp;gt; &amp;lt;scr
从0开始学Vue
11-29
利用new Vue()创建一个Vue实例 我们可以先初始化一个html页面，然后我们需要引入Vue 的 js 文件。引入的方式有很多，我们可以在script中引入Vue的cdn，或者去官网上下载Vue的min.js，或者用 npm 安装一个Vue的依赖...
详解Vue 实例中的生命周期钩子
12-12
在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。 Vue 实例化...
详解vue-router和vue-cli以及组件之间的传值
12-10
首先简单介绍使用vue-router的四个基本步骤：（为了方便演示，所有代码都写...使用的是webpack-simple模板，项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西. 三、安装项目
vue生命周期实例小结
01-19
每个Vue实例都存在完整的生命周期，经历从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。如下图所示 钩子函数 vue的完整生命周期可分为三个阶段：初始化阶段、运行阶段和销毁阶段。共...
Vue的学习（2.0）——Vue实例＋模板语法
qq_48741976的博客
06-29 286
所有的 Vue 组件都是 Vue 实例
后端学习Vue前端框架(三)：Vue 对象实例及模板语法
八一菜刀的专栏
03-25 439
初次看Vue的对象实例官网文档说明,第一感觉就是这就好比后端的Spring容器框架 只是后端的Spring容器接管的对象是Bean,并提供可插拔式的插件管理机制,可以很方便的和第三方框架进行整合 而Vue则差不多,一个Vue对象实例接管的Dom对象,创建Vue对象实例后,所有的计算属性、事件、数据绑定等复杂操作都可以在Vue对象实例中事先定义好，然后再DOM模板中绑定相应的事件、已经属性值即可 V...
hualinux 进阶 vue 1.4：挂载点、模板、实例的关系
hualinux（阿华的linux）
04-06 129
目录 一、挂载点 1.1挂载点的概念 1.2挂载点的作用 二、模板template 前章说vue实例的两个重要参数el挂载点和data数据显示，现在再说挂载点、模板、实例的关系。 一、挂载点 1.1挂载点的概念 引用《hualinux 进阶 vue 1-1.2：使用webStrom创建vue例子（标签引入）》中的代码来说明 <div id="root">hello {{ msg }}</div> <script> new Vue({...
VUE入门到实战--Vue实例和模板语法
weixin_37968345的博客
10-09 3809
1、Vue实例 1、每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。 2、实际上每个组件都是一个V...
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 294
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 199
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 346
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
Vue 实例是如何挂载到元素的
06-06
Vue 实例会将模板编译成渲染函数，并将其渲染到挂载的 DOM 元素上。 4. Vue 实例会根据数据的变化来更新 DOM，从而实现响应式的数据绑定。 总之，`app.mount('#app')` 的作用是将 Vue 实例与指定的 DOM 元素进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值