VUE 生命周期
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> </head> <body> <div id="app"></div> <script> var vm = Vue({ el:'#app', data:{}, methods:{}, filters:{}, directives:{}, // 什么是生命周期:VUE 实例创建/运行/销毁 ,总是伴随着各种各样的事件, // 这些事件,统称为生命周期 // 生命周期钩子:就是生命周期事件的别名, // 主要的生命周期函数分为: // 创建期间的生命周期函数: // vue第一个生命周期函数 beforeCreate(){} // 实例刚在内存中被创建出来,此时,还没有初始化data和methods属性 // vue 第二个生命周期函数 created(){} // 实例已经在内存中创建,此时data和mothods 已经创建好了,此时还没有开始编译模板 // vue 第三个生命周期函数 beforeMount() {} // 此时已经完成了模板的编译,但是还没有挂载到页面中 // vue 第四个生命周期函数 mounted(){} // 此时,已经编译好了模板,挂载到页面指定容器中显示了 // 运行期间的生命周期函数: // vue 第五个生命周期函数 beforeUpdate(){} // 状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM 节点 // vue 第六个生命周期函数 updated(){} // 实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了. // 销毁期间的生命周期函数: // vue 第七个生命周期函数 beforeDestroy(){} // 实例销毁之前调用,这一步,实例乃然可用 // vue 第八个生命周期函数 destroyed(){} // Vue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁.__constructor__() }) </script> </body> </html>
vue-resource 获取后端数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> </head> <body> <div id="app"> <input type="button" value="get点击" @click="getinfo" /> <input type="button" value="post点击" @click="postinfo" /> <input type="button" value="jsonp点击" @click="jsonpinfo" /> </div> <script> var vm = new Vue({ el:'#app', data:{}, methods:{ getinfo(){ this.$http.get('http://127.0.0.1:5000/infoapi').then(function(result){ console.log(result.body.msg) }) }, postinfo(){ var data = {'zhuangtai':'OK'} this.$http.post('http://127.0.0.1:5000/infoapi',{data},{emulateJSON:true}).then(result =>{ console.log(result.body.msg) console.log(typeof(result)) }) }, jsonpinfo(){ this.$http.jsonp('http://127.0.0.1:5000/infoapi').then(result => { console.log(result.body) }) }, }, }) </script> </body> </html>
获取后端数据 练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div id='app'> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="pannel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> Name: <input type="text" class="form-control" v-model="name" @keyup.enter="add"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> </div> </div> <br> <table class="table table-bordered table-hover table-striped" > <tr> <th>ID</th> <th>Name</th> <th>操作</th> </tr> <tr v-for='i in info' :key='i.id'> <td>{{ i.id }}</td> <td>{{ i.name }}</td> <td><a href="#" @click.prevent='delinfo(i.id)'>删除</a></td> </tr> </table> </div> <script> Vue.http.options.emulateJSON = true; Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({ el:'#app', data:{ name:'', searchname:'', info:[], }, methods:{ getinfo(){ this.$http.get('infoapi').then( data => { this.info = data.body }) }, add(){ this.$http.post('addinfoapi',{name:this.name},{}).then( data => { if(data.body.status == 'OK'){ this.name = '' this.getinfo() }else{ alert('添加失败') } }) }, delinfo(id){ this.$http.post('delinfoapi',{id:id},{}).then( data => { if(data.body.status == 'OK'){ this.getinfo() }else{ alert('删除失败') } }) }, }, created(){ this.getinfo() }, }); </script> </body> </html>
VUE 动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateX(150px); } .v-enter-active,.v-leave-active{ transition: all 2s ease } .my-enter,.my-leave-to{ opacity: 0; transform: translateX(300px) translateY(150px); } .my-enter-active,.my-leave-active{ transition: all 1s ease } </style> </head> <body> <div id='app'> <input type="button" @click="istrue=!istrue" value="点击"> <transition> <p v-show="istrue">啊啊啊啊啊啊啊啊啊啊</p> </transition> <br> <input type="button" @click="istrue2 =!istrue2" value="点击"> <transition name='my'> <p v-show="istrue2">啊啊啊啊啊啊啊啊啊啊</p> </transition> <!-- 点击按钮,显示p标签 再次点击隐藏皮标签 1.transition元素将p标签包裹 2.通过修改transition 所提供的样式修改 .v-enter,.v-enter-to 入场前,入场后 .v-leave,.v-leave-to 离场前,离场后 .v-enter-active, 入场动作 .v-leave-active, 离场动作 --> </div> <script> Vue.http.options.emulateJSON = true; Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({ el:'#app', data:{ istrue:false, istrue2:false, }, methods:{}, }); </script> </body> </html>
第三方css动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <div id='app'> <input type="button" @click="istrue=!istrue" value="点击"> <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration="{ enter:200, leave:500 }"> <p v-show="istrue">我来了啦!!</p> </transition> </div> <script> var vm = new Vue({ el:'#app', data:{ istrue:false, }, methods:{}, }); </script> </body> </html>
VUE 动画钩子函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateY(400px); } .v-enter-active, .v-leave-active{ transition: all 0.8s ease; } /* 这里必须两个属性连用要不不起效果 */ .v-move{ transition: all 1s ease; } .v-leave-active{ position: absolute; } </style> </head> <body> <div id='app'> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="pannel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> Name: <input type="text" class="form-control" v-model="name" @keyup.enter="add"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> </div> </div> <br> <table class="table table-bordered table-hover table-striped" > <thead> <tr> <th>ID</th> <th>Name</th> <th>操作</th> </tr> </thead> <tbody is="transition-group"> <tr v-for='i in info' :key='i.id'> <td>{{ i.id }}</td> <td>{{ i.name }}</td> <td><a href="#" @click.prevent='delinfo(i.id)'>删除</a></td> </tr> </tbody> </table> </div> <script> Vue.http.options.emulateJSON = true; Vue.http.options.root = 'http://172.16.3.104:5000/'; var vm = new Vue({ el:'#app', data:{ name:'', searchname:'', info:[], }, methods:{ getinfo(){ this.$http.get('infoapi').then( data => { this.info = data.body }) }, add(){ this.$http.post('addinfoapi',{name:this.name},{}).then( data => { if(data.body.status == 'OK'){ this.name = '' this.getinfo() }else{ alert('添加失败') } }) }, delinfo(id){ this.$http.post('delinfoapi',{id:id},{}).then( data => { if(data.body.status == 'OK'){ this.getinfo() }else{ alert('删除失败') } }) }, }, created(){ this.getinfo() }, }); </script> </body> </html>
VUE全局组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定义vue组件</title> <script src="js/vue.js"></script> </head> <body> <!-- 什么是组件: 组件的组件的出现就是为了拆分vue实例的代码量,能够让我们以不同的组件来划分不同的功能模块,将我们需要什么样的功能,就可以去调用对应的组件即可. 组件和模块的区别: 组件化: 是从代码逻辑的角度进行划分,方便diamante分层开发,保证每个功能模块的职能单一; 组件化: 是从UI界面的角度进行划分的,前端组件化,方便组件UI的重用 --> <div id="app"> <!-- 第一种方式 --> <!-- <mycom1></mycom1> --> <!-- <my-com2></my-com2> --> <!-- 第二种方式 --> <mycom1></mycom1> </div> <template id="muban"> <div> <h1>你好 中国!</h1> <p>这是在app实例外定义的一个模板 id=muban</p> </div> </template> <script> // // 第一种创建全局组件方式 // //使用vue.extend来创建全局的vue组件 // var com1 = Vue.extend({ // template:"<h1>hello world1!!</h1>" // }) // // //使用vue.component定义全局组件的时候, // //组件名称使用了 驼峰命名,则需要把大写的驼峰改为小写的字母, // //同时两个单词之前 使用'-'链接 // Vue.component('mycom1',com1) // Vue.component('myCom2',com1) // // // 上面的简写方式 // Vue.component('mycom1',Vue.extend({ // template:"<h1>hello world1!!</h1>" // })) // //上面的再简写方式 // Vue.component('mycom1',{ // template:"<h1>hello world1!!</h1>" // }) // 注意 无论是哪种方式 template属性指向的模板内容,必须有且只能有唯一的一个根元素. // 第二种创建全局模板的方式 // 在#app实例外创建一个template元素模板,然后引入app实例内部 Vue.component('mycom1',{ template:'#muban' }) // 需要创建vue实例,得到viewmodel 才能渲染组件 var vm = new Vue({ el:'#app', }) </script> </body> </html>
Vue 私有组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定义vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <muban></muban> <muban2></muban2> </div> <template id='muban2'> <div > <h1>这是私有组件!</h1> </div> </template> <script> var vm = new Vue({ el:'#app', data:{}, methods:{}, filters:{}, directives:{}, components:{ muban:{ template:'<div><h1>你好 世界!</h1></div>' }, muban2:{ template:'#muban2' }, }, beforeCreate(){}, created(){}, beforeMount(){}, mounted(){}, beforeUpdate(){}, updated(){}, beforeDestroy(){}, destroyed(){}, }) </script> </body> </html>
VUe 组件应用data 属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定义vue组件</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <muban></muban> <muban></muban> <muban2></muban2> </div> <template id='muban2'> <div > <h1>这是私有组件!</h1> </div> </template> <script> var vm = new Vue({ el:'#app', data:{}, methods:{}, filters:{}, directives:{}, components:{ muban:{ // 1.组件可以有自己data数据 // 2.组件的data和实例data有些不一样,实例中的data可以为一个对象,但是组件中的data必须是一个方法 // 3.组件中data除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行; // 4.组件中的data数据,使用方式和实例中的data使用方式完全一样. template:'<div><input type="button" value="+1" @click="add" ><h1>{{count}}</h1></div>', data(){ return{count:0} }, methods:{ add(){ this.count ++ } }, }, muban2:{ template:'#muban2' }, }, beforeCreate(){}, created(){}, beforeMount(){}, mounted(){}, beforeUpdate(){}, updated(){}, beforeDestroy(){}, destroyed(){}, }) </script> </body> </html>
Vue 组件切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 第一种组件切换的方式 --> <a href="#" @click.prevent="flag=true">登录</a> <a href="#" @click.prevent="flag=false">注册</a> <login v-if='flag'></login> <register v-else='flag'></register> <!-- 第二种组件切换的方式 --> <a href="#" @click.prevent="flag2='login'">登录</a> <a href="#" @click.prevent="flag2='register'">注册</a> <component :is='flag2'></component> <!-- vue提供的标签 回顾! component, template, transition, transition-group --> </div> <script> Vue.component('login',{ template:'<h1>登录组件</h1>' }) Vue.component('register',{ template:'<h1>注册组件</h1>' }) var vm = new Vue({ el:'#app', data:{ flag:true, flag2:'login', } }) </script> </body> </html>
VUE 组件切换+ 动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <style type="text/css"> .v-enter,.v-leave-to{ opacity: 0; transform: translateX(100px); } .v-enter-active,.v-leave-active{ transition: all 1s ease; } </style> </head> <body> <div id="app"> <!-- 第一种组件切换的方式 --> <a href="#" @click.prevent="flag=true">登录</a> <a href="#" @click.prevent="flag=false">注册</a> <login v-if='flag'></login> <register v-else='flag'></register> <!-- 第二种组件切换的方式 --> <a href="#" @click.prevent="flag2='login'">登录</a> <a href="#" @click.prevent="flag2='register'">注册</a> <!-- 通过mode属性 设置组件切换时候的模式 --> <transition mode='out-in'> <component :is='flag2'></component> </transition> <!-- vue提供的标签 回顾! component, template, transition, transition-group --> </div> <script> Vue.component('login',{ template:'<h1>登录组件</h1>' }) Vue.component('register',{ template:'<h1>注册组件</h1>' }) var vm = new Vue({ el:'#app', data:{ flag:true, flag2:'login', } }) </script> </body> </html>
VUe动画小球
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <style type="text/css"> #ball{ width: 15px; height: 15px; background-color: #269ABC; border-radius: 50%; } </style> </head> <body> <div id="app"> <input type="button" value="按钮" @click="flag=!flag" /> <transition @before-enter = "benter" @enter = 'enter' @after-enter='fenter' > <div id="ball" v-show="flag"></div> </transition> </div> <script> var vm = new Vue({ el:'#app', data:{ flag:false, }, methods:{ benter(el){ el.style.transform = 'translate(0,0)' }, enter(el,done){ el.offsetWidth el.style.transform = 'translate(150px,450px)' el.style.transition='all 1s ease' done() }, fenter(el){ this.flag = !this.flag }, } }) </script> </body> </html>
VUE 组件向子组件传值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <com1 :zzz='msg'></com1> </div> <script> // 子组件中要访问父类数据, // 1.首先父类数据要绑定到模板上(传递数据给模板) // 2.子组件 要引入父类数据 // 3.子组件 应用 引入的父类自定义的数据名 var vm = new Vue({ el:'#app', data:{ msg:'这是父类 数据!' }, methods:{}, components:{ com1:{ template:'<h1>{{info}}这是私有组件!-{{zzz}}</h1>', // 组件中data数据 对于组件是可以读写 data(){ return { info:'--这是组件数据--', } }, // 组件中定义的父类数据 是只读的 props:['zzz'], } } }) </script> </body> </html>
VUE 父组件方法传递给子组件/共享子组件属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <com1 @zzz='show'></com1> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'这是父类 数据!', sonmsg:null, }, methods:{ // **传递参数 // show(d1){ // console.log('this 父组件 ! OK!' + d1) // }, show(d1){ console.log('this 父组件 ! OK!') this.sonmsg = d1 }, }, components:{ com1:{ template:'<h1>这是私有组件!<input type="button" value="按钮" @click="fshow"></h1>', data(){ return { sonmsg:{name:'sonname'}, } }, methods:{ fshow(){ // **传递参数,第二的位置传递参数 // this.$emit('zzz','123') // 将子组件的data传递至方法然后父组件可以从方法获取子组件数据 this.$emit('zzz',this.sonmsg) } } } } }) </script> </body> </html>
VUE 评论练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <muban0 @ftj='tj' ></muban0> <div> <table> <tr v-for='i in list'> <td>{{i.pl}}</td> <td>{{i.name}}</td> </tr> </table> </div> </div> <template id="muban0"> <div> <input type="text" placeholder="评论人" v-model="name"/> <input type="text" placeholder="评论" v-model="pl"/> <input type="button" value="发表评论" @click="fbpl" /> </div> </template> <script> var vm = new Vue({ el:'#app', data:{ list:[ {name:'a',pl:'aaaa'}, ] }, created(){ this.tj() }, methods:{ tj(){ var list = JSON.parse(localStorage.getItem('cmts') || '[]') this.list = list }, }, components:{ muban0:{ data(){ return { name:'', pl:'', } }, template:'#muban0', methods:{ fbpl(){ var aaa = {name:this.name,pl:this.pl} var list = JSON.parse(localStorage.getItem('cmts') || '[]') list.unshift(aaa) localStorage.setItem('cmts',JSON.stringify(list)) this.name = this.pl = '' this.$emit('ftj') } }, } } }) </script> </body> </html>
vue $ref绑定DOM元素以及元素组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ref</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <muban ref='r1'></muban> <p ref='r2'>这是p标签</p> <br> <input type="button" value="r1点击获取组件数据以及处罚组件方法" @click="r1click"/> <input type="button" value="r2点击获取r2DOM对象" @click="r2click" /> </div> <script> var vm = new Vue({ el:'#app', methods:{ r1click(){ console.log(this.$refs.r1.msg) this.$refs.r1.show() }, r2click(){ console.log(this.$refs.r2) }, }, components:{ muban:{ template:'<div><h1>你好 世界!</h1></div>', data(){ return { msg:'私有组件数据!' } }, methods:{ show(){ console.log("这是私有组件,方法") }, } }, }, }) </script> </body> </html>
VUE前端路由
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <link href="css/bootstrap.min.css"/> <style type="text/css"> /* router-link默认的class类名 */ /* 可以在router实例化中 linkActiveCLASS属性自定义class名名 */ .router-link-active,.mylinkactive{ color: orangered; font-weight: 500; font-size: 80px; font-style: italic; } .v-enter,v-leave-to{ opacity: 0; transform: translateX(140px); } .v-enter-active,v-leave-active{ transition:all 1s ease ; } </style> </head> <body> <!-- 前端路由概念:--> <!-- 对于单个应用程序来说,主要通过URL中的hash来实现不同页面之间的切换,同时,hash有一个特点: http请求中不会包含hash相关的内容,若依,单页面程序中的页面跳转主要用hash实现. 在单页面应用程序中,这种通过hash改变来切换页面的方式,称为前端路由 --> <!-- 这一节总结: --> <!-- 应用vue-route步骤: 1.创建Vue实例 2.创建Vuerouter实例 3.创建组件 4.vueroute实例中,配置path路径 将组件变量名注册至path路径中 5.在vue实例中,router属性中 注册vuerouter实例 6.在vue el中 router-view 展现组件内容,可选项 router-link 模拟动态切换组件 --> <!-- URL中的hash(#) 1.# 的含义:#代表网页中的一个位置，其右边的字符，就是该位置的标识符。 2.HTTP请求不包含#:#号是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包含#。 3.#后面的字符:在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。 4.改变#不触发网页重载:单单改变#后的内容，浏览器只会滚动到相应位置，不会重新加载网页。浏览器不会重新向服务器请求页面。 5.改变#会改变浏览器的访问历史:每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。 值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。 6.window.location.hash读取#值:window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。 7.onhashchange事件: 这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。 它的使用方法有三种： 1.window.onhashchange = func; 2.<body onhashchange="func();"> 3.window.addEventListener("hashchange", func, false); 8.Google抓取#的机制 默认情况下，Google的网络蜘蛛忽视URL的#部分。 但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。 比如，Google发现新版twitter的URL如下： http://twitter.com/#!/username 就会自动抓取另一个URL： http://twitter.com/?_escaped_fragment_=/username 通过这种机制，Google就可以索引动态的Ajax内容。 --> <div id="app"> <!-- 不推荐 <a href="#/login">登录</a> <a href="#/register">注册</a> --> <!-- router-link 默认渲染成A标签 --> <router-link to='login' tag='span'>登录</router-link> <router-link to='register' tag='span'>注册</router-link> <!-- vue-router 提供的元素,专门用来 当做占位符,将组件展示到router-view中 --> <transition mode='out-in'> <router-view></router-view> </transition> </div> <script> var login = { template:"<h1>登录组件</h1>" } var register = { template:"<h1>注册组件</h1>" } var routerobj = new VueRouter({ // route代表匹配规则 routes:[ // 每个路由规则,都是一个对象,这个规则对象,身上有两个必须的属性 // 属性1 是path,表示监听的那个路由链接地址 // 属性2 是component 表示如果路由前面匹配到了path,则展示componnent对应的那个组件 {path:'/',redirect:'/login'}, {path:'/login',component:login}, {path:'/register',component:register}, // 注意,component 的属性值,逆序是一个组件的模板对象,而不能是引用组件名称 ], linkActiveClass:'mylinkactive', }) var vm = new Vue({ el:'#app', router:routerobj, // 将路由规则对象,注册到vm实例上,用来监听URL 地址的变化,然后展示对应的组件 }) </script> </body> </html>
vue前端路由参数传递
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <link href="css/bootstrap.min.css"/> <style type="text/css"> .router-link-active,.mylinkactive{ color: orangered; font-weight: 500; font-size: 80px; font-style: italic; } .v-enter,v-leave-to{ opacity: 0; transform: translateX(140px); } .v-enter-active,v-leave-active{ transition:all 1s ease ; } </style> </head> <body> <div id="app"> <router-link to='/login' tag='span'>登录</router-link> <!-- 第一种传递参数方式: --> <router-link to='/login?id=10&name=alex' tag='span'>第一种传递参数方式</router-link> <!-- 第二种传递参数方式: 使用过程需要严格匹配路由path--> <router-link to='/login/12' tag='span'>第二种传递参数方式</router-link> <router-link to='/register' tag='span'>注册</router-link> <transition mode='out-in'> <router-view></router-view> </transition> </div> <script> var login = { template:"<h1>登录组件-{{$route.query.id}}-{{$route.params.id}}-</h1>", created(){ console.log('这是$route实例'+this.$route) // 第一种传递参数的数据获取: // 这是url?参数的方式 传递数据至$route.query中,多个参数值也是在query中提取. console.log('这是第一种方式传参:'+this.$route.query.id) // 第二种传递参数的数据获取,需要匹配路由规则!!! console.log('这是第二种方式传参:'+this.$route.params.id) }, } var register = { template:"<h1>注册组件</h1>" } var routerobj = new VueRouter({ routes:[ {path:'/',redirect:'/login'}, {path:'/login',component:login}, {path:'/login/:id',component:login}, {path:'/register',component:register}, ], linkActiveClass:'mylinkactive', }) var vm = new Vue({ el:'#app', router:routerobj, }) </script> </body> </html>
vue 路由嵌套
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <link href="css/bootstrap.min.css"/> </head> <body> <div id="app"> <router-link to='/index'>首页</router-link> <router-view></router-view> </div> <template id="shouye"> <div> <h1>首页</h1> <!-- 注意:这子路由节点,加/ 或者 不加 / 直接影响匹配的路由路径, 当不加的/ 时 访问路径为 /父路径/子路径 加了/ 时 访问的路径为 /子路径 --> <!-- 这种是不加斜线的方式 --> <router-link to='/index/login'>登录</router-link> <router-link to='/index/register'>注册</router-link> <!-- 这种是加斜线的方式 --> <!-- <router-link to='/login'>登录</router-link> <router-link to='/register'>注册</router-link> --> <router-view></router-view> </div> </template> <script> var index = { template:'#shouye', } var login = { template:"<h1>登录组件</h1>", } var register = { template:"<h1>注册组件</h1>", } var routerobj = new VueRouter({ routes:[ { path:'/index', component:index, children:[ // 注意:这子路由节点,加/ 或者 不加 / 直接影响匹配的路由路径, // 当不加的/ 时 访问路径为 /父路径/子路径 // 加了/ 时 访问的路径为 /子路径 // 推荐 子路由不加斜线 // 归纳总结:一个是相对路径方式,一个是绝对路径的方式 {path:'login',component:login}, {path:'register',component:register}, // {path:'/login',component:login}, // {path:'/register',component:register}, ], }, ], }) var vm = new Vue({ el:'#app', router:routerobj, }) </script> </body> </html>
vue命名视图 实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <link href="css/bootstrap.min.css"/> <style type="text/css"> body{ margin: 0 auto; } .header{ height: 160px; width: 100%; background-color: #00FFFF; } .container{ display: flex; height: 700px; } .left{ background-color: firebrick; flex: 2; } .main{ background-color: yellowgreen; flex: 8; } </style> </head> <body> <div id="app"> <router-view name='default'></router-view> <div class='container'> <router-view name='left'></router-view> <router-view name='main'></router-view> </div> </div> <script> var indextop = { template:'<div class="header">banner条</div>', } var indexlelf = { template:"<div class='left'><ul><li>首页</li><li>事件1</li><li>事件2</li><li>事件3</li><li>事件4</li></ul></div>", } var indexmain = { template:"<div class='main'>main 内容区域 <router-view></router-view> </div>", } var routerobj = new VueRouter({ // 注意!!!! // 指向单个路由对象使用的是:component, // 指向多个路由对象使用的是:components, // 注意是否加s routes:[ { path:'/', components:{ 'default':indextop, 'left':indexlelf, 'main':indexmain, }, }, ], }) var vm = new Vue({ el:'#app', router:routerobj, }) </script> </body> </html>
VUe监控属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <link href="css/bootstrap.min.css"/> </head> <body> <!-- wathch、computer 和 methods 之间的对比: 1.computed 属性的结果会被缓存,除非依赖的响应属性变化才会重新计算,主要当做属性来使用; 2.methods 方法表示一个具体的操作,主要书写业务逻辑 3.watch 一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作; 可以看做computed 和 methods 的结合体. watch提供了新旧值的记录 --> <div id="app"> <div> <p>第一种实现方式:(keyup + methods方式)</p> <input type="text" v-model="n1" @keyup='getn3' /> + <input type="text" v-model="n2" @keyup='getn3' /> = <input type="text" v-model="n3" /> </div> <div> <p>第二种实现方式:(watch方式)</p> <input type="text" v-model="nn1" /> + <input type="text" v-model="nn2" /> = <input type="text" v-model="nn3"/> </div> <div> <!-- 在computed 中,可以定一些属性,这些属性叫做 计算属性. 本质上是一个方法,但是在使用这些计算属性的时候 是把它的名称直接当做属性来使用 并不会把计算属性,当做方法去调用 --> <p>第三种实现方式:(computed方式)</p> <p>注意这里data属性中没有定义nnn3属性,nnn3属性是computed提供的,computed需要返回值</p> <input type="text" v-model="nnn1" /> + <input type="text" v-model="nnn2" /> = <input type="text" v-model="nnn3"/> </div> </div> <script> var vm = new Vue({ el:'#app', data:{ n1:'', n2:'', n3:'', nn1:'', nn2:'', nn3:'', nnn1:'', nnn2:'', }, methods:{ getn3(){ this.n3 = this.n1 + '-' + this.n2 }, }, watch:{ nn1(){ this.nn3 = this.nn1 + '-' + this.nn2 }, nn2(){ this.nn3 = this.nn1 + '-' + this.nn2 }, // watch提供了新旧值的记录 nn3(newvalue,oldvlue){ console.log(newvalue,'----',oldvlue) }, }, computed:{ // 'nnn3':function(){ // return this.nnn1 + '-' + this.nnn2 // }, nnn3(){ return this.nnn1 + '-' + this.nnn2 }, }, }) </script> </body> </html>
VUE render函数 模板渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> </div> <script> var login = { template:'<h1>登录组件</h1>' }; var vm = new Vue({ el:'#app', data:{}, methods: {}, components:{}, render(h) { return h(login) }, }); </script> </body> </html>