bower->(前端) 包管理器
npm install bower -g
验证：bower --version
bower install <包名>
bower uninstall <包名>
bower info <包名>
vue->过渡（动画）
本质走的css3:transtion,animation
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<!-- 加载animate.css -->
<style type="text/css" media="screen">
#div1{
width:100px;
height:100px;
background:red;
}
.fade-transition{
transition: 1s all ease;
}
.fade-enter{
opacity:0;
}
.fade-leave{
opacity:0;
transform:translateX(200px);
}
</style>
</head>
<body>
<div id="box">
<input type="button" name="" value="按钮" @click="toggle">
<!-- <div id="div1" class="animated" v-show="bSign" transition="fade"></div> -->
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
// toggle:function(){
// alert(1);
// }
toggle(){
// alert(1);
this.bSign = !this.bSign;
}
},
transition:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
})
</script>
</body>
</html>```
----------------------------------------------------------------------
Vue组件：
组件：一个大对象
定义一个组件：
1.全局组件
var Aaa = Vue.extend({
template:'<h3>我是标题3</h3>'
})
Vue.component('aaa',Aaa);
*组件里面放数据：
data必须是函数的形式，函数必须返回一个对象（json）
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script type="text/javascript">
var Aaa = Vue.extend({
data(){
return {
msg:'我是标题'
}
},
methods:{
change(){
alert(1);
}
},
tempalte:'<h3 @click="change">{{msg}}</h3>'
})
// Vue.component('aaa',{
// tempalte:'<h3>我是标题</h3>'
// });
Vue.component('aaa',Aaa);
var vm = new Vue({
el:'#box',
data:{
}
})
</script>
</body>
</html>```
-----------------------------------------------------
###局部组件
放到某个组件内部
```<script type="text/javascript">
var Aaa = Vue.extend({
template:'<h3>welcome</h3>',
data(){
return {
msg:'dddd'
}
}
})
var vm = new Vue({
el:'#box',
data:{
bSign:true
},
components:{
aaa:Aaa
}
})
</script>```
-------------------------------------------------------------
###另一种编写方式：
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="aaa">
<my-aaa></my-aaa>
</div>
<script type="text/javascript">
// Vue.component('my-aaa',{
// template:'<strong>好</strong>'
// })
// var vm = new Vue({
// el:'box'
// })
// var vm = new Vue({
// el:'#box',
// components:{
// 'my-aaa':{
// template:'<h2>标题</h2>'
// }
// }
// })
var vm = new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg = 'changed';
}
},
template:'<h2 @click="change">标题2->{{msg}}</h2>'
}
}
})
</script>
</body>
</html>```
----------------------------------------------------
###配合模板
网友评论