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 ...
随机推荐
- 关于dom脚本编程的一些优秀理念总结
1.平稳退化(优雅降级) 目的:当浏览器不支持js或者js被用户禁用时,做到即使不运行js,网页的可读性亦不会受到太大的影响. 理念:使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级 ...
- 跟着刚哥学习Spring框架--创建HelloWorld项目（一）
1.Spring框架简介 Spring是一个开源框架,Spring是在2003年兴起的一个轻量级的开源框架,由Rod johnson创建.主要对JavaBean的生命周期进行管理的轻量级框架,Spri ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- linux下实时监测命令运行结果工具：watch
watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...
- 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化
联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...
- iOS最新企业证书的生成
PS:不知道什么原因 图片显示不出来 请看我简书里面的文章 http://www.jianshu.com/p/baab03ac43e9 1.生成CSR文件 SpotLight搜索>钥匙串访问 ...
- ListView的使用（一）
在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. 列表的显示需要三个元素: 1．ListVeiw 用来展示列表的View. 2．适 ...
- C#打开php链接传参然后接收返回值
php代码 一.php <?php header("Content-Type:text/html;charset=UTF-8"); $u=$_POST['zdupdate'] ...
- JDBC与JNDI的区别
程序员开发时,知道要开发访问MySQL数据库的应用,于是将一个对 MySQL JDBC 驱动程序类的引用进行了编码,并通过使用适当的 JDBC URL 连接到数据库. 就像以下代码这样: Connec ...
- 【Netty】codec框架
一.前言 前面已经学习完了Netty框架中的主要组件,接着学习codec框架. 二.codec框架 每个网络应用程序必须定义如何将在对等体之间传输的原始字节解析并转换为目标程序的数据格式,这种转换逻辑 ...