vue组件大集合 component
vue组件分为全局组件、局部组件和父子组件，其中局部组件只能在el定义的范围内使用， 全局组件可以在随意地方使用，父子组件之间的传值问题等。
- Vue.extend 创建一个组件构造器
- template:'' 组件要显示的内容
- component('',); 注册组件，接收两个参数，第一个参数用来使用的标签，第二个参数标识要显示内容的构建器
详情请看vue的API： http://v1-cn.vuejs.org/guide/components.html
一、简单的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>孙三峰-博客园</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
</body>
<script type="text/javascript">
var AAA = Vue.extend({ //创建一个组件构造器
template:'<strong>123</strong>' //组件要显示的内容
});
//var a = new AAA(); 相当于又new了一个Vue，具有它的所有属性(一般不用这种方法)
Vue.component('aaa',AAA); //注册组件
new Vue({
el:'#box',
data:{
bSign:true
}
})
</script>
</html>
二、给组件添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>孙三峰-博客园</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
</body>
<script type="text/javascript">
Vue.component('aaa',{
data(){
return {
msg:'我是p标签'
};
},
methods:{
sj:function(){
alert(111);
}
},
template:'<p @click="sj()">{{msg}}</p>' //接收的data值必须是函数的形式，函数必须返回一个对象
})
new Vue({
el:'#box',
data:{ },
})
</script>
</html>
三、vue动态组件--选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>组件选项卡--孙三峰博客园</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body id="box">
<input type="button" @click="s='suning'" value="选项卡1" /><!--is后面跟着组件的名称 -->
<input type="button" @click="s='saning'" value="选项卡2" />
<comment :is='s'></comment>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
s:'suning'
},
components:{
'suning':{
template:'<p>选项卡1</p>'
},
'saning':{
template:'<p>选项卡2</p>'
}
},
})
</script>
</html>
四、路由的嵌套
<html>
<head>
<title>vue-router--孙三峰的博客</title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<style>
.v-link-active{
color: red;
}
</style>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">首页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view><!-- 展示内容-->
</div>
</div>
<template id="home">
<h3>home</h3>
<a v-link="{path:'/home/login'}">登陆</a>
<a v-link="{path:'/home/reg'}">注册</a>
<router-view></router-view>
</template>
<template id="news">
<h3>新闻</h3>
<div>
<a v-link="{path:'/news/detail/001'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
</div>
<router-view></router-view>
</template>
<template id="detail">
<!--{{$route | json}}-->
{{$route.params | json}} <!-- 关于$route请看五，$route的参数 -->
</template>
</body>
<script>
var App = Vue.extend();
var Home = Vue.extend({
template:'#home'
});
var News = Vue.extend({
template:'#news'
});
var Detail = Vue.extend({
template:'#detail'
});
var router = new VueRouter();
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'你点击了登陆'
}
},
'reg':{
component:{
template:'你点击了注册'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{
component:Detail
} }
},
});
router.redirect({
'/':'/home'
})
router.start(App,'#box');
</script>
</html>
五、$route的参数
- $route中包含路由的其他信息
- $route.params 得到当前的参数
- $route.path 得到当前的路径
- $route.query 得到数据
vue组件大集合 component的更多相关文章
- Vue最全指令大集合————VUE
# Vue指令大集合(无slot) #### 包含内容: 1. v-cloak2. v-html3. v-text4. v-bind5. v-show6. v-model7. v-for8. v-if ...
- 前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- 深入理解Vue组件3大核心概念
摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...
- 二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值
一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue系列---Vue组件化的实现原理（八）
_ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...
- Vue组件介绍及开发
一. 通过axios实现数据请求 1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于 ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
随机推荐
- 解决 MySQL 分页数据错乱重复
前言 一天,小明兴匆匆的在通讯工具上说:这边线上出现了个奇怪的问题,麻烦 DBA 大大鉴定下,执行语句 select xx from table_name wheere xxx order by 字段 ...
- 基于jQuery的自定义插件：实现整屏分页转换的功能
动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...
- JS-监听文本回车事件写入数据表单
场景 ERP系统扫描输入货品编号到文本框后,触发写入记录到数据表格,并对数据进行渲染. 解决方案 通过发现回车或者换行符,则写入数据表格 代码 //监听文本框输入事件 $('#gidinp ...
- [笔记]机器学习(Machine Learning) - 03.正则化(Regularization)
欠拟合(Underfitting)与过拟合(Overfitting) 上面两张图分别是回归问题和分类问题的欠拟合和过度拟合的例子.可以看到,如果使用直线(两组图的第一张)来拟合训,并不能很好地适应我们 ...
- ConcurrentHashMap实现原理及源码分析
ConcurrentHashMap实现原理 ConcurrentHashMap源码分析 总结 ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现(若对Ha ...
- ZED 相机 && ORB-SLAM2安装环境配置与ROS下的调试
注:1. 对某些地方进行了更新(红色标注),以方便进行配置. 2. ZED ROS Wrapper官方github已经更新,根据描述新的Wrapper可能已经不适用与Ros Indigo了,如果大家想 ...
- Java内存使用量测试
JVM内存使用量测试测试各种不同的数据结构在JVM中的内存使用量 import it.unimi.dsi.fastutil.ints.IntOpenHashSet; import java.lang. ...
- Regression：Generalized Linear Models
作者:桂. 时间:2017-05-22 15:28:43 链接:http://www.cnblogs.com/xingshansi/p/6890048.html 前言 本文主要是线性回归模型,包括: ...
- Greys学习笔记(未完待续)
Greys介绍 greys-anatomy是一个Java线上诊断工具,取名来自美剧<实习医生格雷>,由菜鸟-杜琨同学开发维护.比我们常用的脚本工具btrace提供更多的功能,greys采用 ...
- c语言项目开发流程二部曲
一.在第一部曲中我们介绍了电子词典项目开发的前5步,下面继续我们的步伐. 6.函数接口设计,这一步不是一蹴而就的,在项目进行中得不断修改,下面是我电子词典项目接口. /**************函数 ...