vue备忘录

1.Vue构造其中有一个el参数，它是dom元素中的id。

2.Vue中的实例属性与方法都有前缀$,以便与用户定义的属性区分开来。如：$el。

3.v-html指令用于输出html代码。

4.修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。

.stop 阻止事件冒泡

.capture 使用事件捕获

.self 只在该元素本身出发，子元素不会触发

.once 事件只触发一次（版本:2.1.4新增）

5.过滤器，由管道符指示，过滤器函数接受表达式的值作为第一个参数。

<!-- 在两个大括号中 -->

{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:></div>

data:{rawId:1},

filters:{formatId:(value)=>{return value++;}}

6.v-bind：id缩写：id

v-on:click缩写@click

7.当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

8.计算属性computed{

newId:{//可以直接使用

get:function(){},

set:function(value){}

}

}

当newId属性值改变的时候，会触发跟这个属性相关的视图的改变。

9.监听属性watch

data{id：1}

watch：{id：function（val）{axios......then().catch()}}

watch用来监听一个data里的属性值；当此值改变的时候，会触发数据的变化。

一般情况下涉及到异步请求数据就在watch里写。

10.class属性绑定

对象语法：v-bind:class="{ active: isActive, 'text-danger': hasError }"

都为true的情况下，应用样式，后面的会覆盖前面的样式。

数组语法： v-bind:class="[activeClass, errorClass]"

11.style(内联样式绑定)

对象：v-bind:px' }"

数组：v-bind:

12.按键修饰符:如v-on:keyup.enter

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

13.input修饰符

.lazy:在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

.number

.trim：自动过滤输入的首尾空白字符

14.props父组件传递给子组件。

15.自定义事件$on(eventName);父组件接收子组件事件

$emit(eventName);子组件发出事件

16.监听原生事件：.native修饰：<my-component v-on:click.native="doTheThing"></my-component>

17.router-link to="" 渲染结果 a href=""

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

18.vue路由懒加载：进入首页不用一次加载过多资源造成用时过长。

19.只有data中的数据是响应式的，动态添加近来的数据默认为非响应式。

可以通过以下方式实现动态添加数据的响应式

var vm = new Vue({

data: {

stu: {

name: 'jack',

age: 19

}

}

})

1 Vue.set(object, key, value) - 适用于添加单个属性

2 Object.assign() - 适用于添加多个属性

Vue.set(vm.stu, 'gender', 'male')

/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/

vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

20.获取更新后dom中的数据 则需要通过 Vue.nextTick(callback)；实例调用vm.$nextTick(function () {})

21.v-for="(item, key, index) in obj"<!-- item 为值，key 为键，index 为索引 -->

22.注意：computed中的属性不能与data中的属性同名，否则会报错

23.拦截器会拦截发送的每一个请求，请求发送之前执行request中的函数，请求发送完成之后执行response中的函数

// 请求拦截器 //响应拦截器形似

axios.interceptors.request.use(function (config) {

// 所有请求之前都要执行的操作

return config;

}, function (error) {

// 错误处理

return Promise.reject(error);

});

24.非父子通讯可以用事件总线

var bus = new Vue()

// 在组件 B 绑定自定义事件

bus.$on('id-selected', function (id) {

// ...

})

// 触发组件 A 中的事件并传递值；此值可以在父组件通过$event访问到

bus.$emit('id-selected', 1)

25.mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

26.我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

27.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

28.由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

29.对象同28，当你需要改变多个属性，应该这样做：

Object.assign({}, vm.object, {

age: 27,

favoriteColor: 'Vue Green'

})

30.有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

31.单个复选框，绑定到布尔值;多个复选框，绑定到同一个数组。

32.选择框：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。

在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐提供一个值为空的禁用选项。

33.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值。

props: ['initialCounter'],

data: function () {

return {

counter: this.initialCounter

}

}

34.在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate 来做这件事。

35.Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

36.input中onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'') " onafterpaste="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"表示只能输入中文字。

37.全局路由钩子函数:每次路由跳转，都会执行beeforeEach和afterEach

beforeEach（to,from,next）{

console.log(to);//到达的路由

console.log(next);//管道中，可以跳转到其他路由

console.log(from);//离开的路由

}

确保始终调用该next函数，否则永远不会解析挂钩

afterEach（to，from）{}

38.单个路由钩子函数beforeEnter有三个参数：to/from/next，在配置路由的时候添加此钩子函数

39.组件内钩子函数beforeRouteEnter+beforeRouteUpdate+beforeRouteLeave，三个参数：to/from/next

在组件内部定义，其中beforeRouteUpdate是在二级路由更改时才会触发。

40.回退函数

goBack () {

window.history.length > 1

? this.$router.go(-1)

: this.$router.push('/')

}

41.当params参数更改时，触发页面调用生命周期钩子函数

watch: {

'$route' (to, from) {}

}或者

beforeRouteUpdate (to, from, next) {}

42.捕获所有/ 404未找到路线：path{*}

43.路由传参

// named route

router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private

router.push({ path: 'register', query: { plan: 'private' } })

44.路线元字段

可以meta在定义路径时包含字段：

{

path: 'bar',

component: Bar,

// a meta field

meta: { requiresAuth: true }

}

通过to.meta.requiresAuth访问

45.滚动行为

scrollBehavior (to, from, savedPosition) {

// return desired position

}

返回值：

{ x: number, y: number }

{ selector: string, offset? : { x: number, y: number }} （仅在2.6.0+中支持偏移）