福建省建设人才市场网站,成都爱站网seo站长查询工具,百度云免费空间,网站建设费用分几年摊销大家好我是前端寄术区博主PleaSure乐事。今天了解到了Vue当中有关el的两种写法#xff0c;记录下来与大家分享#xff0c;希望对大家有所帮助。 方法一
解释
第一种方法我们直接用new创建并初始化一个新的 Vue 实例#xff0c;并定义了 Vue 实例的数据对象#xff0c;在给…大家好我是前端寄术区博主PleaSure乐事。今天了解到了Vue当中有关el的两种写法记录下来与大家分享希望对大家有所帮助。 方法一
解释
第一种方法我们直接用new创建并初始化一个新的 Vue 实例并定义了 Vue 实例的数据对象在给出的例子当中我们将message的值指定为pleasure。当message数据改变时Vue 将自动更新页面上与这些数据相关的元素。比如我改成csdn那么在网页中也会将显示hellocsdn的字样。
在Vue实例的构造函数中直接指定el选项时Vue会在实例创建完成后立即查找并挂载到指定的Dom元素上。这种方式简洁明了适用于大多数情况特别是在单页面应用SPA中
代码与效果
bodydiv idrooth1hello,{{message}}/h1/divscript srcnode_modules/vue/dist/vue.js/scriptscriptnew Vue({el:#root,data(){return {message:pleasure}}})/script
/body 方法二
解释
如果我们不使用el与new的vue实例进行配合那么我们应该怎么做呢此时如果我们删除el会出现这样的效果 此时我们就需要拿出mount方法进行对el的等效替代。使用mount方法允许延迟挂载 Vue 实例。这意味着可以在实例创建之后根据应用的逻辑或条件来决定何时以及挂载到何处。代码实例如下
代码与效果
bodydiv idrooth1hello,{{message}}/h1/divscript srcnode_modules/vue/dist/vue.js/scriptscriptconst v new Vue({//el:#root,data(){return {message:pleasure}}})v.$mount(#root)/script
/body 使用mount方法可以在以下方面提供更多优势
动态决定挂载点如果挂载点是动态生成的或是依赖于某些条件使用mount可以提供更多的灵活性。异步加载或延迟加载在某些情况下你可能希望等到某些异步操作完成后再挂载实例比如数据预加载完成或者在服务器端渲染SSR环境中等待服务器响应后再挂载到客户端。可复用的组件如果你正在开发一个可复用的 Vue 组件使用mount可以让使用者决定如何以及何时挂载这个组件。
此时我们甚至可以配合其他代码进行书写比如我们可以让代码延迟1秒再发生如下 scriptconst v new Vue({//el:#root,data(){return {message:pleasure}}})setTimeout((){v.$mount(#root)},1000)/script
这样代码在1秒后才会显示pleasure而非一开始就直接显示pleasure。 今天对vue当中el的两种书写方式的分享就到这里希望对大家有所帮助如果对您有帮助希望您可以留下点赞投币与收藏这对我真的很重要非常感谢
