svg
SVG 意为可缩放矢量图形（Scalable Vector Graphics） ，是使用 XML 来描述二维图形和绘图程序的语言。
1.SVG基本属性-填充、描边和变换
fill 定义填充颜色
stroke 定义边框颜色
stroke-width 定义边框高度
2.<rect>标签用来创建矩形
x 起点的X轴坐标
x 起点的Y轴坐标
width 矩形的宽度
heigth 矩形的高度
3.<circle>标签用来创建圆心
cx 圆心的X轴的位置
cy 圆心的Y轴的位置
R 圆的半径
4.<path> 标签用来创建折线 复杂的路径标签
d = “”
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置(只是直线，直线是没有宽度的，所以你什么也看不到。)
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
M 起点X，起点Y L（直线）终点X，终点Y H（水平线）终点X V（垂直线）终点Y
<svg width
='500' height
='400'>
<rect x
="10" y
="10" width
="200" height
="100" style
="fill
:none
;
stroke
-width
:1; stroke
: #
000"
></rect
>
<circle cx
="250" cy
="200" r
="50" style
="fill:none; stroke-width:1; stroke:orangered"/>
<path d
="M300,400 L200,100 L300,100 L400,150"
fill
="none" stroke
="#000" stroke
-width
="1" />
</svg
>
二.数据可视化
d3使用的时候，必须注意版本，版本5以下与版本5中的命令不一样，所以使用时一定要注意版本
d3的基本语法
(1)d3.select(‘选取的标签’)：选中的是文档里的第一个标签（可以选取id、class名）
(2)d3.selectAll(‘选取的标签’)：选中所有的标签
(3)d3.selectAll(‘选取的标签’).datum(str).text((a,b)=>{ return a}):循环的是整个的标签（a是内容，b是对应的下标）
(4)d3.selectAll(‘选取的标签’).data(arr).text((a,b)=>{return a}):循环的是内容的下标（a是内容，b是对应的下标）
(5)d3.select(‘选取的标签’).text(str).style(‘’,’’):设置样式
三．d3 的折线图
d3.select(‘选取的标签’).append(‘添加的标签’)：在元素的后面添加；
d3.select(‘选取的标签’).insert(‘添加的标签’)：在元素的前面添加；
d3.select(‘选取的标签’).attr(‘要修饰的属性’，’属性值’)：在元素的后面添加
折线图实现
var input
= document
.getElementsByTagName('input')[0];
input
.oninput
= function
() {
var arr
= input
.value
.split(",");
line(arr
);
};
function
line(arr
) {
d3
.select('svg').remove();
var arr
=arr
;
var width
=500;
var height
=400;
var marginLeft
=30;
var marginTop
=30;
var g_width
=width
-marginLeft
*2;
var g_height
=height
-marginTop
*2;
d3
.select('div')
.append('svg')
.attr('width',width
)
.attr('height',height
);
d3
.select('svg')
.append('g')
.attr('width',g_width
)
.attr('height',g_height
)
.attr('transform',`
translate($
{marginTop
},$
{marginTop
})`
);
var sclaceX
= d3
.scaleLinear()
.domain([0,arr
.length
])
.range([0,g_width
]);
var sclaceY
= d3
.scaleLinear()
.domain([0,g_height
])
.range([g_height
,0]);
var line
= d3
.line()
.x((d
,i
)=>sclaceX(i
))
.y((d
,i
)=>sclaceY(d
));
d3
.select('g')
.append('path')
.attr('fill','none')
.attr('stroke','red')
.attr('d',line(arr
));
var x
= d3
.axisBottom()
.scale(sclaceX
);
d3
.select('g')
.append('g')
.call(x
)
.attr('transform',`
translate(0,$
{g_height
})`
);
var y
= d3
.axisLeft()
.scale(sclaceY
);
d3
.select('g')
.append('g')
.call(y
);
}
Vu：
1.官网地址[link](https://cn.vuejs.org/)
2.下载 Vue.js :npm install vue --save
3. 引入<script src="./node_modules/vue/dist/vue.js"></script>
4. 实例化
new Vue({
el
:"#app",
data
:{ msg
:123 } })
html
{{msg
}}
5.指令v-开头的
v-开头的:
v-html:改变标签内容 可以识别标签 一般不建议使用 安全问题 web安全
v-text:改变标签内容 不可识别标签 原样输出 建议使用这个就行
v-once:绑定数据， 只能绑定一次，修改的时候不会发生改变
v-bind: :绑定属性 简写 “：”
v-show:控制元素显示隐藏 display：none block
v-on ：简写 “@”（添加事件）
详情：
@click.stop 阻止事件冒泡
@click.prevent 阻止默认事件
@click.self 只能由标签自身触发
@click.once 程序运行期间只能执行一次
@click="btn6(myArg)" 事件传参, 如果是字符串, 请用单引号
注意: 如果传参, 再使用(), 如果不传, 可以省略()不写, 如果传实践对象, 要使用$event
6.v-if ---- v-else
<h1 v
-if="!flag">{{msg
}}</h1
>
<!--if作为判断条件，如果
if的flag值为
true，那么这个条件成立，
else的条件不显示
-->
<h1 v
-else>{{msg1
}}</h1
>
<!--else作为
if的执行条件，如果
if条件不成立，那么
else开始执行，（！flag 也就是flag的值是
false的时候就是显示
else）
-->
注：v-if和show的区别
1.v-show默认情况下都会加载dom
2.V-if如果条件是false的时候页面不渲染
V-if和v-show什么情况下使用
1.页面需要频繁切换的时候
2.页面渲染次数少，或者只需要一次切换的情况下
7.v
-for
数组：
<li v
-for="(item,index) in cars" v
-if="a<2">{{item
}}---{{index
}}</li
>
<!--item表示的遍历的每一项，a表示的是索引值（也就是下标）
-->
<!--可以加v
-if做判断（取模，取余）
-->
对象：
<h3 v
-for="(item,index) in obj">{{item
}}---{{index
}}</h3
>
<!--item表示的是key，index表示的是value
-->
<!--可以加v
-if做判断（取模，取余）
-->
8.v-model
v-model主要应用于表单标签上, value属性的绑定, 实现页面标签的value值和Vuejs变 量的双向绑定 (推荐使用v-model), 页面改变表单的值, 会同步给vuejs里的变量
绑定的是表单标签里的可变的属性，比如，text里面是value,checkbox、radio里面是checked值，
注意: 只有input和textarea以及select 等表单, 有v-model, 用v-model来给表单绑定值
例如: 输入框/密码框/多选/下拉/单选/textarea
注意: 多选框的v-model必须是一个数组类型)
注：
实例化函数里面的 data：数据，methods:函数事件
一．修饰符
1.阻止默认事件：
用（$event）传参：
<div class
="box" @contextmenu
="add($event)">
<!--传参的时候必须传$event（不然会报错）只有event事件的时候加$
-->
右键点击
</div
>
函数部分和js一样阻止事件：
add(ev
){
ev
.preventDefault();
alert(1)
},
用Vue阻止默认事件：
@contextmenu
.prevent：
<div class
="box" @contextmenu
.prevent
="add1">简单方法
</div
>
2.阻止冒泡事件：
用（$event）传参：
<div class
="box" @click
="play">
<!--传参的时候必须传$event（不然会报错）只有event事件的时候加$
-->
1
<div class
="sun" @click
="play($event)">
2
</div
>
</div
>
函数部分和js一样阻止冒泡事件
play(ev
){
ev
.stopPropagation();
alert(1)
}
用Vue阻止冒泡事件
@click
.stop：
<div class
="box" @click
="play1">简单方法
<div class
="sun" @click
.stop
="play1">
</div
>
3.失去焦点事件
v
-model
.lazy：
.lazy input事件 修改成change事件
<input type
="text" v
-model
.lazy
="msg"><br
>
4.去除首尾空格
v
-model
.trim：
<input type
="text" v
-model
.trim
="msg1">{{msg1
}}<input type
="text">
5.按键修饰符
$
(event
)传参
<input type
="text" v
-model
="msg" @keydown
="down($event)"><br
>
函数部分：
down(e
){
console
.log(e
.keyCode
);
if(e
.keyCode
===37){
console
.log("哈哈哈");
}
用Vue：
@keydown
.（可以
.keyCode的值，也可以直接
.名如left、enter）
<input type
="text" v
-model
="msg1" @keydown
.13="down1">
按键修饰符：
.enter
.13
.left
.37
.up
.38
.right
.39
.down
.40
.esc
.delete 删除 回退
.space 空格
二．设置属性
<div :style="sty">style动态绑定</div>
<div :style="{background:bg,color:cl,fontSize:sz}">另外的办法</div>
new Vue({
el:"#app",
data:{
sty:{
background:'yellow',
color:'#fff',
fontSize:'30px'
},
bg:'blue',
cl:'#fff',
sz:'50px'
},
三．Class动态绑定样式
1.普通形势：
<h1 class="red blue">class</h1>
<h1 :class="hong">class动态绑定</h1>
实例化部分：
hong:'red',//上面声明的class
lan:'blue',//上面声明的class
2.数组形式：
<h1 :class="cla">class动态绑定 词列表（数组形式）</h1>
实例化部分：
cla:['red','blue'],
3.对象形式
*注：对象形式的class是通过布尔值来判断的，如果属性是false是不添加，true是显示样式
<h1 :class="claObj">class动态 对象形式</h1>
实例化部分
claObj:{
red:false,//通过布尔值来控制的
blue:true//对象形式如果是true显示样式，false是不添加
}
Class动态绑定样式的事件：
增添值：This.$set(第一个值：操作的对象，第二个值：要修改的值，第三个值：修改的值)
/*this.hong = 'blue',普通事件修改*/
/*this.cla.push('font');给数组新增值*/
/*！！！this.cla[2] = 'font' vue里不能直接操作数组*/
/*复合数据：this.$set(taget(操作对象)，要修改的值，修改的值)*/
/*this.$set(this.cla,2,'font')数组修改和新增都是修改第二个值（修改的是改已有下标，添加的是已有下标的后面的下标）*/
this.$set(this.claObj,'font',true)/*对象修改和新增也都是控制的第二个值（修改已有的有两个值（一个是false一个是true），新增值第二个值天属性，第三个值true 让它显示就可以了）*/
Watch：深监听（一般用于数组、对象）
watch:{
//msg(){}浅监听 如果监听数据为 对象类型 则需要使用 深度监听
/*obj(newv){
console.log(newv);
} 这种形式深监听不行*/
obj:{
deep:true,//固定的值
handler(newV){//固定的值
console.log(newV.name)
}
}
}
new Vue({
el:'#app',
data:{
msg:'123',
obj:{
name:'ujiuye'
}
},
methods:{
},
watch:{
//msg(){}浅监听 如果监听数据为 对象类型 则需要使用 深度监听
/*obj(newv){
console.log(newv);
} 这种形式深监听不行*/
obj:{
deep:true,
handler(newV){
console.log(newV.name)
}
}
}
})
注：
实例化函数里面的 data：数据，methods:函数事件，computed：计算数据，
Watch：深监听
一.全局组件
全局组件：Vue实例里面的Component的方法有两个参数：
第一个参数：组件的名称（如果自定义名称是驼峰命名，引用的时候需要加"-"连词符），
第二个参数：组件内容：
template--->模板 遵循W3c 标签的嵌套 标签的嵌套一定要合理（所有都包含在一个标签里面最好用div）
data（）{return}（除了data不一样 其他都一样）
二.局部组件
局部组件有三种方法:
第一种:
在实例对象里面:
Components:{}来设置组件
components:{
//第1.创建子组件的第一种办法
heards:{
template:'
<div class="tou">头部{{hmsg}}
</div>',//这种方法是要在template里面设置div
data(){//data和实例化的不一样要写成函数形式之后return出去外面才能调用到这个值
return {
hmsg:'对对对'
}
}
},
},
注：在#app的div的标签里面引用一下这个声明的变量
<heards></heards>，
在实例化的components里创建
第二种：
声明变量：
var foot
= {
template
:'<div class="footer">{{msg}}</div>',
data(){
return {
msg
:'aaa'
}
}
};
注：在
在实例化的components里面声明一下这个这个变量
第三种：
在HTML里面创建
<template id
=’one’
></template
>(template就是个模板 所以要使用也要引用一下
)
之后声明变量：
var mains
= {
template:
"#mains",
data(){
return {
msg:
'引用'
}
}
}
;
注：在
在实例化的components里面声明一下这个变量
1.is：
is用来解决标签嵌套的问题
:is(动态绑定is) 用来切换组件
2.slot插槽
用插槽才能在’myvue’调用的标签里面添加属性
<myvue
>
<div slot
="one">//这里用slot接收要和模板里面设置的一样
<h1
>haha
</h1
>
<img src
="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3987907653,720009510&fm=26&gp=0.jpg" alt
="">
</div
>
</myvue
>
模板里设置：
<template id
="myvue">
<div
>
{{msg}}
<slot
name="one">插进来的
</slot
> //这里的
name名字传给上面的调用标签里面
<ul
>
<li v
-for="a in arr">{{a}}
</li
>
</ul
>
</div
>
</template>
3.组件传值之 父传子
组件传值 父传子 子组件调用父组件的数据
jq
--》prop 获取元素固有的属性 attr 获取自定义属性
vue 提供props 方法 可以把父组件的属性传递给子组件
给调用的标签设置自定义属性，调用父元素的值
<son
:nn
="msg" :ss
="cc"></son
>
在声明的子组件里方法把Props数据传给子组件
props
:[
组件传值 子传父
子传父：（触发事件可以可以是点击事件 键盘事件 或者是生命周期 moundet来触发事件 Vue $emit（）触发自定义事件）
两个参数：
第一个：自定义事件
第二个：是要传递给父组件的数据，数据的格式可是字符串 数组 数值 对象 布尔 等等都可以。
<div id
="app">
来自亲爱的儿子：
{{msg
.name
}}--{{msg
.word
}}
<son
@aa="aa($event)"></son
>
指令都写在调用的标签里，这里写一个自定义事件
</div
>
<template id
="son">
<div
class="one">
{{msg
}} <br
>
<button
@click="send()">发送
</button
>
<!--给模板里面的子元素添加一个事件
-->
</div
>
</template
>
<script
>
var son
= {
template
:'#son',
data(){
return{
msg
:'这是儿子里面的数据',
obj
:{
name
:'给爸爸的',
Word
:10000000
}
}
},
methods
:{
send(){
this.$
emit('aa',{json
:this.obj
})
}
}
};
new
Vue({
el
:'#app',
data:{
msg
:'',
},
methods
:{
aa(d
){
this.msg
= d
.json
;
},
},
components
:{
son
}
})
注意：实例化函数里面
data：数据，methods：函数事件，computed：计算数据
Watch
:深监听，Components
:调用数据模板
兄弟组件传值
定义一个中央事件总线，通过$emit 发送数据 通过$on 去监听并接受
创建点击事件，创建自定义属性
methods
:{
send(){
Even
.$emit('cc',this.str
)
}
}
.中央事件总线
新声明一个Vue(如同把Even
=a
,a
=b
,b
=Even
)
var Even
= new Vue()
.用mounted 监听事件
mounted(){
Even
.$on('cc',(d
)=>{
console
.log(d
)
this.str
= d
})
}
用Props验证
Props 即便不符合你的要求，也会渲染到页面，只不过会在控制台报错（没什么强制要求，只会在控制台验证）
props
:{
a
:Number
,
b
:{
type
:String
,
required
:true
},
c
:[Number
,String
],
e
:{
type
:Number
,
default:100
},
f
:{
type
:Array
,
default(){
return['你好']
}
},
g
:{
validator(val
){
return val
>20（如果值小于
20就报错）
}
}
}
表单
1.文本框和密码框：
<input type
="text" v
-model
="msg">{{msg
}}
<input type
="password" v
-model
="msg">{{msg
}}
2.单选框：（value值，默认的是sex：nv
,点男sex
:值变成nan）
<input type
="radio" name
="aa" value
="nan" v
-model
="sex">男
<input type
="radio" name
="aa" value
="nv" v
-model
="sex">女
{{sex
}}
3.多选框：
<!--复选框比较复杂，一般是看要状态还是要值，要状态就是布尔值，要值就是value的arr的数组
-->
布尔值：默认的flag状态是true选中的状态，在点一下不选中，状态变成false
<input type
="checkbox" v
-model
="flag">我已阅读同意条约
{{flag
}}
数组形式：
声明一个checkArr空数组，点那个复选框 那个复选框的状态变成true，之后添加到数组里面，
状态是false从数组消失，（这里点那个的数组里的值是根据value值来判断的，如果value值都一样，那么会全部选中）
<input type
="checkbox" name
="hobby" value
="学习" v
-model
="checkArr">学习
<input type
="checkbox" name
="hobby" value
="睡觉" v
-model
="checkArr">睡觉
<input type
="checkbox" name
="hobby" value
="逗小丽" v
-model
="checkArr">逗小丽
<input type
="checkbox" name
="hobby" value
="打王星" v
-model
="checkArr">打王星
<input type
="checkbox" name
="hobby" value
="打游戏" v
-model
="checkArr">打游戏
4.下拉列表
这里的v
-model写在select里面，根据value值做的判断
-multiple上传多个选择多个（file和下拉列表都可以用）
<select name
="" id
="" v
-model
="selt" multiple
>
<option value
="" disabled
></option
>
<option value
="html">html
</option
>
<option value
="css">css
</option
>
<option value
="js">js
</option
>
</select
>
5.文本域
<textarea v
-model
="text">马上下课了 哈哈哈哈
</textarea
>{{text
}}
四．声明周期
beforeCreate
(){//创建前 el data 都没有
console
.log
('-----beforeCreate-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
},
created
(){// 创建完成 el没有 data有了
console
.log
('-----created-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
},
beforeMount
(){ 挂载前有data 有el 出现的虚拟Dom
console
.log
('-----beforeMount-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
}
mounted
(){ 挂载 el data 都有了 一般请求数据都放在这个生命周期函数里面（用的最多）
console
.log
('-----mounted-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
}
beforeUpdata
(){ 数据发生该的时候才会触发（这是是虚拟效果）
console
.log
('-----beforeUpdate-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
}
Updata
(){ 数据改变之后有的
console
.log
('-----Update-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
}
beforeDestroy
(){ 销毁
console
.log
('-----beforeDestroy-------');
console
.log
('-----',this
.$data,'data','-------');
console
.log
('-----',this
.$el,'el','-------')
}
destroyed(){
console
.log('-----destroyed-------');
console
.log('-----',this.$data
,'data','-------');
console
.log('-----',this.$el
,'el','-------')
},
vm
.$mount('#app');
销毁的时候要：
btn
.onclick = function () {
vm
.$destroy()
}
五．动画
transition vue中的过渡动画标签 它有一个属性 就是 name
='类名' name相当于过渡类名 它有两种状态 v
-if v
-show 第一种状态 离开 leave leave离开 leave
-active 离开中 leave
-to 离开后 第二种状态 进入 enter enter 进入 enter
-active 进入中 enter
-to 进入之后
html
<transition name
='aa'> <div
class="box" v
-show
='isShow'></div
> </transition
> css
.aa
-leave
{ left
:100px
; } .aa
-leave
-active
{ transition
: all
2s
} .aa
-leave
-to
{ left
:1000px
; } .aa
-enter
{ left
:800px
; } .aa
-enter
-active
{ transition
: all
1s
} .aa
-enter
-to
{ left
:50px
; top
:200px
; }
引用第三方 animate
.css
<transition leave
-active
-class='animated rotateIn' enter
-active
-class = 'animated zoomIn'> <div
class="box" v
-show
='show'>asdasdsad
</div
> </transition
>
一．自定义属性
除了核心功能默认内置指令（V-model 和 V-show），Vue 也允许注册自定义指令。注意：在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 Dom 元素进行底层操作，这时候就会用到自定义属性
1.钩子函数 指令定义函数提供了几个钩子函数（可选）：
bind:只能调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document）。
Updata:第一次是紧跟在bind之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以互虐不要的模板更新（详细的钩子函数参数见下）。
ComponentUpdata:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令元素解绑时调用
2.钩子函数参数 指令钩子函数会被传入以下参数：
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含以下属性；
name:指令名，不包含 V-的前缀；
value:指令的绑定值：例如：v-my-directive="1+1"，value的值是2；
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'； arg：传给指令的参数；例如：v-my-directive:foo，
arg的值为 'foo'； modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,
'b':true
}
vnode:Vue编译的生成虚拟节点；
oldVnode:上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
全局式写法：
实例：
Vue
.directive('aa', {
bind(el
, binding
){
el
.style
.color
= 'blue';
el
.style
.color
= binding
.value
;
console
.log(binding
.value
, 3322);
console
.log(el
);
console
.log(binding
);
},
})
局部式写法：
实例：
directives
:{
img
:{
inserted(el
,binding
){
el
.style
.width
='300px';
el
.style
.height
='300px';
二．路由
介绍：
Vue router 是Vue.js 官方的路由管理器。他和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
在网页中，切换当前页面的某一部分，进行不同页面展示
文档:https://router.vuejs.org/zh/
下载地址：https://unpkg.com/vue-router/dist/vue-router.js
路由一共五部:
<!--1.引入路由--
>
<script src
="vue-router.js"></script
>
/*
<!--2.定义组件--
>*/
//定配实挂
var index
={
template:
'#index'
};
var list
={
template:
'#list'
}
var set
={
template:
'#set'
};
/*3.配置路由*/
var routes
=[
{
path:
'/index',//接口
component:index//组件
},
{
path:
'/list',
component: list
},
{
path:
'/set',
component:set
}
];
/*4.实例化路由*/
var router
= new VueRouter
({
routes:routes//routes是固定的值
})
/*5.挂在路由*/
new Vue
({
el:
'#app',
router,//在这里挂在到路由
data:
{
},
components:
{
index
}
})
//在app里面
<router-link to
="/index">首页
</router-link
> | //调用路由的路径
<router-link to
="/list">列表
</router-link
> | //调用路由的路径
<router-link to
="/set">设置页
</router-link
> | //调用路由的路径
<router-view
></router-view
>//这个必须写 不然页面调用路由的效果不能出来
<!-- 如果想要修改当前路由的router-link的样式，可以使用active-class属性。 --
>
工作过程
无需在Vue 实例中，声明Components 字段注册组件了，因为当前路由列表里，已经配置好了对应的组件 在地址栏的井号后面，当你访问对应的path路径时 ，就会把相应的Component组件渲染到对应router-view上
注意：url中从井号开始往后，就要匹配的路由的path路径，路由默认的路径时/
注意：为了在对象中，实现对象的简化写法，routes和router变量要固定
设置初始路径
选择默认模板
{ path:
'*', component:aa
},
选择默认路径
{ path:
'*', redirect:
'/a' }
A标签调用：（a标签调用的时候要记得写
<a href
="#/one">首页
</a
>
<a href
="#/two">列表
</a
>
<a href
="#/three">设置页
</a
>
<router-view
></router-view
>
<!--router-view显示的作用--
>
其他标签:（设置同一个点击事件，参数传的是路由）
<span @click
="active('one')">首页
</span
>
<span @click
="active('two')">列表
</span
>
<span @click
="active('three')">设置页
</span
>
编程试导航
在Vue实例内部，你可以通过 $ router 访问路由实例。
（
1）push
:
router
.push(location
.onComplete
?,onAbort
?)想要导航到不同的 url
,则使用 router
.push 方法。这个方法会向 historg 栈添加一个新的记录，所以当用户点击浏览器后退按钮时 ，则回到之前的 url。具体使用如下
:
字符串
:
router
.push('home')
对象
router
.push({path
:'home'})
命名的路由
router
.push({name
:'url',params
:{userld
:'123'}})
带查询参数，变成
/register
?plan
=private
router
.push({path
:'register',query
:{plan
:'private' }})
(2)replace
router
.replace(location
, onComplete
?, onAbort
?) 跟router
.push 很像，唯一不同的就是，他不会向 history 添加新记录，而是跟他的方法名一样一一替换掉当前的 history 记录。
(3)Go
router
.go(n
)
这个方法的参数是一个整数，意思是在 history 记录中向前或者向后退多少步，类似 window
.history
.go(n
)
例如：
在浏览器记录中前进一步，等同于 history
.forward()
router
.go(1)
后退一步记录，等同于 history
.back()
router
.go(-1)
前进
3步记录
router
.go(3)
如果 history 记录不够用，那就默默的失败呗
router
.go(-100)
router
.go(100)
路由传参
var routes
=[
{
path
:'/b/:id',
name
:'b',
Component
:bb
}
]
to
='/b/123?name=ujiuye'
获取参数
{{this
.$route
.params
}} -->{id
:123}
{{this
.$route
.query
}} --> {name
:ujiuye
}
路由嵌套
在路由列表中，配置 children
:[]在设置其中的子路由配置项在子组件中使用
<router
-view
></router
-view
>, 来加载子路由页面
注意
: 配置路由列表
, 子路由的path
, 不要加
/
注意
: 在跳转
/切换时
, 路由的path要从根
/开始写
. 例如
: /second
/two
/hello
var routes
=[
{
path
:'/index',
component
:index
,
children
:[
{
path
:'address',
component
:address
},
{
path
:'tel',
component
:tel
},
{
path
:'/index',
redirect
:'/index/tel'
}
]
},
