learn-vue

利用vue-cli创建项目

npm install --global vue-cli

vue-init webpack 项目名字

npm install 下载依赖

---

在main.js中写入

import Vue from 'vue'

Vue.config.productionTip = false//  阻止生产模式  当前为开发模式

let vm=new Vue({

el:'' 挂载对象的ID

component:"

template:''

})

---

let router=new router({

mode:'' history||hash

route:[{

path:"

component:"'  //懒加载  （）=>import (路径)     懒加载就是component组件可以写成import引入

alias:"'

name:"'

meta:[{}]，

children:[{path:''}] //二级路由嵌套

}]

})

---

router-link 链接层

  to路径

  name名字

  tag  router-link默认生成a标签   tag生成别的 标签

router-view显示层

---

1编程式导航 this.$router.push()   this.$router.replace()  this.$router.forward()  this.$router.back()

2vue-router中  queryString  a)query:{'type':2}      b)?type=2   

vue-router中 params:{'type':2}  不会显示在路径中

3.alias别名  第二个名字

4.获取动态id  a)this.$route.params.id

b)props传值  路由表里配置[{path:'',props:true}]

路由组件通过props接收  props:['id']

使用{{id}}

5redirect路径不同但是希望跳到同一个页面

6路由导航钩子

全局

       beforeEach   三个参数(to,from,next)next后可以写入想要跳转的路径

       afterEach

路由独享 beforeEnter 

组件内beforeRouteEnter  beforeRouteLeave beforeRouteUpdate

7.hash模式下  仅hash符号前的路径才被请求  

8.history模式下找不到的路径重定向到首页   [{path:'*',redirect:'/'}]

---

3父子组件传值   

父绑定属性传给子级  自定义事件响应子级的事件

父    ：属性=值                              @自定义事件=fn;

methods:{

fn(){}

}

子通过prop接受父级穿过来的属性  通过emit触发事件给父级的自定义事件

子    props:['属性']                                @click=dosomething

method:{

dosomethis(){

this.$emit('自定义事件',参数)}}

---

4 兄弟组件传值   创建一个空的js文件  兄弟间通过emit 触发 on响应

***创建一个空的js

import Vue from 'vue'

emport default new Vue({})

兄

import  js from 空的js所在的路径

js.$emit('自定义事件'，参数)

弟

import js from 空的js梭子的路径

js.$on('相同的自定义事件名字'，参数)

---

5事件修饰符   事件修饰符写在事件后  有了事件只有给它修饰一下

stop阻止冒泡

prevent 阻止默认事件

self只有自己才能触发

capture  事件捕获

---

slot 在组件标签内写内容

---