vue阶段性学习笔记总结

1.router-link被选中时会默认添加类名router-link-active，如果觉得太长不方便还可以自己自定义名称
new VueRouter({
linkActiveClass: 'active'
})

2.路由

可以把资源缓存在内存中每次切换路由保持之前页面状态，只会向服务器请求不重复的资源
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>

<router-link :to="{path: 'apple'}">to apple</router-link>
负责路由的跳转

获取当前页面路由路径
this.$route.path

跳转到指定的路由
this.$router.push({path: '/orderlist'})

3.用Object.assign()方法给data数据赋值不会覆盖数据已经存在的属性
this.seller = Object.assign({}, this.seller, res.data.data);

4.vue中阻止冒泡和默认事件方法

@click.stop.prevent="abc"

5.在父组件中调用子组件的方法
<food :food="food" ref="food"></food>
selectedFood (food) {
this.$refs.food.show();
}

6.methods中的方法每次页面dom刷新后methods中的所有方法都会执行一次

而且其中每一个方法只要触发了，那么剩下的所有方法也会执行一次（注意：需要事件触发的方法不会执行）

7.filters 过滤器
使用
filters: {
fn: function (val) {
return `￥${val}`;
}
}
在dom里使用{{data.per | fn}}

全局过滤器使用方法：

Vue.filter('money', function (val, type) {
return `￥${val}${type}`;
})

在dom中使用{{data.per | money('元')}}
说明：val是默认传的参数元是type参数

8.set全局添加/修改属性：
methods: {
// set全局添加/修改属性：
fn: function (obj) {
if(typeof obj.a == "undefined") {
// Vue.set(obj, "a", "123");
this.$set(obj, "a", "123");
}
}
// set修改data数据：
fn: function () {
Vue.set(this.arr, 1, "123");
}
}
如果属性a未定义，那么在局部给obj添加a属性并赋值为"123"
Vue.set()是全局设置
this.$set()是局部设置

9.数据双向绑定

v-model 必须作用于表单上
v-model.lazy 延迟更新
v-model.number 转为number类型
v-model.trim 去掉多余空格
<input v-model="message">
Message is: {{ message }}

10.动态绑定css样式

class属性接收的是一个对象
key： value
key为类名
value为布尔值

11.键盘事件回车触发函数
v-on:keyup.enter="enterHit"

12.条件判断 v-if

错误
错误

当v-if条件为false v-else-if显示
注意：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后

13.条件判断 v-show

v-show与v-if的区别在于v-show的显示隐藏利用display

14.循环遍历优化版本 v-for --- <template>

<template v-for="(i, index) in array">
{{i}}
</template>
使用template标签时循环时不会渲染template标签只会下面这样
{{i}}
{{i}}
{{i}}

15.对v-for遍历做过滤
写在计算属性computed里面
例如只遍历3条数据
循环里面的数据可以换成方法名arrayFn
这个方法不会改变原始data数据，只是生成一个新的数组只用于v-for循环使用
<li v-for="(i, index) in arrayFn">
{{i}}
</li>
computed: {
arrayFn: function () {
return this.data.slice(0, 3);
}
}

16.循环卡片选中
:class="{check: index===curIndex}" v-on:click="curIndex=index"

17.余数添加类名
:class="[{'line-last': index % 2 === 1 }, 'index-board-' + item.id]"

18.vue中的组件

Vue.component('my-component', {
template: '{{ message }}',
data: function () {
return {
message: 0
}
}
})

<my-component>就是一个dom元素了
template是元素中的内容
data 必须是一个函数返回一个对象

19.插槽slot
<slot></slot>写在子组件里面
父组件向子组件传模板

20.动态组件
curr是哪个组件名 p标签就渲染成哪个组件

data () {
return {
curr: '组件的名称'
}
}

21.自定义指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

22.data里的图片路径必须加require才能被webpack打包
data() {
return {
src: require('../assets/pic2.jpg')
}
}

23.图片动态更换