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 ...
随机推荐
- MySQL 库、表、记录、相关操作（3）
MySQL 库.表.记录.相关操作(3) 单表查询 """ 增: insert [into] [数据库名.]表名[(字段1[, ..., 字段n])] values (数 ...
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...
- 详细nginx配置SSL
1.nginx的ssl 让nginx实现用https来访问网站,http是80端口,https是443端口. https其实就是一种加密的http 2.为什么要加密 例子:在网上银行汇款,在你汇款的过 ...
- 学习ThinkPHP的第23天---门面、钩子与行为
一.门面(facade) 门面在ThinkPHP中可以理解为一个代理商,有了它可以灵活的去使用其中的类. 二.钩子和行为 钩子也可以说是插件,就是程序运行到某个位置,我们用钩子把这个程序截住,去执行所 ...
- ios中陀螺仪CoreMotion的用法
转自:http://code.eoe.cn/471/title/ios涓檧铻轰华CoreMotion鐨勭敤娉 README.md 外部引用 原始文档 以前在iphone中要得到加速度时,只能使用Ac ...
- go基础之json格式数据处理
go基础之json格式数据处理 1.结构体小写问题导致出错 2.struct没有正确加tag 3.struct加上tag 4.struct tag扩展 go基础之json格式数据处理 go标准库里面提 ...
- Mybatis底层源码分析
MyBatis 流程图 Configuration.xml 该配置文件是 MyBatis 的全局配置文件,在这个文件中可以配置诸多项目.常用的内容是别名设置,拦截器设置等. Properties(属性 ...
- MVC方法的返回值类型
MVC方法返回值类型 ModelAndView返回值类型: 1.当返回为null时,页面不跳转. 2.当返回值没有指定视图名时,默认使用请求名作为视图名进行跳转. 3.当返回值指定了视图名,程序会按照 ...
- Koa - 初体验（写个接口）
前言 不会node.js的前端不是一个好前端! 这几年node.js确实是越来越火了,好多公司对node.js都开始有要求.虽说前端不一定要会后端,但想要成为一个优秀的前端,node.js是必经之路. ...
- Python爬虫实现抓取腾讯视频所有电影【实战必学】
2019-06-27 23:51:51 阅读数 407 收藏 更多 分类专栏: python爬虫 前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问 ...