vue 组件,以及组件的复用
有时候代码的某一模块可能会经常使用到,那么完全可以把这一模块抽取出来,封装为一个组件,哪里需要用到的时候只需把模块调用即可 。参考vue官方 https://cn.vuejs.org/v2/guide/components.html
这里用一段代码
<div id="components-demo"> //注意组件名称不能驼峰命名,否则不渲染,也不报错
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>
因为这个点击按钮button会经常被用到,所以在这里要把这个button模块给抽取出来,做为一个组件
组件抽取
例:// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count:
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
methods:{
.......
}
})
注意:组件是可复用的VUE实例,所以他接收和new Vue实例同样的选项,如data
、computed
、watch
、methods
以及生命周期钩子等。
复用组件
例:
<div id="components-demo">
<button-counter></button-counter>
</div>
ok!完事儿
vue 组件,以及组件的复用的更多相关文章
- vue中如何编写可复用的组件?
原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- vue.js之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- vue.js之组件篇
Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...
- vue(3)—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue组件以及组件之间的通信
一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- vue中的组件化
组件化 1.定义全局组件 1.要在父实例中使用某个组件,组件必须在实例值之前定义2.组件其实也是一个Vue实例,因此它在定义时也会接收:data.methond.生命周期函数等3.不同的组件不会与页面 ...
随机推荐
- java基础(八)之函数的复写/重写(override)
复写的意思就是子类对父类的修改. 复写的条件: 1.在具有父子类关系的两个类当中:2.父类和子类各有一个函数,这两个函数的定义保持一致(返回值类型.函数名.参数列表) 还是老样子,3个文件来说明. P ...
- 深入delphi编程理解之接口(一)接口与类的异同及接口的声明和实现
一.抽象类与接口的异同 接口简单的理解可认为是一个抽象类,我们先定义一个抽象类和接口来对比之间的异同,代码如下: type IFormattedNumber = interface //定义接口 fu ...
- opencv:形态学梯度
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...
- A. DZY Loves Chessboard
DZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m columns. So ...
- Layui自定义模块的使用方式
为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 现在做的是登录功能.因此扩展模块名叫 login 使用layui ...
- Docker - 解决docker-machine create下载boot2docker.iso时慢的问题
解决步骤 从https://github.com/boot2docker/boot2docker/releases下载iso到~/.docker/machine/cache/里 docker-mach ...
- 让 typora和word一样好用
让 typora和word一样好用 :https://github.com/itcastWsy/typora_copy_images typora是一款支持实时预览的markdown编辑器,作者在使 ...
- Kettle-User Defined Java Class使用-大写转换
一.大写转换 (1)步骤(表输入-Java脚本-表输出) (2)配置 1)表输入 2)java脚本 public boolean processRow(StepMetaInterface smi, S ...
- 【原】docker-compose 管理docker的多容器配置
docker-compose管理docker的多容器配置,实现docker的自动化. version: '3.4' x-defaults: &defaults restart: unless- ...
- abp方法权限
一.自定义一个权限实体,也可以直接用abp的PermissionNames类 二.重写PermissionChecker中的IsGrantedAsync方法 public override async ...