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 ...
随机推荐
- Java之Retry重试机制详解
应用中需要实现一个功能: 需要将数据上传到远程存储服务,同时在返回处理成功情况下做其他操作.这个功能不复杂,分为两个步骤:第一步调用远程的Rest服务上传数据后对返回的结果进行处理:第二步拿到第一步结 ...
- 【Python】之format奇技淫巧的输出控制
前置 环境:Python3.6.5 探讨点:输出print,字符串format控制, % 控制 print基础控制 简单示范: a = 1 b = '@Hello yanshanbei!' print ...
- Spring面试题集锦（精选）
以下来自网络收集,找不到原文出处.此次主要为了面试收集,希望对大家有所帮助~~~~ 1.什么是Spring? Spring是一个开源的Java EE开发框架.Spring框架的核心功能可以应用在任何J ...
- 【灵魂拷问】你真的懂得Mysql的管理和使用吗？
作者 | Jeskson 来源 | 达达前端小酒馆 MySQL管理,数据库管理和数据表管理,用户管理. 初始化数据库,创建数据库,查看数据库,删除数据库. 创建数据表,查看数据表,修改数据表,删除数据 ...
- jQuery基础之事件
jQuery基础之事件方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> <s ...
- 高质量iOS博客推荐
https://www.jianshu.com/p/ea9fabdc12ed 原文地址 原作者记录了一些高质量ios博客地址,本文只做收藏使用.
- python3如何随机生成大数据存储到指定excel文档里
本次主要采用的是python3的第三方库xlwt,来创建一个excel文件.具体步骤如下: 1.确认存储位置,文件命名跟随时间格式 2.封装写入格式 3.实现随机数列生成 4.定位行和列把随机数写入 ...
- CF372C Watching Fireworks is Fun(单调队列优化DP)
A festival will be held in a town's main street. There are n sections in the main street. The sectio ...
- 地兵布阵 -----------HDU-1166
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- POJ 1949 Chores
Farmer John's family pitches in with the chores during milking, doing all the chores as quickly as p ...