TZ_16_Vue定义全局组件和局部组件
1.定义全局组件
我们通过Vue的component方法来定义一个全局组件。
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件,两个参数:1,组件名称。2,组件参数
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
</script>
2.定义局部组件
不是定义在 Vue.component()内部的。而是定义成不同变量
const counter={
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data:function () {
return {
count:0
}
}
};
但是和vue没有任何关联需要申明到Vue实例的内部
var app = new Vue({
el:"#app",
data:{},
components:{
counter:counter
}
})
使用方法和全局组件一致
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter >
</div>
TZ_16_Vue定义全局组件和局部组件的更多相关文章
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- vue(3)—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
随机推荐
- BP 算法之一种直观的解释
0. 前言 之前上模式识别课程的时候,老师也讲过 MLP 的 BP 算法, 但是 ppt 过得太快,只有一个大概印象.后来课下自己也尝试看了一下 stanford deep learning 的 wi ...
- MYSQL随笔心得1
cmd链接数据库命令: 输入密码进入 显示全部的数据库: 退出服务器连接,还有/p quit 非关系型数据库:NOSQL,not only sql 不仅仅是SQL 代表:redis,mongodb
- 迅雷 API 接口说明文档 -调用迅雷自动下载
我们可以利用迅雷提供的开放API接口来自动下载文件.详细的接口说明大家可以看下面的. 先要说明一下的就是 迅雷的API接口是用 .com 来调用的 首先就是脚本了,各种语言写法不同,我这里提供用vbs ...
- 12DUILib经典教程(实例)
Duilib经典实例教程:1基本框架:一个简单的Duilib程序一般是下面这个样子的:://Duilib使用设置部分:#pragmaonce:#defineWIN32_LEAN_AND_ME:#def ...
- 简单科普下hosts文件原理与制作
简单科普下hosts文件原理与制作 hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DN ...
- 左神算法进阶班6_1LFU缓存实现
[题目] LFU也是一个著名的缓存算法,自行了解之后实现LFU中的set 和 get 要求:两个方法的时间复杂度都为O(1) [题解] LFU算法与LRU算法很像 但LRU是最新使用的排在使用频率最前 ...
- Linux 启动、关闭、重启服务的两种方式
1.一种是可以使用service脚本来调度,如: service 服务名 startservice 服务名 stopservice 服务名 restart 2.第二种可以直接进入/etc/init.d ...
- layer时间插件
引入: <link rel="stylesheet" href="<{$cdnsite}>/default/common/layui/css/layui ...
- 19-10-16-R
其实……这篇是真咕了. 反思: ××我$T1$两个小时构造$xiebi$了(虽然我觉得如果干仨小时可能行?) ……如果$T1$用时过长的话那考试多半不行…… 结果: 35 Miemeng 50 03: ...
- 局部内部类为什么只能访问final局部变量,对于成员变量却可以随便访问?
局部内部类为什么只能访问final局部变量,对于成员变量却可以随便访问? public class OuterClass { private int memberField = 10; public ...