Vue.js中的extend绑定节点并显示的方法
更新时间：2019年06月20日 17:22:52 投稿：laozhang
在本篇内容里小编给大家整理了关于Vue.js中的extend绑定节点并显示的方法以及相关知识点，需要的朋友们学习下。
在使用Vue.js时，可以使用Vue.extend()方法创建一个子类，传入参数包含了一个对象。其中，在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明，操作如下：
第一步，创建一个静态页面并引入vue.js文件，并在主体元素标签中插入一个div，设置id属性，如下图所示：
第二步，在<script></script>标签中调用Vue.extend()，设置template和data，如下图所示：
第三步，使用new关键字调用$mount()，将创建的类挂载到div元素上，如下图所示：
第四步，为了显示变量的字体等样式，需要添加相关的样式属性，这里使用:class，如下图所示：
第五步，保存代码并打开浏览器预览界面效果，可是控制台出现了错误警告，如下图所示：
第六步，调整template标签属性嵌套，去掉多层标签元素，只留一个div标签；class前面的:去掉，如下图所示：
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了 vue3 自定义指令详情，自定义指令分为全局和局部两种类型，大家并不陌生。今天我们就讲讲在 vue3 中，自定义指令定义、使用以及钩子函数都有哪些变化？,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了从组件封装看Vue的作用域插槽的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Vite是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具,下面这篇文章主要给大家介绍了关于如何使用Vue3+Vite+TS快速搭建一套实用脚手架的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化2021-10-10
map()函数是在JS的数组中定义的,它返回一个新的数组,下面这篇文章主要给大家介绍了关于vue中map()快速使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
Vue3中toRef、toRefs都是与响应式数据相关的，本文主要来给大家讲解一下Vue3中的toRef和toRefs的使用，感兴趣的朋友跟随小编一起看看吧2023-01-01
这篇文章主要介绍了安装vue-cli报错 -4058 的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue-cli3 中跨域解决方案，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
在vue3中新的组合式API中没有this,那我们如果需要用到this怎么办?下面这篇文章主要给大家介绍了关于Vue3中使用this的详细教程,需要的朋友可以参考下2023-07-07
最新评论