Vue

创建实例对象

注意这里的el 和 data都是固定写法

 1 <div id="app">
 2     <div>
 3         {{title}}
 4     </div>
 5 </div>
 6 
 7 <script src="vue.js"></script>
 8 <script>
 9     // 创建实例化对象
10     var app = new Vue({
11         el:"#app1",
12         data:{
13             title:"666"
14         }
15     })

插值: 我们可以在大括号里插很多东西

 1 <div id="app">
 2     <div>
 3         {{1>2?"真的":"假的"}}
 4     </div>
 5 </div>
 6 
 7 <script src="vue.js"></script>
 8 <script>
 9     // 创建实例化对象
10     var app = new Vue({
11         el:"#app",
12         data:{
13             title:"666"
14         }
15     })

如上我们就会在页面上看到一个结果写着假的双大括号里边是会帮我们自动运算的

指令系统

我们首先来下下面这个例子:

 1 <div id="app">
 2     <div v-if = 'flag'>
 3         {{title}}
 4     </div>
 5     <button v-on:click = "clickHandler">切换</button>
 6 </div>
 7 
 8 <script src="vue.js"></script>
 9 <script>
10     // 创建实例化对象
11     var app = new Vue({
12         el:"#app",
13         data:{
14             title:"666",
15             flag:false
16         },
17         methods:{
18             clickHandler(){
19                 this.flag = !this.flag
20             }
21         }
22 
23     })
24 
25 </script>

vue给我们提供了很多指令:

1 v-show : 和 v-if 差不多 , 但是会减少很多开销
2 v-bind : 绑定标签属性  有简便写法可以直接写个  :
3 v-on : 绑定事件  简便写法  @ 
4 v-for : 列表渲染
5 v-html : 插入标签
6 v-model : 双向绑定 自适应用表单控件

简易轮播图:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul li {
 8             list-style: none;
 9             float: left;
10             margin-right: 20px;
11         }
12         ul{
13             overflow: hidden;
14         }
15     </style>
16 </head>
17 <body>
18 <script src="vue.js"></script>
19 <div id="app">
20     <img :src="aaa" @mouseenter="stopcreated" @mouseleave="startcreated">
21     <ul>
22         <li v-for = "(a,b) in img" @click="clickHandler(a,b)" >{{a+1}}</li>
23     </ul>
24     <button @click = "nextimg">下一张</button>
25     <button @click = "lastimg">上一张</button>
26 </div>
27 
28 
29 <script>
30     var app = new Vue({
31         el:"#app",
32         data:{
33             img:[
34                 {id:1,src:"./img/1.jpg"},
35                 {id:2,src:"./img/2.jpg"},
36                 {id:3,src:"./img/3.jpg"},
37                 {id:4,src:"./img/4.jpg"},
38             ],
39             aaa:"./img/1.jpg",
40             aaaIddex:0,
41             timeer : null,
42         },
43         created(){
44             this.timeer = setInterval(this.nextimg,1000)
45         },
46         methods:{
47             clickHandler(a,b){
48                 this.aaa = b.src;
49             },
50             nextimg(){
51                 if(this.aaaIddex === this.img.length-1){
52                     this.aaaIddex = -1
53                 }
54                 this.aaaIddex++;
55                 this.aaa = this.img[this.aaaIddex].src;
56             },
57             lastimg(){
58                 if(this.aaaIddex === 0) {
59                     this.aaaIddex = this.img.length;
60                 }
61                 this.aaaIddex -= 1;
62                 this.aaa = this.img[this.aaaIddex].src;
63             },
64             stopcreated(){
65                 clearInterval(this.timeer)
66             },
67             startcreated(){
68                 this.timeer = setInterval(this.nextimg,1000)
69             }
70         }
71     })
72 </script>
73 </body>
74 </html>

计算属性:

双向绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <input type="text" :value="cmg" @input = "input01">
10     <div>{{ getvalue }}</div>
11 </div>
12 <script src="vue.js"></script>
13 <script>
14     var app = new Vue({
15         el:"#app",
16         data:{
17             cmg:123,
18         },
19         methods:{
20             input01(e){
21                 this.getvalue = e.target.value
22             }
23         },
24         computed:{
25             getvalue:{
26                 set(newvalue){
27                     this.cmg = newvalue
28                 },
29                 get(){
30                     return this.cmg
31                 }
32             }
33         }
34     })
35 </script>
36 </body>
37 </html>

在线音乐播放两个版本如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{
 8             list-style: none;
 9         }
10         li{
11             border-bottom: 1px solid gray;
12             width: 400px;
13         }
14     </style>
15 </head>
16 <body>
17 <div id="app">
18 <audio :src="songs" autoplay="" controls="" @ended="enxtsong"></audio>
19     <ul>
20         <li v-for = "(k,v) in music" @click="playsong(v)">
21             <p>{{v.name}}</p>
22         </li>
23     </ul>
24 </div>
25 
26 
27 
28 <script src="vue.js"></script>
29 <script>
30     var music = new Vue({
31         el:"#app",
32         data:{
33             music:[
34                 {id:1,src:"http://fs.w.kugou.com/201902122333/695851490892c74d307ac7f9531b8ce0/G140/M07/0F/08/bJQEAFuNx3uAGFubAD2ymaAPZzg273.mp3",name:"炫目"},
35                 {id:2,src:"http://fs.w.kugou.com/201902122338/5b9ac27c04ee807171f5f8dfd03a33c2/G001/M0B/0A/19/QQ0DAFS40n2AMHCvADdTJpfUSjY364.mp3",name:"日不落"},
36                 {id:3,src:"http://fs.w.kugou.com/201902122339/7a316dc8e7f1d1e9815cce0d42040126/G076/M0A/12/04/7IYBAFguqZuAcNP1AEO7Z1RGgIQ676.mp3",name:"寂寞沙洲冷"},
37             ],
38             index:0,
39             songs: "http://fs.w.kugou.com/201902122333/695851490892c74d307ac7f9531b8ce0/G140/M07/0F/08/bJQEAFuNx3uAGFubAD2ymaAPZzg273.mp3",
40         },
41         computed(){
42 
43         },
44         methods:{
45             playsong(v){
46                 this.songs = v.src
47             },
48             enxtsong(){
49                 this.index ++;
50                 this.songs = this.music[this.index].src
51             }
52         }
53     })
54 </script>
55 </body>
56 </html>

用计算属性版本:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{
 8             list-style: none;
 9         }
10         li{
11             border-bottom: 1px solid gray;
12             width: 400px;
13         }
14     </style>
15 </head>
16 <body>
17 <div id="app">
18 <audio :src="getvalue" autoplay="" controls="" @ended="enxtsong"></audio>
19     <ul>
20         <li v-for = "(k,v) in music" @click="playsong(k)">
21             <p>{{v.name}}</p>
22         </li>
23     </ul>
24 </div>
25 
26 
27 
28 <script src="vue.js"></script>
29 <script>
30     var music = new Vue({
31         el:"#app",
32         data:{
33             music:[
34                 {id:1,src:"http://fs.w.kugou.com/201902122333/695851490892c74d307ac7f9531b8ce0/G140/M07/0F/08/bJQEAFuNx3uAGFubAD2ymaAPZzg273.mp3",name:"炫目"},
35                 {id:2,src:"http://fs.w.kugou.com/201902122338/5b9ac27c04ee807171f5f8dfd03a33c2/G001/M0B/0A/19/QQ0DAFS40n2AMHCvADdTJpfUSjY364.mp3",name:"日不落"},
36                 {id:3,src:"http://fs.w.kugou.com/201902122339/7a316dc8e7f1d1e9815cce0d42040126/G076/M0A/12/04/7IYBAFguqZuAcNP1AEO7Z1RGgIQ676.mp3",name:"寂寞沙洲冷"},
37             ],
38             index:0,
39             //songs: "http://fs.w.kugou.com/201902122333/695851490892c74d307ac7f9531b8ce0/G140/M07/0F/08/bJQEAFuNx3uAGFubAD2ymaAPZzg273.mp3",
40         },
41         computed:{
42             getvalue:{
43                 get(){
44                     return this.music[this.index].src
45                 }
46             }
47         },
48         methods:{
49             playsong(k){
50                 //this.songs = v.src
51                 this.index = k;
52             },
53             enxtsong(){
54                 this.index ++;
55                 this.songs = this.music[this.index].src
56             }
57         }
58     })
59 </script>
60 </body>
61 </html>

创建一个vue项目:

vue init webpack-simple
npm install vue-router --save  //安装路由

父子传值:

给子组件传值
首先我们需要给子组件绑定一个属性:
<Vheader v-bind:test="test"></Vheader>
然后需要在子组件声明他的类型:
props:{
          test:Number
        }
然后我们就可以调用了



给父组件传值:
首先我们给子组件绑定一个自定义方法:
<Vheader v-bind:test="test" v-on:test2="test2"></Vheader>
然后给子组件绑定一个事件
<button class="login-button" @click="test2">登陆{{test}}</button>
我们写在父组件里边的方法作为第一个参数,我们需要传的数据作为第二个参数 放在我们子组件里用.$emit调用
methods:{
          test2(){
            this.$emit("test2","123")
          }
        }
父组件这里就可以调用我们传过来从参数了:
test2(str){
            alert(str);
          }

获取当前路径

1 this.$route.path

传参数的视图:

<router-link :to="{name:'courseDetail',params:{id:data.id}}">{{data.title}}</router-link>

拦截器

 1 // 拦截器
 2 router.beforeEach(function (to,from,next) {
 3    if(to.meta.requireAuth){
 4      //要去的url需要登陆才能访问
 5       if (store.state.user.token){
 6         next()
 7       }else {
 8         next({name:'login',query:{backUrl:to.fullPath}})
 9       }
10    }else {
11       next()
12    }
13 
14 });
15 
16 
17 
18 {
19       path: '/course/:id',
20       name: 'courseDetail',
21       component: courseDetail,
22       meta:{
23         requireAuth:true
24       }
25 
26 
27 
28 
29  var url = this.$route.query.backUrl;
30               if (url){
31                 this.$router.push({'path':url})
32               }else {
33                 this.$router.push({path:'/'})
34               }