对vue初步学习(三)

引入 vue.js
-------------------------------------
bower-> （前端）包管理器
npm install bower -g
验证: bower --version

bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息

<link rel="stylesheet" href="bower_components/animate.css/animate.css">
本质走的css3: transtion ,animation

动画:
.fade-transition{

}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}

 1 <style>
 2         #box{
 3             width:400px;
 4             margin: 0 auto;
 5         }
 6         #div1{
 7             width:100px;
 8             height:100px;
 9             background: red;
10         }
11     </style>
12 </head>
13 <body>
14     <div id="box">
15         <input type="button" value="按钮" @click="toggle">
16         <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
17     </div>
18 
19     <script>
20         new Vue({
21             el:'#box',
22             data:{
23                 bSign:true
24             },
25             methods:{
26                 toggle(){
27                     this.bSign=!this.bSign;
28                 }
29             },
30             transitions:{ //定义所有动画名称
31                 bounce:{
32                     enterClass:'zoomInLeft',
33                     leaveClass:'zoomOutRight'
34                 }
35             }
36         });
37     </script>

----------------------------------------
vue组件:
组件: 一个大对象
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});

Vue.component('aaa',Aaa);

*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json) /

 1 <body>
 2     <div id="box">
 3         <aaa></aaa>
 4     </div>
 5 
 6     <script>
 7         var Aaa=Vue.extend({
 8             template:'<h3>我是标题3</h3>'
 9         });
10 
11         Vue.component('aaa',Aaa);
12 
13 
14         var vm=new Vue({
15             el:'#box',
16             data:{
17                 bSign:true
18             }
19         });
20 
21     </script>
22 </body>

2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});

 1 <body>
 2     <div id="box">
 3         <aaa></aaa>
 4     </div>
 5 
 6     <script>
 7         var Aaa=Vue.extend({
 8             template:'<h3>{{msg}}</h3>',
 9             data(){
10                 return {
11                     msg:'ddddd'
12                 }
13             }
14         });
15 
16 
17         var vm=new Vue({
18             el:'#box',
19             data:{
20                 bSign:true
21             },
22             components:{ //局部组件
23                 aaa:Aaa
24             }
25         });
26 
27     </script>

--------------------------------------
另一种编写方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});

var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'美娜
}
}
});

 1 <body>
 2     <div id="box">
 3         <my-aaa></my-aaa>
 4     </div>
 5 
 6     <script>
 7         Vue.component('my-aaa',{
 8             template:'<strong>好</strong>'
 9         });
10 
11         var vm=new Vue({
12             el:'#box'
13         });
14 
15     </script>
16 </body>

-----------------------------------
配合模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>

 1 <body>
 2     <div id="box">
 3         <my-aaa></my-aaa>
 4     </div>
 5 
 6     <script>
 7         var vm=new Vue({
 8             el:'#box',
 9             components:{
10                 'my-aaa':{
11                     data(){
12                         return {
13                             msg:'welcome vue'
14                         }
15                     },
16                     methods:{
17                         change(){
18                             this.msg='changed';
19                         }
20                     },
21                     template:'<h2 @click="change">标题2->{{msg}}</h2>'
22                 }
23             }
24         });
25 
26     </script>
27 </body>

-----------------------------------
动态组件:
<component :is="组件名称"></component>
--------------------------------------------
vue-devtools -> 调试工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
--------------------------------------------
vue默认情况下，子组件也没法访问父组件数据

 1 <body>
 2     <div id="box">
 3         <input type="button" @click="a='aaa'" value="aaa组件">
 4         <input type="button" @click="a='bbb'" value="bbb组件">
 5         <component :is="a"></component>
 6     </div>
 7 
 8     <script>
 9         var vm=new Vue({
10             el:'#box',
11             data:{
12                 a:'aaa'
13             },
14             components:{
15                 'aaa':{
16                     template:'<h2>我是aaa组件</h2>'
17                 },
18                 'bbb':{
19                     template:'<h2>我是bbb组件</h2>'
20                 }
21             }
22         });
23 
24     </script>
25 </body>

--------------------------------------------
组件数据传递: √
1. 子组件就想获取父组件data
在调用子组件：
<bbb :m="数据"></bbb>

子组件之内:
props:['m','myMsg']

props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据，发送到父级

vm.$emit(事件名,数据);

v-on: @　　

 1 <body>
 2     <div id="box">
 3         <aaa>
 4         </aaa>
 5     </div>
 6 
 7     <script>
 8         var vm=new Vue({
 9             el:'#box',
10             data:{
11                 a:'aaa'
12             },
13             components:{
14                 'aaa':{
15                     template:'<h2>我是aaa组件</h2><bbb></bbb>',
16                     components:{
17                         'bbb':{
18                             template:'<h3>我是bbb组件</h3>'
19                         }
20                     }
21                 }
22             }
23         });
24 
25     </script>
26 </body>

 1 <body>
 2     <div id="box">
 3         <aaa>
 4         </aaa>
 5     </div>
 6 
 7     <template id="aaa">
 8         <span>我是父级 -> {{msg}}</span>
 9         <bbb @child-msg="get"></bbb>
10     </template>
11     <template id="bbb">
12         <h3>子组件-</h3>
13         <input type="button" value="send" @click="send">
14     </template>
15     <script>
16         var vm=new Vue({
17             el:'#box',
18             data:{
19                 a:'aaa'
20             },
21             components:{
22                 'aaa':{
23                     data(){
24                         return {
25                             msg:111,
26                             msg2:'我是父组件的数据'
27                         }
28                     },
29                     template:'#aaa',
30                     methods:{
31                         get(msg){
32                             // alert(msg);
33                             this.msg=msg;
34                         }
35                     },
36                     components:{
37                         'bbb':{
38                             data(){
39                                 return {
40                                     a:'我是子组件的数据'
41                                 }
42                             },
43                             template:'#bbb',
44                             methods:{
45                                 send(){
46                                     this.$emit('child-msg',this.a);
47                                 }
48                             }
49                         }
50                     }
51                 }
52             }
53         });
54 
55     </script>
56 </body>

--------------------------------------------
slot:
位置、槽口
作用: 占个位置

类似ng里面 transclude （指令）

 1 <body>
 2     <div id="box">
 3         <aaa>
 4             <ul slot="ul-slot">
 5                 <li>1111</li>
 6                 <li>2222</li>
 7                 <li>3333</li>
 8             </ul>
 9             <ol slot="ol-slot">
10                 <li>111</li>
11                 <li>222</li>
12                 <li>333</li>
13             </ol>
14         </aaa>
15         <hr>
16         <aaa>
17         </aaa>
18     </div>
19     <template id="aaa">
20         <h1>xxxx</h1>
21         <slot name="ol-slot">这是默认的情况</slot>
22         <p>welcome vue</p>
23         <slot name="ul-slot">这是默认的情况2</slot>
24     </template>
25 
26     <script>
27         var vm=new Vue({
28             el:'#box',
29             data:{
30                 a:'aaa'
31             },
32             components:{
33                 'aaa':{
34                     template:'#aaa'
35                 }
36             }
37         });
38 
39     </script>
40 </body>

--------------------------------------------
vue-> SPA应用，单页面应用

<script src="bower_components/vue-router/dist/vue-router.js"></script>
vue-resouce 交互
vue-router 路由

根据不同url地址，出现不同效果

咱上课: 0.7.13

主页 home
新闻页 news

html:
<a v-link="{path:'/home'}">主页</a> 跳转链接

展示内容:
<router-view></router-view>
js:
//1. 准备一个根组件
var App=Vue.extend();

//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});

var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});

//3. 准备路由
var router=new VueRouter();

//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});

//5. 启动路由
router.start(App,'#box');

跳转:
router.redirect({
‘/’:'/home'
});
--------------------------------------
路由嵌套(多层路由):

主页 home
登录 home/login
注册 home/reg
新闻页 news

subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
路由其他信息:
/detail/:id/age/:age

{{$route.params | json}} -> 当前参数

{{$route.path}} -> 当前路径

{{$route.query | json}} -> 数据
--------------------------------------------
vue-loader:
其他loader -> css-loader、url-loader、html-loader.....

后台: nodeJs -> require exports
broserify 模块加载，只能加载js
webpack 模块加载器，一切东西都是模块, 最后打包到一块了

require('style.css'); -> css-loader、style-loader

vue-loader基于webpack

.css
.js
.html
.php
.....

a.vue
b.vue

.vue文件:
放置的是vue组件代码

<template>
html
</template>

<style>
css
</style>

<script>
js （平时代码、ES6） babel-loader
</script>

  1 <html lang="en">
  2 <head>
  3     <meta charset="UTF-8">
  4     <title>Document</title>
  5     <script src="bower_components/vue/dist/vue.js"></script>
  6     <script src="bower_components/vue-router/dist/vue-router.js"></script>
  7     <style>
  8         .v-link-active{
  9             font-size: 20px;
 10             color: #f60;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15     <div id="box">
 16         <ul>
 17             <li>
 18                 <a v-link="{path:'/home'}">主页</a>
 19             </li>
 20             <li>
 21                 <a v-link="{path:'/news'}">新闻</a>
 22             </li>
 23         </ul>
 24         <div>
 25             <router-view></router-view>
 26         </div>    
 27     </div>
 28 
 29     <template id="home">
 30         <h3>我是主页</h3>
 31         <div>
 32             <a v-link="{path:'/home/login/zns'}">登录</a>
 33             <a v-link="{path:'/home/reg/strive'}">注册</a>
 34         </div>
 35         <div>
 36             <router-view></router-view>
 37         </div>
 38     </template>
 39     <template id="news">
 40         <h3>我是新闻</h3>
 41         <div>
 42             <a v-link="{path:'/news/detail/001'}">新闻001</a>
 43             <a v-link="{path:'/news/detail/002'}">新闻002</a>
 44         </div>
 45         <router-view></router-view>
 46     </template>
 47     <template id="detail">
 48         {{$route.params | json}}
 49         <br>
 50         {{$route.path}}
 51         <br>
 52         {{$route.query | json}}
 53     </template>
 54     <script>
 55         //1. 准备一个根组件
 56         var App=Vue.extend();
 57 
 58         //2. Home News组件都准备
 59         var Home=Vue.extend({
 60             template:'#home'
 61         });
 62 
 63         var News=Vue.extend({
 64             template:'#news'
 65         });
 66 
 67         var Detail=Vue.extend({
 68             template:'#detail'
 69         });
 70 
 71         //3. 准备路由
 72         var router=new VueRouter();
 73 
 74         //4. 关联
 75         router.map({
 76             'home':{
 77                 component:Home,
 78                 subRoutes:{
 79                     'login/:name':{
 80                         component:{
 81                             template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
 82                         }
 83                     },
 84                     'reg':{
 85                         component:{
 86                             template:'<strong>我是注册信息</strong>'
 87                         }
 88                     }
 89                 }
 90             },
 91             'news':{
 92                 component:News,
 93                 subRoutes:{
 94                     '/detail/:id':{
 95                         component:Detail
 96                     }
 97                 }
 98             }
 99         });
100 
101         //5. 启动路由
102         router.start(App,'#box');
103 
104         //6. 跳转
105         router.redirect({
106             '/':'home'
107         });
108     </script>
109 </body>
110 </html>

ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev

App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

最最核心：

posted @ 2020-09-27 22:09 幕阅读(159) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

幕

今夕何夕

对vue初步学习(三)

公告