创建实例对象
注意这里的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 }