vue组件常用声明方式
一.前言
这是自己重新写的一个，感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂
二.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件练习</title>
<!-- 引入vue.js -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- 全局组件 -->
<my-div></my-div>
<!-- 局部组件 -->
<my-div2></my-div2>
<!-- //templata 注册全局组件 -->
<clj></clj>
<!-- //templata 注册局部组件 -->
<clj2></clj2>
</div>
<!-- //templata 注册全局组件 -->
<template id="my-template">
<div>
我是template全局组件
</div>
</template>
<!-- //templata 注册全局组件 -->
<template id="my-template2">
<div>
我是template局部组件
</div>
</template>
<script>
// 全局组件
Vue.component('clj',{template:"#my-template"})
Vue.component("my-div",{template:`<div>我是全局组件</div>`})
new Vue({
el:'#app',
data(){
return{
msg:'我不爱大海和森林'
}
},
//局部组件
components:{
'my-div2':{template:`<div>我是局部组件</div>`},
'clj2':{template:"#my-template2"}
}
})
</script>
</body>
</html>
vue组件常用声明方式的更多相关文章
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- vue 组件间传值方式
/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...
- vue组件常用传值
一.使用Props传递数据 在父组件中使用儿子组件 <template> <div> 父组件:{{mny}} <Son1 :mny="mny"&g ...
- vue组件的调用方式
vue中一般都会把公共内容作为一个组件去布局,但是如何引用自定义的组件呢?下面就是vue调用自定义组件的方式,主要代码如下: <template> <div> <span ...
- Vue组件的定义方式
1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- vue组件的拆分
vue组件的拆分 <div class="div"> <!-- 拆分出来的组件 自定义名字moban --> <moban></moban ...
- vue-class-component 以class的模式写vue组件
vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- Vue组件的介绍与使用
组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...
随机推荐
- 一条数据的HBase之旅，简明HBase入门教程3：适用场景
[摘要] 这篇文章继HBase数据模型之后,介绍HBase的适用场景,以及与一些关键场景有关的周边技术生态,最后给出了本文的示例数据 华为云上的NoSQL数据库服务CloudTable,基于Apach ...
- 如何对IP地址进行子网划分？
在网络行业,子网划分是必须掌握的的基础知识点,下图是IP地址分类: 子网划分主要掌握的是划分思路,接下来我以192.168.1.72/27的IP划分做为例子: CIDR:无类域间路由. 可以看出192 ...
- Redis 命令执行过程(上)
今天我们来了解一下 Redis 命令执行的过程.在之前的文章中<当 Redis 发生高延迟时,到底发生了什么>我们曾简单的描述了一条命令的执行过程,本篇文章展示深入说明一下,加深读者对 R ...
- [TimLinux] JavaScript 模态框可拖动功能实现——原始版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 2019CCPC秦皇岛I题 Invoker(DP)
Invoker Time Limit: 15000/12000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- Nios II的Boot过程分析
目录 1 概述....................................................................... 1 2 几种常见的 ...
- Vmware Workstation虚拟机
目录 一.虚拟机是什么? 二.虚拟机的作用: 三.虚拟机创建流程 四.新的虚拟机上安装系统 五.虚拟机里添加硬盘 六.磁盘分区 一.虚拟机是什么? 虚拟机指通过软件模拟的具有完整硬件系统功能的.运行在 ...
- Orleans 初接触
简介 这篇随笔主要记录了自己学习Orleans的经过和理解,在学习过程中会一直更新,思路和理解可能有些偏颇,如果有幸有大佬看到这篇文章,希望能给予批评指正. 导航 (一) 入门例子 (二) 测试用例 ...
- 《一头扎进》系列之Python+Selenium框架设计篇2- 价值好几K的框架，不看白不看，看了还想看
1. 简介 上一篇介绍了自动化框架的架构,今天宏哥就带领小伙伴或者童鞋们开始开工往这个框架里开始添砖加瓦.主要是介绍一个框架unittest单元测试框架和一种设计思想POM. 2. unittest单 ...
- 【NPM】使用问题记录
[NPM]使用问题记录 =========================================================================== 1.MSBUILD : ...