组件/路由/vuex

组件
局部功能的界面（包括html、css、js、img等）

自己定义一个组件：例如：1.创建HelloWorld.vue组件

<template>
<div>
    <p class="msg">{{msg}}</p>
</div>
</template>

<script >
export default {// 配置对象（与vue一致）
//声明接收属性，这个属性就会成为组件的属性
props:['comments'],
  data () { // 必须是函数
    return {
      msg: 'Hello Vue'
    }
  }
}
</script>

<style>
.msg {
    color: pink;
    font-size: 30px;
}
</style>

2.App.vue :使用组件三步骤

<template>
    <div>
        <img src="./assets/logo.png" alt="logo" class="logo">
        <!-- 3.使用组件标签 -->
       <!--绑定属性 将属性传给组件 组件间通讯-->
        <HelloWorld :comments='comments'/>
    </div>
</template>

<script>
// 1 引入组件
import HelloWorld from './component/HelloWorld.vue'
export default {
  data () {
	return {
	comments:[
		{name:'bb',say:'vue'}
		]
	}
  },
  // 2.映射组件标签
  components: {
    HelloWorld
  }
}
</script>

<style>
.logo {
    width: 200px;
    height: 200px;
}
</style>

3.创建main.js 作为入口js 创建实例vm对象

/*
入口js：创建Vue实例
放第一个Vue大写 第二个小写
*/
import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line
/* eslint-disable */
new Vue({
    el: '#app',
    //参考index.html
    components: {
        App
    },
    template: '<App/>'
})

打包之后生成dist

vm.$emit(‘绑定监听的名字’，参数):触发自定义事件 传数据

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
<script>
Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>
  `
})
  new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})
</script>

mounted：{//执行异步代码}
//绑定事件监听—订阅消息
触发事件-----发布消息

Pubsub订阅发布消息 ：传数据
props：得在父子之间传递

作用：用于传递数据（可以是兄弟间 父子间）

优点：组件之间不需要任何关系

<script>
	//订阅
import Pubsub from 'pubsub-js'
import {pubsubID} from 'xxx'

componentDidMount() {
	/**
	* 订阅
	*/
	pubsub = Pubsub.subscribe(pubsubID, (msg, data) => {
		console.log(msg) // 这里将会输出对应设置的 pubsubID ，msg参数不能去掉
		console.log(data) // 这里将会输出对应设置的参数
	})
}

//发布
import Pubsub from 'pubsub-js'
Pubsub.publish(pubsubID, data) //data是传递给subscribe的data数据
// 或
PubSub.publishSync(StationStatisticsID, data)

</script>

reduce（）对数字实现累加

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

组件通信slot：此方式用于父组件向子组件传递‘标签数据’

localStorage存储数据：暴露的是函数还是对象看要向外暴露的功能是1个还是多个

vue-resource

// 引入模块
import VueResource from 'vue-resource'
// 使用插件
Vue.use(VueResource)
//内部会给vm对象和组件对象添加一个属性：$http
// 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback

axios请求

// 引入模块 在哪里使用在哪里引入

import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})

路由
key----value
key对应path-----后端返回的value是：处理请求的回调函数/前端 前端：组件
1.优化路由配置：linkActiveClass: ‘active’, // 指定选中的路由链接的 class
2.使用路由的三步骤：
1）定义路由组件
2）注册路由

export default new VueRouter({
routes: [
{
path: '/',
redirect: '/about'
},
{
path: '/about',
component: About,
meta:{
	isShow:true;
	//meta里面可以存放一些属性值 通过$route.meta.isShow可以获取
	}
},
{
path: '/home',
component: Home
}
]
})

//注册路由器
import Vue from 'vue'
import router from './router'
// 创建 vue 配置路由器
new Vue({
el: '#app',
router,
render: h => h(app)
})

3）使用路由：

缓存路由组件对象
编码实现：

在js中跳转页面 称为 编程式路由导航
window.location=url;//跳转到一个页面

$route和$router 的区别
Vue中的this分为$route和$router
$route:是代表当前组件路由：存了一些数据 例如parmas和query等参数
$router：代表路由器：存放一些功能方法 例如：push replace back等相关 API

相关API：1) this.$router.push(path):相当于点击路由链接(可以返回到当前路由界面)2)this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back():请求(返回)上一个记录路由4)this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由

将一个伪数组转成真数组
Array.prototype.slice.call() : 用call来继承数组的方法slice
数组查询之后如果没有值则都返回undefined

属性描述符

documentFragement 也是一个node节点

Dep和Watcher之间的关系

vuex