1.子接收父组件的属性（父向子传）： props：[xxx]
2.简单的vue增删改(主要思想)：
增：在函数里面 this.xxx.push({ id:xxx,name:xxx})
改：在函数里面 props = this.xxx.find((ele,index,arr)=>{return ele.id == this.xxx}) 三个参数
prop.name = this.xxx
删：在函数里面 index = this.props.findIndex(ele=>{return ele.id == xxx.id}）
this.xxx.splice(index,1)
3.$emit 一次就触发一次（触发事件）、$once 只触发一次（注册事件）、$off 移除监听事件
$on （注册事件）
4.监听watch：浅（基本数据类型 watch：{data的属性名：fn()}）和深（对象、数组 watch:{data属性名:{deep:true,handler:fn()}}）监听
计算：computed 写在计算属性内的this 都算在监视范围（vue库里已经封装好了）
5.生命周期钩子函数（事件的回调函数）
created 已经完成数据初始化，beforeCreated还没有完成，所以created用来操作ajax（操作数据）
beforeMount是数据装载DOM之前，不可以获取DOM，所以用mount获取DOM操作（操作DOM）
更新、激活（利用内置组件keep-alive避免重新渲染）、销毁
6.路由的原理：就是监视页面锚点值的改变，不刷新页面，替换页面的内容
基本使用：vue中的核心插件 vue-router
(1)、在引入vue之后，引入vue-router
(2)、安装插件（vue.use（Vue-Router））全局组件、提供一些我们使用的
(3)、创建一个路由对象
var router = new VueRouter(options)
(4)、配置路由规则
options：{routes:[router,router,router]}
router:{path:/xxx,component:xx} xx 表示options 也是组件对象
(5)、将配置好的路有对象交也vue的options
new Vue({router:router})
(6)、留坑(app.js) <router-view></router-view>
注意点：
Vue.use(VueRouter) 如果没有这句安装路由代码，会导致不知道什么是<router-view>
在安装路由时候自动会触发一系列过程，function install（vue）---Vue.component('router-vue',VueRouter) 最后我们直接写<router-view>
router-link:在vue后，插件给我们注册的全局组件
使用：1.基本 <router-link to="music"><router-link>
2.对象方式 <router-link :to="{name:'music'}"><router-link>
给路由定个name属性 ，{name:'music',path:'./music',component:Music}
匹配并生成herf机制：
通过to拿到对象的name，知道找到路由规则
通过path属性，生成<router-link>的herf
参数集合：
1.去哪里：<router-link :to="{name:'sy',query:{id:'1'}}"></router-link>
会生成herf 然后显示在地址栏 #/shenyang?id=1
2.导航：{name:'sy',path:'/shenyang',component:ShenYang}
3.去了干嘛：获取路由参数，发起ajax请求，把数据渲染到页面
created 钩子函数 this.$route.query.id
url参数获取：1.查询字符串 /shenyang?id=1 req.query.id
2.pah方式 /shenyang/1
3.get('/shenyang/:id') req.params.id
使用path方式：
1.去哪里：<router-link :to="{name:'sy',params{id2:'1'}}"></router-link>
2.导航：{name:'sy',path:'/shenyang/:id2',component:ShenYang}
3.去了干嘛：获取路由参数，发起ajax请求，把数据渲染到页面
`this.$route.params.id2`
params与query的区别在于：parmas要在规则路由中体现参数放置的位置
7.vue-router中的对象
路由信息对象 $router:$route.query $route.params
路由功能对象 $router:根据历史记录前进或后退 $router.go(-1)、通过程序改变锚点值
$router.push()
8.多视图（命名试图）
灵活的维护，灵活的配置
{name:sy,path:'/shenyang',component:ShenYang}
{name:sy,path:'/shenyang',components:{坑名：组件名，坑名：组件名}}
默认的坑名 defalut <router-view></router-view>
有名的坑 <router-view name='xxx'><router-view>
component 一次一个坑、components一次多个坑更为灵活
网友评论