本篇文章需要有一定的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() 使用插件.
我刚开始学习时,总是不清楚Vue.use()与Vue.component()用法,一个是注册插件(vue实例),一个是注册组件(一个组件由template、js、css组成)
难点
splot
了解内容:
动态组件:可以通过 Vue 的 <component>
元素加一个特殊的 is
特性来实现:
|
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
|
这个自定义组件 <blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is
特性给了我们一个变通的办法:
|
疑问
因为项目要使用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){ 接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作 /这里是对数据的操作})
在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