vue2前端框架基础笔记

本篇文章需要有一定的vue基础，强烈建议先看初学系列文章

接触到vue2的时候，是需要明白一下概念

1 数据绑定原理、组件原理、钩子函数、

2 插件vue-route、vuex、axios、bus总线

一：基础概念

一个vue对象通常包括下面几个属性

el： //dom元素

data： //vue对象的数据，做初始化声明用(如果后台采用ajax时候)
methods： //vue对象的方法，定义的调用方法都在这个里面

created： //8个生命周期函数之一
watch： //对象监听的方法，不常用
computed： //计算逻辑放到computed中，不常用

从图上我们可以看到vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象,通过全局方法 Vue.use() 使用插件.

扫描二维码关注公众号，回复： 2714098 查看本文章

我刚开始学习时，总是不清楚Vue.use()与Vue.component()用法，一个是注册插件(vue实例)，一个是注册组件(一个组件由template、js、css组成)

难点

splot

了解内容：

动态组件：可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

疑问

因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我：
（1）首先就是.vue结尾的文件为何需要export default，就像下面的代码一样？
（2）为什么data需要return，我不用return，直接 data(){
menu:MENU.data,
poi:POILIST.data
}不行吗？
官方关于data返回值的答案

`data` 必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

二：vue-route

就是页面跳转，其生命周期有2个钩子方法，进入页面前后调用的方法

router.beforeEach((to, from, next) => {
window.document.title = to.meta.title;
next();
});

router.afterEach((to, from, next) => {
window.scrollTo(0, 0);
});

实现页面跳转有2种方式：(1)<router-link to="/about">跳转到 about</router-link>

(2)<template>
<div>
<h1>介绍页</h1>
<button @click="handleRouter">跳转到 user</button>
</div>
</template>
<script>
export default {
methods: {
handleRouter () {
this.$router.push('/user/123');
}
}
}
</script>

三 vuex与bus总线

　 bus总线：var Event = new Vue();　相当于又new了一个vue实例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；

　　Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作　/这里是对数据的操作})

官方文档API

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！任何组件只要使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。在组件内，来自store的数据只能读取，不能手动改变，改变store中数据的唯一途径就是显示的提交mutation，Mutations修改状态（$store.commit( )）

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

这个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象：

state：存储状态。也就是变量；
getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

小结：

前端页面调试用vue-devtools vue开发调试神器，代码开发建议用sublime