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">
<p>Message is: {{ message }}</p>
10.动态绑定css样式
<p v-bind:class="{red: false, blue: true}"></p>
class属性接收的是一个对象
key： value
key为类名
value为布尔值
11.键盘事件回车触发函数
v-on:keyup.enter="enterHit"
12.条件判断 v-if
<p v-if="true">错误</p>
<p v-else-if="true">错误</p>
当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">
<p>{{i}}</p>
</template>
使用template标签时循环时不会渲染template标签只会下面这样
<p>{{i}}</p>
<p>{{i}}</p>
<p>{{i}}</p>
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: '<span>{{ message }}</span>',
data: function () {
return {
message: 0
}
}
})
<my-component>就是一个dom元素了
template是元素中的内容
data 必须是一个函数返回一个对象
19.插槽slot
<slot></slot>写在子组件里面
父组件向子组件传模板
20.动态组件
curr是哪个组件名 p标签就渲染成哪个组件
<p :is="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.图片动态更换
<img :src="item.collection ? require('./collection-1.png') : require('./collection-2.png')" alt="collection" width="28" height="28">