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 ...
随机推荐
- 蓝桥杯-第39级台阶-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 2016年BAT公司常见的Web前端面试题整理
1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined ...
- 用Python设计一个经典小游戏
这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...
- LNMP源码编译安装
思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a # 查看内核/操作系统/CPU信息 # ...
- 关于java和c++中的i++
看到一个题目,大概是i=i++之类. 乍一看很简单,都知道i++的先参与计算再自增, 所以i不变. 但是仔细一想, 如果i不变, 那么在赋值之后, 自增的i, 增加的是谁呢? 逻辑顺序是怎样的呢? / ...
- Sql Server + ADO.NET
MsSql-http://www.cnblogs.com/zhangwei595806165/archive/2012/02/23/2364746.html 协议:Shared Memory :效率最 ...
- js导出CSV
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- JDFS:一款分布式文件管理实用程序第一篇(线程池、epoll、上传、下载)
一 前言 截止目前,笔者在博客园上面已经发表了3篇关于网络下载的文章,这三篇博客实现了基于socket的http多线程远程断点下载实用程序.笔者打算在此基础上开发出一款分布式文件管理实用程序,截止目前 ...
- Tomcat Server处理一个http请求过程
假设来自客户端的请求为: http://localhost:8080/lizhx/lizhx_index.jsp 请求被发送到本机端口8080,被在那里侦听的Coyote HTTP/1.1 Conne ...
- URI结构
[scheme:][//host:port][path][?query][#fragment] path:从端口后第一个/开始,可以有多个,每个用/连接. query:从第一个?开始,至行尾或#结束. ...