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 ...
随机推荐
- 【跑会指南】2017年3-5月IT技术会议大合集
2016年各类大会让人应接不暇,技术圈儿最不缺的就是各种大会小会,有的纯干货,有的纯广告.作为一名技术开发者,参加了几场大会,你是不是也开始思忖:究竟哪些会议才值得参加?下面活动家为你推荐几场2017 ...
- redis多数据库操作
redis下,数据库是由一个整数索引标识,而不是由一个数据库名称.默认情况下,一个客户端连接到数据库0. redis配置文件中下面的参数来控制数据库总数: databases 16 [root@M ...
- Saltstack自动化运维
Saltstack三大功能 1,远程执行 2,配置管理(状态) 3,云管理 四种运行方式: Local 本地 Minion/Master C/S Syndic 代理模式 Salt S ...
- SSH小结
工作有一段时间了,经常用SSH登录远程机器,但对原理一直不是很了解,所以查阅了一些资料,写个小结. 一. SSH是什么? SSH的全称是Secure Shell, 是一种"用来在不安全的网络 ...
- Java 通过先序后序序列生成二叉树
题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...
- Jdk1.6 JUC源码解析(6)-locks-AbstractQueuedSynchronizer
功能简介: AbstractQueuedSynchronizer(以下简称AQS)是Java并发包提供的一个同步基础机制,是并发包中实现Lock和其他同步机制(如:Semaphore.CountDow ...
- XML编辑工具
[标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...
- 8、单选按钮（JRadioButton）和复选框（JCheckBox）
8.单选按钮(JRadioButton)和复选框(JCheckBox) 实现一个单选按钮(或复选框),此按钮项可被选择或取消选择,并显示其状态.JRadioButton对象与ButtonGroup对象 ...
- Grid search in the tidyverse
@drsimonj here to share a tidyverse method of grid search for optimizing a model's hyperparameters. ...
- Android 图片加载框架Picasso基本使用和源码完全解析（巨细无比）
写在之前 原本打算是每周更新一篇博文,同时记录一周的生活状态,但是稍微工作忙一点就顾不上写博客了.悲催 还是说下最近的状况,最近两周一直在接公司申请的计费点, 沃商店,银贝壳,微信等等,然后就是不停的 ...