vue阶段性学习笔记总结

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">