Vue组件 朱雀 2023-06-25 16:27 4阅读 0赞 注意:组件的最外层只能有一个标签,不能是多个同级标签 # 方式一:通过Vue.extend # <body> <div id="app"> <!-- 使用组件,组件名称含有驼峰时,需要使用-代替 --> <my-com1></my-com1> <mycom2></mycom2> <mycom3></mycom3> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 创建组件第一种方式:通过Vue.extend var com1 = Vue.extend({ template: "<h1>Vue.extend创建组件</h1>" }) // 名称带有驼峰 Vue.component("myCom1", com1) // 普通名称 Vue.component("mycom2", com1) // 连写 Vue.component("mycom3", Vue.extend({ template: "<h1>Vue.extend创建组件</h1>" })) var vue = new Vue({ el: "#app" }) </script> </body> # 方式二 # <body> <div id="app"> <mycom4></mycom4> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 创建组件的第二种方式 Vue.component("mycom4", { template: "<h1>Vue.component创建组件</h1>" }) var vue = new Vue({ el: "#app" }) </script> </body> # 方式三 # <body> <div id="app"> <mycom5></mycom5> </div> <template id="temp1"> <div> <p>通过template元素创建组件</p> <input type="button" value="计数器" @click="add" /> <p>{ { count}}</p> </div> </template> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 创建组件的第三种方式,这种方式书写template时含有代码提示,推荐 Vue.component("mycom5", { template: "#temp1", // 组件的data,必须是一个function,返回一个对象,原因:如果data直接返回一个对象,组件重复使用时,会共享这个data返回的对象,一个组件的变化会影响其他组件 data: function () { return { count: 0 } }, // 组件的method methods: { add: function () { this.count++ } } }) var vue = new Vue({ el: "#app" }) </script> </body> # 私有组件 # <body> <div id="app"> <login></login> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var login = { template: "<h1>私有组件</h1>" } var vue = new Vue({ el: "#app", // 私有组件,只能在id为app的标签下使用 components: { login } }) </script> </body> # 使用render渲染组件 # <body> <div id="app"> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var login = { template: "<h1>登录组件</h1>" } var vue = new Vue({ el: "#app", // createElements是一个方法,调用它能够把指定的组件模板渲染为html结构 render(createElements) { // 这里return的结果,会替换页面中el指定的那个容器 return createElements(login) } }) </script> </body>
相关 Vue 组件 首先,我们还是先创建一个vue实例,很熟练了,没难度。 <div id="app"></div> <script> let vm = 落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 419 阅读
相关 vue组件 全局组件 <!-- 全局组件定义 --> Vue.component('todo-list',{ template:"<li>{ 左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 399 阅读
相关 vue组件 定义全局组件的三种方式 方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词,不是实例对象--> <m 落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 442 阅读
相关 VUE组件 介绍几种VUE组件定义方法 定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属 ゞ 浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 423 阅读
相关 VUE组件 VUE Component 一、概述 1. 作用 扩展HTML元素,封装可重用的代码。在需要使用的地方引用组件。 二、VUE前情回顾 使用: 1. 雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 413 阅读
相关 vue组件 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对 系统管理员/ 2022年01月28日 08:43/ 0 赞/ 473 阅读
相关 vue组件 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件 本是古典 何须时尚/ 2022年01月05日 07:25/ 0 赞/ 464 阅读
相关 Vue组件 一、介绍 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 「爱情、让人受尽委屈。」/ 2021年10月23日 14:50/ 0 赞/ 538 阅读
相关 Vue组件 为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性,让代码可以复用。 组件的用法 组件在使用前先需要注册。注册分为两种方式:全局注册和局 叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 516 阅读
相关 Vue组件 Vue组件 1. 什么是组件 1. 组件的概念:组件即自定义控件,是Vue.js最强大的功能之一 2. 组件的用途:组件能够封装可重用代码,扩展html标签功能 ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 717 阅读
还没有评论,来说两句吧...