先介绍一下bower包管理器
npm install bower -g(全局安装)
npm install bower (安装到当前文件夹)
bower -version(获取bower的版本号)
bower install <包名>(安装)
bower uninstall <包名>(卸载)
bower info <包名>(获取包名的所有版本号)
$ bower install vue#1.0.28
//下载1.0.28版本的vue
vue动画
点击按钮,红色方块向右移动200px并逐渐透明化
再点击按钮,则在一开始的位置出现
vue动画的实现原理是:CSS3的transition、transform
在标签上增加transition="fade"属性
.fade-transition样式里写入transition属性
.fade-enter样式里写入出现动画
.fade-leave样式里写入消失动画
animate.css官网
bower install animate.css
里面封装了许多动画样式
引入animate.css文件
标签写入class="animated" transition="动画名称"
属性
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
设置动画名称bounce的进入动画enterClass和离开动画leaveClass
vue自定义组件
全局组件
HTML
javascript
var Aaa=Vue.extend({
template:'我是标题3
'
});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box'
});
等同
javascript
Vue.component('aaa',{
template:'我是标题3
'
});
效果
![](http://img.e-com-net.com/image/info10/18523e98deff4280aef17254dbcd7299.jpg)
全局组件可以在任意挂载目标里使用
局部组件
HTML
javascript
var Aaa=Vue.extend({//组件对象
template:'{{msg}}
',
data(){
return {msg:'我是标题3'}
}
});
var vm=new Vue({
el:'#box',
components:{ //局部组件
aaa:Aaa
}
});
等同
javascript
var vm=new Vue({
el:'#box',
components:{//定义多个组件
'aaa':{//组件对象
data(){
return {msg:'我是标题3'}
},
template:'{{msg}}
'
}
}
});
组件是一个对象,
用ES6语法声明的data函数返回数据对象的属性msg,
用template属性定义模板
效果
![](http://img.e-com-net.com/image/info10/18523e98deff4280aef17254dbcd7299.jpg)
组件模板
HTML
x-template--自定义组件模板
javascript
模板是HTML标签字符串
template的属性值是选择器,选择器匹配的标签就是模板
等同
template
{{msg}}
-
{{val}}
javascript
动态组件
HTML
javascript
点击“bbb组件”按钮之后,下面的内容变成“我是bbb组件”
组件名可以是变量,当点击按钮之后,这个组件名的值会变化
父子组件
父组件传数据给子组件
components属性对象里,属性即是组件名
组件名属性对象里,template属性对象放入模板,
components属性则是子组件集合对象,里面放入子组件名属性,
依次类推,可以多层嵌套
父组件data属性函数的数据对象,传递给子组件的模板
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'我是aaa组件
',
components:{
'bbb':{
template:'我是bbb组件->{{msg}}
'
}
}
}
}
data属性返回的是一个对象,对象里面的属性即是数据,可以在它自身模板,或子组件的模板里使用,这样就完成父组件对子组件的数据传递
父组件的data属性函数的数据对象,传递给子组件自定义的属性
11111
数据在在父组件上,
传递给父组件的模板,
子组件自定义了属性mmm,
数据传给子组件名的mmm属性,
子组件模板直接从mmm属性获取给传递的数据
自定义属性props是数组
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
bbb':{
props:['mmm','myMsg'],
template:'我是bbb组件->{{mmm}}
{{myMsg}}
'
}
自定义属性props是对象,规定接受的数据类型
components:{
'bbb':{
props:{
'mmm':String,
'myMsg':Number
},
template:'我是bbb组件->{{mmm}}
{{myMsg}}
'
}
}
子组件传数据给父组件
$emit
我是父级 -> {{msg}}
子组件-
点击子组件按钮,触发send方法函数,
this.$emit
子组件发送数据this.a
给自定义事件child-msg
,
父组件触发自定义事件child-msg
接收数据,调用get
方法函数,
get
方法函数接收数据,改变父组件的数据msg
slot—组件中的标签
插入标签组件化
- 1111
- 2222
- 3333
xxxx
这是默认的情况
welcome vue
一对slot
标签,表示插入组件的HTML标签,
如果组件里没有插入的HTML标签,即slot
标签无效时,则slot
标签里的数据才会显示
插入标签组件化的分类
- 1111
- 2222
- 3333
- 111
- 222
- 333
xxxx
这是默认的情况
welcome vue
这是默认的情况2
slot
标签的name
属性,将出入的HTML标签的顶部标签分类,
标顶部签的slot
属性与之对应,
插入标签实际渲染的位置与模板里slot
标签的位置有关,与组件里的位置无关
路由
嵌入路由插件vue-router
单层组件路由
基本的路由实例
默认路径获取的组件数据
//6. 跳转
router.redirect({
'/':'/home'
});
URL不输入路径时,默认链接的组件
多层组件路由
我是主页
//子路由组件,链接
//子路由组件数据存放区域
我是新闻
新增news的子组件路由
news模板中的子链接,以及路由组件存放区域,
以及Detail模板
我是新闻
{{$route.params | json}}
准备子组件Detail
var Detail=Vue.extend({
template:'#detail'
});
父组件路由News,以及自组件路由Detail
'news':{
component:News,
subRoutes:{
//将路径对应位置的参数赋值给属性id
'/detail/:id':{
component:Detail
}
}
}
获取激活的链接路径,并匹配参数对象
//参数对象
{{$route.params | json}}
//激活的链接路径
{{$route.path}}
{{$route.query | json}}
zns登录和strive注册
我是主页
'home':{
component:Home,
subRoutes:{
'login/:name':{
component:{
template:'我是登录信息 {{$route.params | json}}'
}
},
'reg':{
component:{
template:'我是注册信息'
}
}
}
},