Vue基础2-挂载点、模板与实例

最新推荐文章于 2023-11-23 23:47:20 发布
最新推荐文章于 2023-11-23 23:47:20 发布
阅读量254 收藏 1
点赞数
分类专栏： Vue.js 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianjian_5201314/article/details/109218721
版权
本文深入探讨了Vue实例的挂载点及其作用，解释了挂载点如何作为Vue应用的起点，以及它如何处理挂载点内的模板内容。同时，介绍了模板的两种定义方式，即挂载点内部和外部通过`template`属性。通过实例说明Vue如何结合模板和数据生成最终显示的内容，并将其插入到挂载点中。
摘要由CSDN通过智能技术生成 
<!--挂载点、模板与实例之间的关系-->
<!--挂载点：vue实例里面el属性，后面id所对应的dom节点-->
<!--1.这个div标签实际上称之为vue实例的挂载点-->
<!--2.vue实例只会处理挂载点下面的内容-->

<!--模板：在挂载点内部的内容，我们都把它叫做模板内容-->
<!--1.模板可以写到挂载点内部，见方式1-->
<!--2.模板可以写到挂载点外部，Vue实例，template属性里面见方式2-->
// 实例
// 实例里面，指定挂载点，写上模板，Vue自动结合模板和数据生成最终展示的内容，把这个内容放到挂载点之中

挂载点

2.模板

实例：

 

MerryMe2020
关注
专栏目录
【vue】挂载点，模板与实例
Argent_
04-24 442
挂载点，模板与实例之间的关系 vue实例仅处理挂载点里面的内容（dom节点），挂载点内部的为模板。 vue实例 代码片. <!-- vue仅处理挂载点里面的内容（dom节点），挂载点内部的为模板。 --> <!-- 挂载点：指的是Vue实例里面的el属性对应的id所对应的dom节点 --> <!-- 模板：指的是挂载点内部的内容，可以写在挂载点内部，也可以...
vue2.x源码解析五——数据驱动--3.Vue 实例挂载的实现
小毛驴的博客
07-02 576
1.挂载到DOM 在上一节中我们知道，在Vue初始化的最后是挂载到DOM上的。 src/core/instance/init.js ： 在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM if (vm.$options.el) { vm.$mount(vm.$options.el) } ...
Vue2.x 源码 - 初始化：实例挂载（$mount）的实现
weixin_43299180的博客
11-04 1377
上一篇：Vue2.x 源码 - 初始化：stateMixin(Vue)、eventsMixin(Vue)、lifecycleMixin(Vue)、renderMixin(Vue) Vue 中是通过 $mount 实例方法来挂载 vm 的；然而这个方法在很多个文件里都有定义：src/platform/web/entry-runtime-with-compiler.js 、src/platform/web/runtime/index.js 、 src/platform/weex/runtime/index..
Vue2源码学习笔记 - 6.实例的挂载渲染
小问's blog
07-22 351
简而言之，在这个环节Vue就是把模板编译成render渲染函数，然后newWatcher实例化一个Watcher对象，在这个对象中调用updateComponent执行首次渲染。这个Watcher对象很特别，它还会在依赖的响应式数据变动时收到事件通知，然后又会去调用updateComponent重复渲染，如此反复循环不息。这个_update和_render在后面章节我们会详细研究学习，这里我们先只熟悉挂载渲染的整个流程即可。httpshttps。...
Vue学习笔记（一）挂载点 模板 实例
DF11G_0001的博客
07-03 156
Vue基本语法 <body> <div id=root> </div> <script> new Vue({ el:"#root", template:'<h1>Hello{{msg}}</h1>', data:{ msg:" World" } })
vue-admin-template 模板
03-28
- `main.js`：项目的入口文件，初始化 Vue 实例并挂载到 DOM。 - `axios` 或其他 HTTP 库：用于与服务器进行数据交互。 - `babel.config.js` 和 `vue.config.js`：Babel 和 Vue CLI 的配置文件。 在使用 vue-admin-...
vue源码分析-挂载流程和模板编译
yyzzabc123的博客
11-15 145
前面几节我们从new Vue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据渲染成为dom节点。如果直接按流程的先后顺序分析每个步骤的实现细节，会有很多概念很难理解。
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
例如，在 `Home.vue` 文件中，我们可以这样编写模板： ```html <!-- 幻灯内容 --> <swiper-slide>slide1</swiper-slide> <swiper-slide>slide2</swiper-slide> <!-- 以下控件元素均为可选 --> ...
vueAdmin-template-master.zip
12-01
- `main.js`：应用的入口文件，初始化Vue实例并挂载到DOM上。 2. `public`：公共目录，包含不经过webpack编译的静态资源，如favicon图标、index.html等。 3. `.gitignore`：指定git忽略的文件或目录，避免将不必...
Vue（二）-挂载点，单文件组件，指令
sunny_jiangsu的博客
11-19 642
1. 挂载点 <div id="app"></div> var vm = new Vue({ el: '#app',//将Vue实例与HTML元素关联起来，只有关联到Vue实例的html才享有vue的特性 components: { App }, template: '<App/>' }) 也可以写成 el: document.querySele...
vue -- 挂载点，模板和vue实例
萧墨的博客
07-14 1044
    最近在学习vue，在此记下笔记。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;vue&lt;/title&gt;    &lt;script src="https://cdn.bootcs
Vue实例挂载的实现
qq_44997147的博客
05-05 578
问题：src/core/instance/init.js的$mount是从哪来的？ 关键词：$mount、el、render、template 逻辑：mountComponent会完成整个渲染工作，最核心的2个方法：vm._render和vm._update。 Vue实例挂载的实现 也就是执行vm.$mount方法做了那些事情？ 以 Runtime + Compiler 版的 vue.js 为例，所以入口文件为src/platforms/web/entry-runtime-with-compiler.js
vue3vue2 全局变量的挂载
柑橘乌云_
05-11 736
在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用，第二种通过instence.appContext.config.globalProperties，是可以打印出来看的到。proxy打印出来是看不到自己定义的全局变量的，不晓得为什么，但是可以直接用proxy调用使用。getCurrentInstance只能在。目前这两种使用方式暂时没发现还有什么区别。来获取挂载到全局的变量或者方法。vue2.x挂载全局是使用。的形式来挂载，然后通过。
Vue2 中组件的本质、组件的实例化、组件实例的挂载
f18855666661的博客
10-11 2008
这篇博客的内容是讲讲在 Vue2 中，组件在底层的本质。在这里，直接抛出结论：组件的本质就是一个个的构造函数，这些函数以组件的定义 options 对象为参数，在 Vue2 中，最顶级的组件就是我们从 vue.js 中导入的 Vue 函数，而子组件是 Vue 底层通过 extend 函数创建出来的 VueComponent 函数。通过 new 这些组件的构造函数，我们可以创建出组件实例。
Vue 2.0源码分析-实例挂载的实现
最新发布
越陌度阡
11-23 1056
这段代码首先缓存了原型上的 $mount 方法，再重新定义该方法，我们先来分析这段代码。首先，它对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上。接下来的是很关键的逻辑 , 如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法。
跨域的几种解决方案
Erictezx的博客
12-21 172
1.jsonp 【前端后端实现】 jsonp: 利用<script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。 JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。 声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。 创建一个<scrip..
vue挂载点、模板、实例
undytk的博客
03-28 1187
实例 vue的实例就是通过函数创建的new Vue({}) 挂载点 挂载点就是vue的实例要去处理的dom节点 模板 vue实例默认的模板就是挂载点的内部内容 如果我们指定了了模板，就会覆盖默认的模板而使用指定的。如下图，我们通过template指定了模板，则会覆盖默认的。 综上 实例通过id指定标签变成挂载点，而挂载点下的内容默认变成了实例中的模板。 参考 百度 ...
VUE学习-挂载点、模板、实例、数据、事件、方法、常用标签内指令
迷途中的一片羽毛博客
10-10 549
挂载点 一个html标签id与一个vue里面el值一致，则这个html标签就是vue实例的挂载点，例如下图： div的id是root，new Vue里面el的值是“#root”，则root这个标签就是Vue实例的挂载点。挂载点的作用就是Vue实例里面的方法、数据等只会处理挂载点范围内的元素。 模板 挂载点里面的内容都叫模板，模板可以直接写在挂载点里面如下图一，也可以写在Vue实例里面的...
vue 使用 vue-video-playe 实例
07-10
可以使用vue-video-player来实例化一个视频播放器。首先，你需要安装vue-video-player包。你可以通过以下命令来安装它： ```bash npm install vue-video-player --save ``` 安装完成后，在你的Vue组件中引入vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值