进阶Vue
1，定制私有指令
<div id="app">
<p v-fontSize="50">域名都过期了，狗屁玩意儿p>
div>
<script>
var app=new Vue({
el:"#app",
directives:{
'fontWeight':{
bind:function(el,binding){
el.style.color=binding.value
}
},
'fontSize':function(el,binding){ //注意：这个function等同于把代码写到了bind和update中去
el.style.color=binding.value
}
}
});
script>
2, 动画-使用钩子函数模拟小球半场动画
<div id="app">
<input type="button" value="添加到购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-if="flag">div>
transition>
div>
<script>
var app=new Vue({
el:"#app",
data:{
flag:false
},
methods:{
//动画钩子函数的第一个函数，el表示要执行动画的那个dom元素，是个原生的js dom对象
//大家可以认为，el是通过document.getElementById的方式获取到的原生js dom对象
beforeEnter(el){
//beforeEnter表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中设置元素开始动画之前
//的起始样式 设置动画之前的起始位置
el.style.transform="translate(0,0)"
},
enter(el,done){
//这句话没有实际的作用，但是如果不写，出不来动画效果
//可以认为el.offsetWidth会强制动画刷新
el.offsetWidth
//enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform="translate(150px,450px)"
el.style.transition="all 1s ease"
//这里的done，其实就是afterEnter这个函数，也就是说，done是afterEnter函数的引用
done()
},
afterEnter(el){
//动画完成之后，会调用afterEnter函数
this.flag=!this.flag
}
}
});
script>
3, 父组件向子组件传值
<div id="app">
<test v-bind:parentmsg="msg">test>
div>
<script>
new Vue({
el:"#app",
data:{
msg:"父组件的data"
},
components:{
// 子组件中默认无法访问到父组件的data上的数据和methods中的方法
test:{
data(){ //子组件的data数据并不是通过父组件传递过来的，而是子组件自身私有的，比如说
//子组件通过ajax，请求回来的数据，都可以放在data身上
//data的数据可读可写
return {
title:"123",
content:"lala"
}
},
template:'这是子组件---{{parentmsg}}
',
// 组件中的所有props的数据，都是通过父组件传递给子组件的
//props的数据都是只可读，无法重新赋值
props:['parentmsg'] //把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
}
}
});
script>
4, 跑马灯效果
<div id="app">
<button v-on:click="start">浪起来button>
<button v-on:click="stop">低调button>
<p> {{message}}p>
div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"猥琐发育，别浪~~！",
dingshiqi:null
},
methods:{
start:function(){
var _this=this
if(this.dingshiqi!==null){
return
}
this.dingshiqi=setInterval(function(){
var first=_this.message.substring(0,1)
var last=_this.message.substring(1)
_this.message=last+first
},400)
},
stop:function(){
clearInterval(this.dingshiqi)
this.dingshiqi=null
}
}
});
script>
5, 品牌列表案例
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>添加品牌h3>
div>
<div class="panel-body form-inline">
<label>
id:
<input type="text" class="form-control" v-model="id">
label>
<label>
name:
<input type="text" class="form-control" v-model="name">
label>
<input type="button" v-on:click="add" value="添加" class="btn btn-primary">
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>idth>
<th>nameth>
<th>cTimeth>
<th>Operationth>
tr>
thead>
<tbody>
<tr v-for="item in list" v-bind:key="item.id">
<td>{{item.id}}td>
<td>{{item.name}}td>
<td>{{item.cTime}}td>
<td><a v-on:click="del(item.id)" style="cursor:pointer">删除a>td>
tr>
tbody>
table>
div>
<script>
var app=new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"奔驰",cTime:new Date()},
{id:2,name:"宝马",cTime:new Date()},
]
},
methods:{
add:function(){
var car={id:this.id,name:this.name,cTime:new Date()}
this.list.push(car)
this.id=""
this.name=""
},
del(id){
//alert(id); 第一种方法
//some()方法，遍历数组的每一项，若其中一项为 true，则返回true；
// this.list.some((item,i)=>{
// if(item.id==id){
// //splice() 方法可删除数组从 index 处开始的零个或多个元素
// this.list.splice(i,1);
// //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
// return true;
// }
//})
//第二种方法
//findIndex是最新出来的一个方法，是得到寻找条件的索引值
var index=this.list.findIndex(i=>{
if(i.id==id){
return true;
}
})
this.list.splice(index,1);
}
}
});
script>
6, 全局配置数据接口的根域名
<div id="app">
<input type="button" value="get请求" @click="getInfo">
div>
<script>
//如果我们配置了请求的数据接口的根域名，则在每次单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带/
//否则不会启用根路径做拼接。
Vue.http.option.root='http://vue.studyit.io/';
new Vue({
el:"#app",
methods:{
getInfo(){ //发送get请求
//本来请求路径是http://vue.studyit.io/api/getList，现在把根域名提取出来作为全局配置
//然后再get中和接口拼接就可以了 全局配置根域名+接口地址
// this.$http.get('http://vue.studyit.io/api/getList').then(function(result){
// console.log(result)
// })
this.$http.get('api/getList').then(function(result){
console.log(result)
})
}
}
});
script>
7, 全局配置emulateJSON选项
<div id="app">
<p>{{name}}p>
姓名：
<input type="button" value="post请求" @click="postInfo">
div>
<script>
//全局启用emulateJSON选项
Vue.http.options.emulateJSON=true;
new Vue({
el:"#app",
data:{
name:"sdf"
},
methods:{
postInfo(){ //发送post请求
this.$http.post('api/getList',{name:this.name}).then(result=>{
if(result.body.status===0){
//成功了
//调用getList刷新列表（这里没有）
}
})
}
}
});
script>
8, 生命周期函数-组件创建期间的四个钩子函数
<div id="app">
<input type="button" value="改变msg" @click="change">
<p id="h3">{{msg}}p>
div>
<script>
new Vue({
el:"#app",
data:{
msg:"啦啦啦"
},
methods:{
show(){
//alert("执行了show方法");
},
change(){
this.msg="No"
}
},
beforeCreate(){//这是我们遇到的第一个生命周期函数，表示实例在完全创建出来之前，会执行它
//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化。
this.show()
},
created(){ //这是遇到的第二个生命周期函数
console.log(this.msg)
this.show()
//在created中，data和methods都已经被初始化好了
//如果要调用methods中的方法或者操作data中的数据，最早只能在created中进行操作
},
beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
//console.log( document.getElementById("h3").innerText)
//在beforMount执行的时候页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted(){ //这是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
//console.log( document.getElementById("h3").innerText)
//注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了
//此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
},
//接下来是运行中的两个事件
beforeUpdate(){ //这时候表示我们的界面还没有被更新
// console.log("页面上的元素是"+ document.getElementById("h3").innerText)
// console.log("data中的msg的数据是"+this.msg)
//得出结论：当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
},
updated(){
console.log("页面上的元素是"+ document.getElementById("h3").innerText)
console.log("data中的msg的数据是"+this.msg)
//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
},
beforeDestroy(){
//当执行beforeDestroy钩子函数时，vue实例就已经从运行阶段进入到了销毁阶段
//当执行beforeDestroy时，实例身上所有的data和所有的methods以及过滤器，指令等等都处于可用状态
//此时，还没有真正执行销毁的过程
},
destroyed(){
//当执行destroyed函数时，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器等等全部不可用了
}
});
script>
9, 使用第三方animate.css类库实现动画
首先导入css包
<script src="../code/lib/vue.min.js">script>
<link rel="stylesheet" href="../code/lib/animate.css">
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<h3 v-if="flag">这是一个标题h3>
transition>
div>
<script>
var app=new Vue({
el:"#app",
data:{
flag:false
}
});
script>
10, 使用过渡类名实现动画
<style>
/*
v-enter，这是一个时间点，是进入之前，元素的起始状态，此时还没有进入
v-leave-to，这是一个时间点，是动画离开之后，离开的终止状态，此时，元素动画已经结束了
*/
.v-enter,
.v-leave-to{
opacity: 0;/*透明度*/
/* transform: translateX(150px);这个是设置h3是从右向左滑动出现的 */
}
/*
v-enter-active 入场动画的时间段
v-leave-active 离场动画的时间段
*/
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
.my-enter,
.my-leave-to{
opacity: 0;/*透明度*/
transform: translateY(150px);/*这个是设置h3是从右向左滑动出现的 */
}
/*
v-enter-active 入场动画的时间段
v-leave-active 离场动画的时间段
*/
.my-enter-active,
.my-leave-active{
transition: all 1s ease;
}
style>
head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition>
<h3 v-if="flag">这是一个H3h3>
transition><br>
<input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h3 v-if="flag2">这是一个H3h3>
transition>
div>
<script>
new Vue({
el:"#app",
data:{
flag:false,
flag2:false
}
});
script>
body>
11, 使用transition-group元素实现列表动画
<style>
li{
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 13px;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
/* 删除动画
下面的v-move和v-leave-active配合使用，能够实现列表后续的元素，渐渐的漂上来的效果
*/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
style>
head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
label>
<label>Name:
<input type="text" v-model="name">
label>
<input type="button" value="添加" @click="add">
div>
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
li>
transition-group>
div>
<script>
var app=new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"赵高"},
{id:2,name:"王盼"},
{id:3,name:"张浩"},
{id:4,name:"袁梦阳"}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
this.id=this.name=""
},
del(i){ //删除也要实现动画
this.list.splice(i,1)
}
}
});
script>
body>
12, 为什么组件的data必须是一个function
<div id="app">
<test>test>
div>
<template id="temp">
<div>
<input type="button" value="加一" v-on:click="increment">
{{count}}
div>
template>
<script>
//计数器组件，点击按钮，数量加一
var dataObj={count:0} //创建一个对象
Vue.component("test",{
template:"#temp",
data:function(){
return dataObj;
},
methods:{
increment(){
this.count+=1
}
}
})
var app=new Vue({
el:"#app"
});
script>
13, 自定义按键修饰符
<div id="app">
<input type="text" v-model="message" v-on:keyup.f2="add()">
div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"12345"
},
methods:{
add:function(){
alert(this.message)
}
}
});
Vue.config.keyCodes.f2=113
script>
14, 自定义全局指令让文本框获取焦点
<div id="app">
<input type="text" v-focus v-color="'yellow'">
div>
<script>
// 使用Vue.directive()定义全局的指令 v-focus
// 其中参数一：指令的名称，在定义的时候，指令名称前面不需要加“V-”前缀，但是，在调用的时候必须加上“V-”前缀来进行调用。
// 参数二：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。
Vue.directive("focus",{
bind:function(el){
// 每当指令绑定在元素上时，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数永远时el，表示被绑定了指令的那个元素，这个el参数，是个原生的js对象
//在元素刚绑定指令的时候，还没有查到dom中去，这时候调用focus方法不起作用
//因为一个元素只有插入dom之后才能获取焦点
// alert("我先出来然后才让你聚焦")
},
inserted:function(el){ //inserted表示元素插入到dom的时候会执行inserted函数（触发一次）
el.focus()
},
updated:function(){ //当vNode更新的时候会执行updated，可能会触发多次
}
})
//自定义一个设置字体颜色的指令
// 设置颜色指令的第一种方式
// Vue.directive("color",{
// bind:function(el){
// el.style.color="red" //和样式相关的操作，一般都可以在bind中执行
// }
// })
// 设置颜色指令的第二种方式
// 使用钩子函数的第二个参数binding拿到传递的值
Vue.directive("color",{
bind:function(el,binding){
el.style.color=binding.value
}
})
new Vue({
el:"#app"
});
script>
15, 组件-创建组件的方式1
<div id="app">
<my-com1>my-com1>
div>
<script>
//1.1 使用Vue.extend来创建全局的Vue组件
var com1=Vue.extend({
template:"这是使用Vue.extend创建的组件
" //通过template属性，指定了组件要展示的html结构
})
//1.2 使用Vue.component("组件的名称",创建出来的组件模板对象)
//Vue.component定义全局组件的时候，组件名如果使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写，同时两个单词之间用“-”链接
Vue.component("myCom1",com1)
// 还可以这样写
// Vue.component("mycom",Vue.extend({
// template:"这是使用Vue.extend创建的组件
"
// }))
var app=new Vue({
el:"#app"
});
script>
16, 组件-创建组件的方式2
<div id="app">
<my>my>
div>
<script>
Vue.component("my",{
//注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
template:"这是直接使用Vue.component创建出来的组件
123"
})
var app=new Vue({
el:"#app"
});
script>
17, 组件-创建组件的方式3
<div id="app">
<mycom3>mycom3>
div>
<div id="app2">
<login>login>
div>
<template id="temp">
<div>
<h2>这是组件h2>
<span>123span>
div>
template>
<script>
Vue.component("mycom3",{
template:"#temp"
});
var app=new Vue({
el:"#app"
});
// 使用components属性定制私有组件
new Vue({
el:"#app2",
components:{
login:{
template:"定制私有组件
"
}
}
});
script>
18, 组件切换-方式1
<div id="app">
<a href="" @click.prevent="isShow=true">登陆a>
<a href="" @click.prevent="isShow=false">注册a>
<login v-if="isShow==true">login>
<register v-if="isShow==false">register>
div>
<script>
Vue.component("login",{
template:"登陆模块
"
});
Vue.component("register",{
template:"注册模块
"
});
var app=new Vue({
el:"#app",
data:{
isShow:true
}
});
script>
19, 组件切换-方式2
<div id="app">
<a href="" @click.prevent="comName='login'">登陆a>
<a href="" @click.prevent="comName='register'">注册a>
<component :is="comName">
component>
div>
<script>
Vue.component("login",{
template:"登陆模块
"
});
Vue.component("register",{
template:"注册模块
"
});
var app=new Vue({
el:"#app",
data:{
comName:"login" //当前component中的:is绑定的组件的名称
}
});
script>
20, 组件切换动画
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
style>
head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登陆a>
<a href="" @click.prevent="comName='register'">注册a>
<transition mode="out-in">
<component :is="comName">component>
transition>
div>
<script>
Vue.component("login",{
template:"登陆模块
"
});
Vue.component("register",{
template:"注册模块
"
});
var app=new Vue({
el:"#app",
data:{
comName:"login"
}
});
script>
21, 组件中的data和methods
<div id="app">
<test>test>
div>
<script>
// 组件可以有自己的data数据，组件的data和实例的data不一样，实例中的data可以是一个对象
//但是组件中的data必须是一个方法
//组件中的data除了必须为一个对象之外，这个方法内部还必须返回一个对象才行。
//组件中的data数据，使用方式，和实例中的使用方式完全一样
Vue.component("test",{
template:"这是个组件---{{msg}}
",
data:function(){
return {
msg:"这是组件的data"
}
}
})
var app=new Vue({
el:"#app"
});
script>
22, vue-resource发起get,post,jsonp请求
<script src="../code/lib/vue.min.js">script>
<script src="../code/lib/vue-resource.js">script>
<title>Documenttitle>
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>
new Vue({
el:"#app",
methods:{
getInfo(){ //发送get请求
//当发起get请求之后，通过.then来设置成功的回掉函数
this.$http.get('../code/lib/test.json').then(function(result){
console.log(result)
})
},
postInfo(){//发起post请求
//手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
//通过post方法的第三个参数，{emulateJSON:true}设置提交的内容类型为普通表单数据格式
this.$http.post('../code/lib/test.json',{},{emulateJSON:true}).then(result=>{
console.log(result.body)
})
},
jsonpInfo(){ //发起jsonp请求
this.$http.jsonp('jsonp地址').then(result=>{
console.log(result.body)
})
}
}
});
script>
body>
23, Vue定制私有过滤器
<div id="app2">
{{time | dataFormat}}
div>
<script>
// 全局过滤器，就是所有的vue实例都可以共享使用的
//定制私有过滤器（局部）
var app2=new Vue({
el:"#app2",
data:{
time:new Date()
},
filters:{ //定制私有过滤器，过滤器有两个条件（过滤器名称和处理函数）
dataFormat:function(dataStr){
//根据给定的时间字符串，得到特定的时间
var time=new Date(dataStr)
var y=time.getFullYear()
//padStart 填充 填充到一共2位，没有的用0填充 从前开始填充
//padEnd 从后开始填充
var m=(time.getMonth()+1).toString().padStart(2,"0")
var d=time.getDate()
return `${y}-${m}-${d}`
}
}
});
script>
24, vue全局过滤器的基本使用
<div id="app">
{{message | messageFormat}}
div>
<div id="app2">
{{time}}
div>
<script>
//先定义一个Vue全局过滤器，名字叫做messageFormat
//需要先声明一下过滤器，然后再创建Vue实例，否则过滤器无效
Vue.filter("messageFormat",function(message){
return message.replace(/啦/g,"杀");
// 把所有的啦替换成杀
})
var app=new Vue({
el:"#app",
data:{
message:"哈哈哈啦哈哈哈啦"
}
});
var app2=new Vue({
el:"#app2",
data:{
time:new Date()
}
});
//过滤器的基本语法 Vue.filter('过滤器的名称',function(){})
//过滤器的function的第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
// Vue.filter('过滤器的名称',function(data){
// return data+"123"
// })
script>
body>
html>
25, 父组件把方法传递给子组件
<div id="app">
<com v-on:func="show">com>
div>
<template id="test">
<div>
<h1>这是子组件h1>
<input type="button" value="这是子组件的按钮，点击它，触发父组件传递过来的func方法" @click="myClick" />
div>
template>
<script>
var com={
template:"#test",
methods:{
myClick(){
this.$emit('show')
}
}
}
var app=new Vue({
el:"#app",
components:{
com
},
methods:{
show(){
console.log("调用了父组件身上的show方法")
}
}
});
script>
26, 组件案例-评论列表
<div id="app">
<comment @func="loadComments">comment>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.user}}span>
{{item.content}}
li>
ul>
div>
<script>
// 定义发表评论的组件
Vue.component("comment",{
template:'',
data(){
return {
user:'',
content:''
}
},
methods:{
postComment(){//发表评论的方法
var comment={id:Date.now(),user:this.user,content:this.content}
//从localstorage中获取所有的评论（是把评论存放在了localstorage中）
var list = JSON.parse(localStorage.getItem('test')||'[]')
// list.push(comment)
//unshift保存数据时是在最上边
list.unshift(comment)
//重新保存评论的数据
localStorage.setItem("test",JSON.stringify(list))
this.user=this.content=''
this.$emit("func")
}
}
})
var app=new Vue({
el:"#app",
data:{
list:[
{id:Date.now(),user:"李白",content:"天生我才必有用"},
{id:Date.now(),user:"王盼",content:"啥时候才能下班啊"},
{id:Date.now(),user:"张浩",content:"你赶紧给我滚犊子把"}
]
},
methods:{
loadComments(){//从本地的localStorage中加载评论列表
var list=JSON.parse(localStorage.getItem("test")||"[]")
this.list=list
}
},
beforeCreate(){},//注意：这里不能调用loadComments方法，因为在执行这个钩子函数的时候，data和methods函数
//都还没有被初始化
created(){
this.loadComments()
}
});
script>
27, ref获取DOM元素和组件
<div id="app">
<input type="button" value="获取文本" @click="getValue" ref="myBtn">
<h3 id="hh" ref="test">天气真的好h3>
<zujian ref="myTemplate">zujian>
div>
<template id="test">
<h3>这是组件h3>
template>
<script>
Vue.component("zujian",{
template:"#test",
data(){
return {
msg:"哈哈哈"
}
},
methods:{
show(){
console.log("调用了show方法")
}
}
})
var app=new Vue({
el:"#app",
methods:{
getValue(){
//ref获取元素的文本
//console.log(this.$refs.test.innerText)
//ref获取子组件的data
//console.log(this.$refs.temp.msg)
this.$refs.myTemplate.show()
}
}
});
script>
28, 路由的基本使用
<script src="../code/lib/vue.min.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<style>
/* .router-link-active{
color: red;
font-size: 20px;
} */
.myActive{
color: red;
font-size: 20px;
}
/* 切换动画的两组样式 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
style>
<title>Documenttitle>
head>
<body>
<div id="app">
<transition mode="out-in">
<router-view>router-view>
transition>
<router-link to="/login" tag="sapn">登陆router-link>
<router-link to="/register">注册router-link>
div>
<script>
//组件的模板对象
var login={
template:"登陆组件
"
}
var register={
template:"注册组件
"
}
// 2,创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数传递一个配置对象
var routerObj=new VueRouter({
// route 这个配置对象中的route表示路由匹配规则
routes:[//路由匹配规则
//每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
//属性1：path 表示监听 哪个路由链接地址
//属性2：component 表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
//注意：component的属性值 必须是一个组件的模板对象，不能是组件的引用名称
//{path:"/",component:login}, 默认展示某个组件,可以实现，但不推荐
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
],
linkActiveClass:"myActive" //设置选中路由高亮的类，在css进行样式渲染，这里是自定义类名，默认类名是router-link-active
});
var app=new Vue({
el:"#app",
router:routerObj //将路由规则对象，注册到app实例上，用来监听url地址的变化，然后展示对应的组件
});
script>
29, 路由规则中定义参数
<div id="app">
<router-link to="/login?id=10&name=王盼">登陆router-link>
<router-link to="/register">注册router-link>
<router-view>router-view>
div>
<script>
var login={ //使用{{$route.query.id}}接收显示参数
template:"登陆组件---{{$route.query.id}}---{{$route.query.name}}
"
}
var register={
template:"注册组件
"
}
var router=new VueRouter({
routes:[
{path:"/login",component:login},
{path:"/register",component:register}
]
});
var app=new Vue({
el:"#app",
router:router
});
script>
30, 路由规则传参方式2
<div id="app">
<router-link to="/login/12/李四">登陆router-link>
<router-link to="/register">注册router-link>
<router-view>router-view>
div>
<script>
var login={
template:"登陆组件---{{$route.params.id}}--{{$route.params.name}}
"
}
var register={
template:"注册组件
"
}
var router=new VueRouter({
routes:[
{path:"/login/:id/:name",component:login},
{path:"/register",component:register}
]
});
var app=new Vue({
el:"#app",
router:router
});
script>
31, 路由的嵌套
<div id="app">
<router-link to="/account">Accountrouter-link>
<router-view>router-view>
div>
<template id="test">
<div>
<h3>这是account组件h3>
<router-link to="/account/login">登陆router-link>
<router-link to="/account/register">注册router-link>
<router-view>router-view>
div>
template>
<script>
//组件的模板对象
var account={
template:"#test"
}
var login={
template:"登陆模块
"
}
var register={
template:"注册模块
"
}
//创建路由对象
var router=new VueRouter({
routes:[{
path:"/account",
component:account,
children:[
{path:"login",component:login},
{path:"register",component:register}
]
}],
// 实现子路由的嵌套
component:account,
children:[
{path:"login",component:login},
{path:"register",component:register}
]
});
var app=new Vue({
el:"#app",
router
});
script>
32, 路由-命名视图实现经典布局
<style>
*{
padding:0;
margin:0;
}
.header{
background-color: orange;
height: 100px;
}
.container{
display: flex;
height: 570px;
}
.left{
background-color: gray;
flex: 2;
}
.main{
background-color: blueviolet;
flex: 8;
}
style>
head>
<body>
<div id="app">
<router-view>router-view>
<nav class="container">
<router-view name="left">router-view>
<router-view name="main">router-view>
nav>
div>
<script>
var header={
template:"Header头部区域
"
}
var leftBox={
template:"leftBox侧边栏区域
"
}
var mainBox={
template:"mainBox主体区域
"
}
//创建路由对象
var router=new VueRouter({
routes:[{
path:"/",components:{
"default":header,
"left":leftBox,
"main":mainBox
}
}]
});
var app=new Vue({
el:"#app",
router
});
script>
33, 名称拼接案例
<div id="app">
姓 <input type="text" v-model="firstName">+名<input type="text" v-model="lastName">=姓名<input type="text" v-model="fullName">
div>
<script>
var app=new Vue({
el:"#app",
data:{
firstName:"",
lastName:"",
fullName:""
},
watch:{//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
"firstName":function(newVal,oldVal) {//newVal是改变之后的数据，oldVal是改变之前的数据
//这里只需要newVal就够了
this.fullName=newVal+this.lastName
},
"lastName":function(newVal){
this.fullName=this.firstName+newVal
}
}
});
script>
34, watch-监视路由地址的改变
<div id="app">
<router-link to="/login">登陆router-link>
<router-link to="/register">注册router-link>
<router-view>router-view>
div>
<script>
var login={
template:"登陆模块
"
}
var register={
template:"注册模块
"
}
var router=new VueRouter({
routes:[
{path:"/login",component:login},
{path:"/register",component:register}
]
});
var vm=new Vue({
el:"#app",
router,
watch:{
"$route.path":function(newVal,oldVal){
if(newVal==="/login"){
console.log("欢迎登陆")
}else{
console.log("欢迎注册")
}
}
}
});
script>
35, computed计算属性-名称拼接案例2
<div id="app">
姓 <input type="text" v-model="firstName">+名<input type="text" v-model="lastName">=姓名<input type="text" v-model="fullName">
div>
<script>
var app=new Vue({
el:"#app",
data:{
firstName:"",
lastName:"",
},
// 只要计算属性的function方法内部所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值
//计算属性的求值结果，会被缓存起来，方便下次直接使用。
computed:{
"fullName":function(){
return this.firstName+this.lastName
}
}
});
script>