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一次多个坑更为灵活