Vue基础

Vue简洁、轻量、视图与数据分离,无需操作DOM

指令

v-model.lazy //在“change”时而非“input”时更新

v-model.number //将用户的输入值转为数值类型

v-model.trim //过滤用户输入的首尾空白字符

变化

1）过滤器 filters

可以串联：{{ message | filterA | filterB }}

可以接收参数：{{ message | filterA(‘arg1’, arg2) }}

2）计算属性 computed

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算

computed是属性调用，而methods是函数调用

3）侦听器watch

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

深度侦听 deep:true：可以监听到数组和对象的变化

当需要在数据变化时执行异步或开销较大的操作时可以使用侦听器。

handler(局部监听时可使用)

生命周期钩子

在生命周期中被自动调用的函数叫做生命周期函数，也被形象的称为钩子函数

beforeCreate：加一些loading事件

created：结束loading事件，还做一些初始化，实现函数自执行等

mounted:发起后端请求，取回数据；接收页面之间传递的参数；子组件向父组件传递参数

路由

router.go(n)；类似 window.history.go(n)

router.push(‘home’) // 字符串，// 向 history 添加新记录

router.push({ path: ‘home’ }) // 对象

router.replace(location) //不会向 history 添加新记录，

router.push({ name: ‘user’, params: { userId: 123 }}) // 命名的路由 /user/123

router.push({ path: ‘register’, query: { plan: ‘private’ }}) // 带查询参数 /register?plan=private

组件内的守卫

写在每个单独的vue文件里面的路由守卫

beforeRouteEnter（to, from, next） // 进入前调用

beforeRouteUpdate（to, from, next） // 在当前路由改变调用

beforeRouteLeave（to, from, next）// 离开该组件调用

router和route区别

router是“路由实例”对象包括了路由的跳转方法，history对象、钩子函数等。

如：$router.push({path:'home'});

route是“路由信息对象”，包括path，params，hash，query，fullPath， matched，name等

VUEX

专为vue.js 应用程序开发的状态管理模式

1)state：存储状态，Vuex store实例的根状态对象，用于定义共享的状态变量；

2)getters：读取器

外部程序通过它获取变量的具体值，或者在取值前做一些计算；

外部调用方式：store.getters.personInfo()；

3)mutations：修改器

只用于修改state中定义的状态变量，这是vuex中唯一修改state的方式；

外部调用方式：store.commit('SET_AGE',18)， 不支持异步

如：this.$store.commit('changecount')

4)actions：动作

向store发出调用通知，执行本地或者远端的某一操作；

外部调用方式：store.dispatch('nameAsyn')，支持异步

5)modules：模块，向store注入其他子模块，

可以将其他模块以命名空间的方式引用，只是要加上当前子模块名；

外部调用方式：store.a.getters.xxx()；内容就相当于是store的一个实例；

6)strict：用于设置Vuex的运行模式，true为调试模式，false为生产模式

7)plugin：用于向Vuex加入运行期的插件

懒加载

路由和组件的常用两种懒加载方式：

1）vue异步组件实现路由懒加载

　　component：resolve=>([‘需要加载的路由的地址’，resolve])

2）es6提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import(‘需要加载的模块地址’)

apply 和call

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象;

第二个是传入的参数，apply是数组，而call则是arg1,arg2…这种形式。

闭包含义和作用

闭包：函数套函数,外部可读取函数内部的数据；

函数1套函数2，1内部的所有局部变量，对2都是可见的

作用：1）可以读取函数内部的变量，2）让这些变量的值始终保持在内存中

href和src区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系；

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

document.ready和document.onload区别

document.ready：在DOM加载完成后，可以写多个.ready，可以执行多次;

document.onload：在网页所有内容加载完成后才执行，只能执行一次;

map文件

.map文件的作用：

项目打包后，代码都是经过压缩加密的，如果运行时报错，map准确的输出是哪一行哪一列有错；

若JS文件夹中出现一些map文件，如下设置：

进入项目包/config/index.js ，设置 productionSourceMap: false