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.offsetWidthel.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 οnhashchange="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>
