vue笔记

最新推荐文章于 2024-01-04 12:31:17 发布

nickzhang2016

最新推荐文章于 2024-01-04 12:31:17 发布

阅读量153

点赞数

分类专栏： vue vue2 文章标签：前端 vue

本文链接：https://blog.csdn.net/nickzhang2016/article/details/118296709

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

mvvm

mvvm即：

m model 数据模型
v view 视图层
vm view model，数据与视图交互层

options

即，vue实例中的传入的参数。

如el，是vue实例开始生效的元素，可以通过元素id。

data，是数据。

methods，定义方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mhxOrosJ-1624848711964)(D:\Github\note\vue note\vue.assets\image-20201116164900770.png)]

生命周期

即从初始化到销毁的整个过程。vue实例中会有生命周期钩子，我们可以在钩子方法中做一些相应的处理。

生命周期图示

Vue 实例生命周期

例子

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AW6uvChv-1624848711967)(D:\Github\note\vue note\vue.assets\image-20201117111246913.png)]$

created

在实例创建完成后被立即调用

mounted

实例被挂载后调用

其他指令

v-once

只渲染元素和组件一次。message初始化后不会改变。
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXVjz8zC-1624848711968)(D:\Github\note\vue note\vue.assets\image-20201117180358644.png)]$

v-html

直接将字符串形势的html，展示出来。但这么做不太好，除非是完全可信任的内容，如百度的链接。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7luc6ZgX-1624848711969)(D:\Github\note\vue note\vue.assets\image-20201117181332903.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9ZQANmq-1624848711970)(D:\Github\note\vue note\vue.assets\image-20201117181345446.png)]$

v-cloak

斗篷，隐藏未编译的 Mustache（ps:{{}}）标签直到实例准备完毕。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6VkCbda-1624848711971)(D:\Github\note\vue note\vue.assets\image-20201117195352531.png)]$

v-bind

用于绑定属性，可简写为":"

动态绑定class对象语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>

<div id="app">
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
    <button @click="isActive=!isActive;isLine=!isLine;">切换</button>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: '你好',
            isActive: true,
            isLine: false
        }
    });
</script>
</body>

</html>

动态绑定class数组语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>

<div id="app">
    <h2 :class="getClass">{{message}}</h2>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: '你好',
            active: 'aaa',
            line: 'bbb'
        },
        computed: {
            getClass() {
                return [this.active, this.line];
            }
        }
    });
</script>
</body>

</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtvlcynC-1624848711971)(D:\Github\note\vue note\vue.assets\image-20201118095235625.png)]$

computed

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

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
  aDouble: vm => vm.a * 2
}

getter setter

计算属性完整的有get，set方法，但一般来说只实现get方法，所以可以简写为

fullName: vm => ${vm.firstName}${vm.lastName}

set方法不能用箭头函数，因为这样就接收不到新值了。set方法会在计算属性赋值时调用，然后你可以根据规则将计算属性，保存在原属性中。

const vm = new Vue({
    el: "#app",
    data: {
        firstName: 'z',
        lastName: 'h'
    },
    computed: {
        // fullName: vm => `${vm.firstName}${vm.lastName}`
        fullName: {
            get: vm => `${vm.firstName} ${vm.lastName}`,
            set: function (nv) {
                console.log(nv);
                let split = nv.split(' ');
                this.firstName = split[0];
                this.lastName = split[1];
            }
        }
    }
});

v-on

监听时间，如 v-on:click，可简写为@click。事件方法可以不传参数，不传参直接写方法名，默认会传一个event参数。

传参需要加（），可将$event作为事件参数传入。

<div id="app">
    <button @click="click1">1</button>
    <button @click="click2(1)">2</button>
    <button @click="click3">3</button>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            click1() {
                console.log(1)
            },
            click2(arg) {
                console.log(arg)
            },
            click3(arg) {
                console.log(arg)
            },
        }
    });
</script>

v-for

遍历，v-for遍历对象，如下

<div id="app">
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>

    <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            info: {
                name: 'why',
                age: 18,
                height: 1.88
            },
        }
    });
</script>

v-for中，使用key作用是为了高效的更新虚拟dom，条件是key与循环的元素要一一对应，所以用index作为key，起不到作用，因为数组元素的增加减少，元素的index不是唯一的，所以不适合用来作为key。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YCSUR7Tu-1624848711972)(D:\Github\note\vue note\vue.assets\image-20201123164115248.png)]$

数组方法中哪些方法是响应式的

数组操作并不是都是能立即反应在页面上，如下图所示，通过index改变数组元素，不会把页面元素改掉，虽然数据模型中是已经改变了。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tdtKsPKr-1624848711972)(D:\Github\note\vue note\vue.assets\image-20201123165119282.png)]$

以下方法可以做到响应式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeEKscQS-1624848711973)(D:\Github\note\vue note\vue.assets\image-20201123165352798.png)]$

v-model

即双向绑定。input的实现原理通过v-bind和v-on指令实现，如下

<div id="app">
    <input type="text" :value="message" @input="e => message = e.target.value">
    {{message}}
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            message: '你好',
        }
    });
</script>

修饰符

事件修饰符

按键修饰符

系统修饰键

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rElMZtki-1624848711973)(D:\Github\note\vue note\vue.assets\image-20201123203036473.png)]$

组件化

创建组件构造器
注册组件
使用组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6zOJsIw-1624848711973)(D:\Github\note\vue note\vue.assets\image-20201123204024571.png)]$

Vue.component是注册全局组件，通过components属性则是局部组件。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27wEH0cL-1624848711974)(D:\Github\note\vue note\vue.assets\image-20201123205155766.png)]$

组件模板抽离

写法1

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xvu1sqix-1624848711974)(D:\Github\note\vue note\vue.assets\image-20201123210148926.png)]$

写法2

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8AnRuQ2-1624848711975)(D:\Github\note\vue note\vue.assets\image-20201123210359815.png)]$

为什么组件data必须是function

vue实例中，data可以是属性，但在组件中为什么必须是函数？

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2VNQ7taB-1624848711975)(D:\Github\note\vue note\vue.assets\image-20201124103846263.png)]$

因为同一个组件多次使用，他的数据应该是隔离的，所以data是一个function，return 一个数据对象，这样一个新的组件的数据就是一个新的数据对象。

父子组件通信

<div id="app">
    <cpn :movies="movies"></cpn>
</div>

<template id="cpn">
    <div>
        {{movies}}
    </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const cpn = Vue.component('cpn', {
        template: '#cpn',
        // props: ['movies'],
        // props: {movies: Array},
        props: {type: Array, default: () => []},
        data() {
        },
    });

    const vm = new Vue({
        el: "#app",
        data: {
            message: '你好',
            movies: ['a', 'b', 'c', 'd']
        },
        components: {cpn}
    });
</script>

props写法：

props: [‘movies’]
props: { movies: Array }
props: {type: Array, default: () => []}

子组件向父组件传值，通过事件。

<div id="app">
    <cpn :movies="movies" :message.sync="message"></cpn>
    {{message}}
</div>

<template id="cpn">
    <div>
        {{movies}}
        <input :value="message" @input="e => $emit('update:message',e.target.value)">
    </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const cpn = Vue.component('cpn', {
        template: '#cpn',
        props: ['movies', 'message'],
        // props: {movies: Array},
        // props: {type: Array, default: () => []},
        data() {
            return { }
        },
        methods: {}
    });

    const vm = new Vue({
        el: "#app",
        data: {
            message: '你好',
            movies: ['a', 'b', 'c', 'd']
        },
        components: {cpn}
    });
</script>

通过事件向父组件传值

e => $emit(‘update:message’,e.target.value)

，更新父组件message属性，值为e.target.value。父组件通过sync，同步子组件传过来的值。

:message.sync=“message”

父组件访问子组件

$children

可以拿到所有子组件的数组

$ref

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

通过设置ref属性，来访问特定的子组件。

子组件访问父组件

$parent

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

$root

访问根组件，即vue实例。

插槽slot

让组件具有更好的扩展性，然使用组件的一方决定组件展示什么。

如下图，这个导航栏，可以设三个插槽。这样一个组件便可以通用，也可以具有更好的延展性，具体显示的内容由父组件决定。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mOEdvRG-1624848711976)(D:\Github\note\vue note\vue.assets\image-20201125104545994.png)]$

组件应当保留共性，差异以插槽替代。

默认插槽

组件默认插槽如下所示，直接在组件中写入插槽的内容，内容会出现在组件唯一的插槽中，不需要额外标识。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocWpUQoL-1624848711976)(D:\Github\note\vue note\vue.assets\image-20201128155048728.png)]$

<div id="app">
    <cpn>
        <button>按钮</button>
    </cpn>
</div>

<template id="cpn">
    <div>
        test
        <slot></slot>
    </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const cpn = Vue.component('cpn', {
        template: '#cpn',
    })

    const vm = new Vue({
        el: "#app",
        data: {},
    });
</script>

具名插槽

直接在插槽中写的代码，即是插槽的默认值，未传入插槽内容，则显示默认值。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHAIB0UQ-1624848711977)(D:\Github\note\vue note\vue.assets\image-20201128160153435.png)]$

利用slot的name属性，指定插槽的名字，然后在组建中通过slot指令，指定具体名字，便可替换对应插槽的内容。

<div id="app">
    <cpn>
        <span slot="center">哈哈哈</span>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
    </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const cpn = Vue.component('cpn', {
        template: '#cpn',
    })

    const vm = new Vue({
        el: "#app",
        data: {},
    });
</script>

在这里插入图片描述

可简写如下，父组件可用

template v-slot:one

来指定子组件的插槽。

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>

作用域插槽

作用域插槽用于父组件获取子组件数据，显示页面则有父组件通过template标签替换在子组件插槽中的内容。

<div id="app">
    <cpn></cpn>
    <cpn>
        <!--获取子组件的languages-->
        <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}}- </span>
        </template>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot :data="languages">
            <ul>
                <li v-for="item in languages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    const cpn = Vue.component('cpn', {
        template: '#cpn',
        data() {
            return {
                languages: ['Java', 'JS', 'C++', 'C#', 'Go']
            }
        },
    })

    const vm = new Vue({
        el: "#app",
        data: {},
        components: {cpn}
    });
</script>

可简写如下

父组件通过

{{ scope.value1 }} // 通过v-slot的语法将子组件的value1值赋值给slotone

指定子组件中对应插槽，通过scope.value1，访问子组件数据

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name='one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one = 'scope'>  
           {{ scope.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给scope 
        </template>
        <template v-slot:default = 'scope'> 
           {{ scope.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
        </template>
     </ebutton>
  </div>
</template>

ES6

导入导出

直接export无法在引用的地方自己命名，而用default导出，就不需要在定义处命名，且在引用处可以随意命名。export default只能有一个。

export class Person {};
export class address = 'test';
export default 'test2';

引用处

import {Person,address} from ...;
import test2 from ...;

//导入全部
import * as module1 from ...;
module1.address;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OSgnA9UQ-1624848711977)(D:\Github\note\vue note\vue.assets\image-20201128181619285.png)]$

箭头函数

箭头函数的this是一层层向外查找，直到直到一个this，就将它作为箭头函数的this。

匿名函数的this为window。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wiH42dMY-1624848711977)(D:\Github\note\vue note\vue.assets\image-20201130172611453.png)]$

webpack

webpack依赖于node环境
webpack是打包工具

Vue CLI

cli即command line interface 命令行界面，俗称脚手架。

安装

npm i @vue/cli -g
#查看版本
vue -V

路由Router

url的模式mode：hash，history

history对象，可以通过如下操作，pushState，跳转路由，并且可通过back回退路由。go(1)，前进一次，go(-1)，后退一次。forward()，等价于go(1)。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VdHzMQ31-1624848711978)(D:\Github\note\vue note\vue.assets\image-20201130175241096.png)]$

默认路径

通过redirect，重定向到默认需要展示的页面，比如首页。

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

在路由中通过mode可以改变路由模式，如mode: ‘history’

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ],
  mode: 'history'
})

router-link

to，指定跳转的路径。

tag，指定跳转的元素，比如button。

replace，指定为replace模式，该模式无法返回。

<router-link to="/main" tag="button" replace active-class="active">首页</router-link><router-link to="/main" tag="button" replace>首页</router-link>

$router

可以通过 $r o u t e r 跳转路径。$ router相当于整个路由。

<button @click="$router.push('/main')">首页</button>
<button @click="$router.push('/content')">内容</button>

$route

$r o u t e 可以获取当前路由的参数。$ route是当前激活的路由路径。

<div>
    <h2>用户</h2>
    <h2>{{ $route.params.id }}</h2>
</div>

懒加载

当打包的时候，js代码会非常多，影响页面加载。

我们可以根据路由分割成不同组件的代码块，当某个路由被访问时，对应组件代码才会被加载，这样会更加高效。

通过

component: () => import(’…/components/Content’)

这么写，来懒加载对应组件。

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/content',
      name: 'content',
      component: () => import('../components/Content')
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('../components/Main')
    },
    {
      path: '/user/:id',
      component: () => import('../components/User')
    }
  ],
  mode: 'history'
})

子路由

可在children添加子路由。然后在对应页面加上，然后子路由的组件就可以在对应的router-view显示出来。

    {
      path: '/main',
      name: 'main',
      children: [
        {
          path: 'news',
          component: () => import('../components/News')
        },
        {
          path: 'messages',
          component: () => import('../components/Messages')
        }
      ],
      component: () => import('../components/Main')
    }

路由参数传递

通过动态路由，比如：’/user/:id’。对应的组件，通过$route.params.id取出。
通过query传递，比如’/profile?id=1，也可以通过 $router.push({path:'/profile',query:{name:'zh',age:18,height:1.75}})，传递参数。对应组件，通过$ route.query取出。

路由守卫

router.beforeEach(((to, from, next) => {
  next()
}))

meta路由元数据

可以给路由添加一些数据，在路由守卫中可调用。

//路由
{
    path: '/profile',
        component: () => import('../components/Profile'),
            meta: {
                title: '档案'
            }
}
//路由守卫
router.beforeEach(((to, from, next) => {
  document.title = to.meta.title
  next()
}))

keep alive？

有疑问，好像实现不了

每当路由跳转，会创建一个新的对应组件，所以之前的操作状态不会被保存，而keep alive就可以路由跳转时，保留之前的组件，而不是每次都跳到一个新的对应组件。

文件路径引用别名

vue-cli2是在webpack.base.conf.js可以取路径别名，然后其他地方可以用别名引用。如下：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'assets': resolve('src/assets'),
    'image': resolve('src/assets/image'),
    'components': resolve('src/components'),
    'views': resolve('src/views'),
  }
}

src里面别名前面要加~。

import可以直接使用别名。

<img slot="item-icon" src="~image/tabbar/home.svg">

<script>
import TabBar from "components/tabbar/TabBar";
import TabBarItem from "components/tabbar/TabBarItem";

export default {
  name: "MainTabBar",
  components: {TabBar, TabBarItem}
}
</script>

vue-cli3是在根目录下创建一个vue.config.js，然后进行配置，如下

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'image': 'assets/image',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

Promise

promise的三种状态，等待（pending），满足（fulfill），拒绝（reject）。

promise链中，抛错，既可以reject，也可以通过throw。

 new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('aaa');
        }, 1000)
    }).then(res => {
        console.log(res);
        throw 'err'
    }).then(res => {
        console.log(res);
        return Promise.resolve(res + 'ccc');
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.error(err);
    })

promise.all

多个promise都结束后，才进入then中。

Promise.all([new Promise((resolve, reject) => {
    resolve('1');
}), new Promise((resolve, reject) => {
    resolve('2');
})]).then((res, err) => {
    console.log(res);
})

VUEX

可以理解为共享变量的一个容器。可以做到响应式，即当一个地方改变了容器的变量，其他的地方的这个变量，也会改变。

安装

npm i vuex --save

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RkisjCpK-1624848711978)(D:\Github\note\vue note\vue.assets\image-20201203211356186.png)]$

//store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    },
    minus (state) {
      state.count--
    },
  },
  actions: {},
  getters: {},
  modules: {}
})

//使用的地方
<button @click="$store.commit('add')">+</button>
{{ $store.state.count }}
<button @click="$store.commit('minus')">-</button>

通过vuex插件可以观察store中的变化历史。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXG86lj0-1624848711979)(D:\Github\note\vue note\vue.assets\image-20201204115553848.png)]$

State是存储共享的变量
Getter相当于计算属性，只不过是全局的
Mutation是用来定义方法来修改state的属性。
Action一般是用来异步操作
Module是模块

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WWVi41FR-1624848711979)(D:\Github\note\vue note\vue.assets\image-20201204141307518.png)]$

vuex推荐只是用一个store。

Getter

定义getter

getters: {
    powerCount (state) {
      return state.count * state.count
    }
  }

用到的地方

<h2>{{ $store.getters.powerCount }}</h2>

getter里面可以引用其他getter

ge20Students (state) {
	return state.students.filter(s => s.age >= 20)
},
ge20StudentsSize (state, getters) {
	return getters.ge20Students.length
}

可以通过返回函数，然后就能接受外面传进来的参数了

geStudents (state) {
    return age => {
    	return state.students.filter(s => s.age >= age)
    }
}

<h2>{{ $store.getters.geStudents(12) }}</h2>

Mutation

传参如下

addCount (state, count) {
      state.count += count
},

<button @click="$store.commit('addCount',5)">+5</button>
<button @click="$store.commit('addCount',10)">+10</button>

改变（删除）store中，未初始化，也即没有加入响应式的属性。如下

setInfoValue (state, payload) {
    Vue.set(state.info, payload.key, payload.value)
},
    delInfoValue (state, payload) {
        Vue.delete(state.info, payload.key)
    }

<button @click="$store.commit({type:'setInfoValue',key:'name',value:'zh'})">添加store响应式属性</button>
<h2>{{ $store.state.info }}</h2>
<button @click="$store.commit({type:'delInfoValue',key:'name'})">删除store响应式属性</button>
<h2>{{ $store.state.info }}</h2>

类型常量

//定义常量
export const add = 'add'
//store
[add] (state) {
  state.count++
},

页面使用

import {add} from 'store/mutations-types'

<button @click="$store.commit(add)">+</button>

Action

定义

  actions: {
    asyncUpdateInfo (context, payload) {
      setTimeout(() => {
        context.commit('setInfoValue', payload)
      }, 1000)
    }
  }

使用

<button @click="$store.dispatch('asyncUpdateInfo',{key:'name',value:'zh'})">添加store响应式属性</button>

store的文件目录

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUiWEUbc-1624848711980)(D:\Github\note\vue note\vue.assets\image-20201204205033594.png)]$

Axiox

npm i axios --save

全局设置

import axios from 'axios'

axios.defaults.baseURL = 'http://123.207.32.32:8000/'
axios.defaults.timeout = 5000

axios实例

可针对不同域名设置不同实例

//创建axios实例，可针对不同域名设置不同实例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000/',
  timeout: 5000,
})

export function instance1Get (url) {
  return instance1.get(url);
}

拦截器

//请求拦截器
instance1.interceptors.request.use(config => {
  console.log(config)
  return config
}, err => {
  console.log(err)
})
//响应拦截器
instance1.interceptors.response.use(res => {
  console.log(res)
  return res.data;
}, error => {
  console.log(error)
})

Vue的小技巧

作者：扣丁书屋
链接：https://zhuanlan.zhihu.com/p/148562214
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

路由参数解耦

一般在组件内使用路由参数，大多数人会这样做：

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

正确的做法是通过 props 解耦

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true
    }]
})

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

export default {
    props: ['id'],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

另外你还可以通过函数模式来返回 props

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})
instance1.get(url);
}

拦截器

//请求拦截器
instance1.interceptors.request.use(config => {
  console.log(config)
  return config
}, err => {
  console.log(err)
})
//响应拦截器
instance1.interceptors.response.use(res => {
  console.log(res)
  return res.data;
}, error => {
  console.log(error)
})

nickzhang2016

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

mvvm mvvm即：m model 数据模型v view 视图层vm view model，数据与视图交互层options即，vue实例中的传入的参数。如el，是vue实例开始生效的元素，可以通过元素id。data，是数据。methods，定义方法。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mhxOrosJ-1624848711964)(D:\Github\note\vue note\vue.assets\image-2020111616490
复制链接

扫一扫

专栏目录