Vue -- 简单使用

偏执的太偏执、 2022-03-26 07:27 240阅读 0赞

推荐一个网站，该网站详细的介绍了vue的所有内容：[http://doc.liangxinghua.com/vue-family/1.3.html\#][http_doc.liangxinghua.com_vue-family_1.3.html]

Vue是一套用于构建用户界面的渐进式框架，与其他框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关心视图层，为复杂的单页应用提供驱动，只支持IE8 以上的浏览器使用。

Vue 引入js库：

## Vue的实例创建 ##

var vue = new Vue({});

在创建Vue实例的时候，里面的属性有  el （用于绑定Vue实例的）、data（用于显示数据的，在页面中显示文本属性都必须在data中声明，如果不声明就使用Vue去管理，会报没有定义的错误）、methods（用于定义函数，所有的函数都定义在改属性中）

var todos = [{id: 1, title: "123"}, {id: 2, title: "456"},{id: 3,title: "789"}];
    var vue = new Vue({
        el: "#app",
        data: {
            foo: "hello",
            bar: "world",
            todos: todos,
            strHtml: "<h1>asd</h1>",
            once: "qwe"
        }
    });

## Vue的标签： ##

\{ \{ \}\} ： 用于操作文件，取值 , 可以取在data中的数据，或者是遍历出来的数据

<p> {
       {  firstname + listname  }}  </p>

v-bind: 用于操作属性，简写方式   ：

v-bind:style  用于操作样式 ： 内联样式。可以用于直接实例对象的属性

直接将样式写死  ， 表示下面的颜色就是 red

<h :style="{backgroundColor:'red'}">nihao</h>

颜色的值是可取的，但是需要在data中进行定义，但是不要使用单引号括起来使用

<h :style="{backgroundColor: bac}">nihao</h>

bac需要在 data中定义，并且赋值，然后在该 \{  \} 括号中直接使用

v-class  ： 用于操作样式的 , 在操作样式的时候，如果后面返回的false 则表示该样式不生效

<h1 :class="{active :false}">hello word</h1>

v-model  :  用于进行数据的双向绑定，在操作的时候，会直接操作data中的具体的数据，包括vue中数据的数据

名字:<input type="text" value="国庆" v-model="listname">
    <script>
         new Vue({
           el: "#app",
              data: {
                firstname: "",
                listname: ""
             }});
    
    </script>

v-on : 用于进行绑定事件，比如绑定点击事件(v-on:click)，简写的方式@click

@click.prevent : 该事件用于阻止浏览器的默认事件，简写方式

<a @click.prevent="" href="http://www.baidu.com">去百度</a> 在跳转的时候，会浏览器会阻止

原始的方法需要调用 preventDefault() 方法

new Vue({
            el: "#app",
            data: {},
            methods: {
                goToBaidu: function (e) {
    //                该方法用于阻止默认的事件
                    e.preventDefault()
                }
            }
        });

v-html： 用于将数据按照html的格式进行数据的解析

var vue = new Vue({
         el: "#app",
         data: {
             foo: "hello",
             bar: "world",
              todos: todos,
             strHtml: "<h1>asd</h1>",
             once: "qwe"
        }});
    
    <ul>
        <li v-html="strHtml">{
       { strHtml }}</li>
    </ul>

v-once：用于将该数据表示为类似于final的数据类型，只能赋值一次

## Templare 标签 ##

在使用该标签的时候，是不会在Dom中添加并显示的，该标签是Vue特定的标签，使用的场景，当有多个标签有同样的样式或者功能的时候，就使用该标签将多个标签放在该标签中，并在该标签上进行属性的操作或者条件判断，下面使用的场景适用于判断

<template v-if="toda.length">
       <section class="main">
          <input id="toggle-all" @change="checkedDown" class="toggle-all" type="checkbox">
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
             
             
             
             <li v-for="(item,index) in toda"
                :class="{
                completed:item.comleted,
                editing:item == updateDataItem
                }">
                <div class="view">
                   <input class="toggle" type="checkbox" checked
                         v-model="item.comleted">
                   <label @click="updateData(item)">{
       {item.title}}</label>
                   <button class="destroy" @click="deleteButton(index,$event)"></button>
                </div>
                <input class="edit"
                      @keydown.enter="keydownUpdata(index,$event)"
                      @blur="handleSavaEditKeyDown(item,index,$event)"
                      @keydown.esc ="handleCancelEditEsc"
                      v-model="item.title">
             </li>
          </ul>
       </section>
    </template>

## 页面刷新文本框获得焦点 ##

在普通的html页面，使用获取输入框的焦点，在input标签上添加autofocus属性，在页面刷新的时候就会获得焦点，可是上面的额用法是原生的，当在使用Vue去管理当前输入框的时候，autoFocus，就会失去作用，此时需要使用到Vue中的标签去管理

v-focus ： 是Vue中的用于让单钱标签获取焦点，但是在使用的时候需要引入该标签的自定义用法

Directive ： 用于设置自定义标签的

Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });

## 自定义标签：（在使用自定义标签的时候一定是要操作底层Dom的） ##

自定义标签的作用是可以直接操作底层的Dom元素，因为封装的标签不可能操作底层的，所以在使用的时候，需要将底层的操作封装起来使用。

创建自定义标签的方法就是上面的directive方法，在创建标签的时候，会涉及到几个方法，下面进行说明：

Bind ： 用于初始化数据的，但是在该节点中是获取不到父节点的数据的

Inserted ： 用于初始化数据的，是可以获取到父节点的数据的，跟Bind 的用法是一致的，区别就在于该方法是可以获取到父节点元素，Bind 是不可以获取父节点的元素的。

Update ： 当自定义元素在模板中的元素发生改变（当模板中的元素发生改变的时候，当前元素所在的模板也会发生改变的时候），才会调用该方法和下面的方法。

ComponentUpdate ：  跟上面的Update同时调用，该方法获取的是元素修改之后的数据，而Update获取的修改之前的数据

Unbind ： 该方法是档案元素跟Dom解绑的时候调用，就是当  当前模板消失的时候，比如隐藏，的时候l

例如，在一个div中有一个定时器，用于定时打印数据，而当该div消失或者隐藏的时候，此时div中的定时器也没有存在的价值，所以就会调用该方法，而我们所做的操作就是删除该定时器

/*
    * 在使用自定义标签的，操作的对象是： 当 模板 发生 改变的时候，才会触发， 所谓的模板。指的是：
    * 块级元素或者是行内块元素，指的就是包含 数据 的 标签，当数据发生改变的时候，此时的模板（就是包含数据的标签）会发生变化，此时就会触发自定义标签
    * */
    Vue.directive("demo", {
        //  bind 和 inserted 方法，会在初始化的时候，执行，并且只会执行一次
        // 获取父类节点，用于获取父节点，但是在获取的时候，父节点并获取不到
        bind(el, binding){
            console.log("bind", el.parentNode);
        },
        // 可以获取父节点，元素，跟bind的作用是一样的，只不过bind不能获取父节点
        inserted(el, binding){
            el.itemInterval = setInterval(function () {
                console.log("Hello");
            }, 1000);
            console.log("inserted", el.parentNode);
        },
        // 用于修改后的数据，当bind 和 inserted 中的数据修改之后，update 才会被调用，如果数据不修改的话，该方法是不会被调用的,调用的数据 是修改之前的数据
        update(el, binding){
            console.log("updated", el.innerHTML);
        },
        // 当bind 和 inserted中的数据被修改之后，才会调用该方法，该方法跟上面的 update 的调用的是一起的，但是获取的是 修改之后的数据
        componentUpdated(el, binding){
            console.log("componentUpdated", el.innerHTML);
        },
        // 用于解除 Dom 和 元素 的关系  , 当在当前元素中添加了特备的事件的时候，当该显示的元素消失的时候，需要将该元素在该方法中消除掉
        unbind(el, binding){
            console.log("unbind");
            console.log(el);
            window.clearInterval(el.itemInterval);
        }
    });

## 解决表达式闪烁的问题： ##

出现闪烁的问题是： 在数据加载的时候会出现数据渲染的情况

v-text : 直接在标签上面进行数据的绑定

v-cloak : 在style中进行设置

会在Vue 解析处理完模板之后就会自动把作用在v-cloak 上面的上面的样式display: **none**;改变成display: **block**;

就是先将该数据隐藏，当数据加载完成自后，再进行数据的显示。

## v-if和v-show的区别 ##

两者的区别：

v-if 表示的是：如果当前的数据是真的，才会对数据进行渲染，如果不是真的就不会对数据进行渲染

v-show： 表示的是，无论条件是否为真都会进行渲染，但是在显示的时候会根据条件判断是否要显示

v-pre：

<span v-pre>{
       { this will not be compiled }}</span>

被修饰的标签中的内容是不会被Vue解析的，因为会告诉Vue，该标签中不会存在需要Vue去解析的数据或者标签

## 计算属性：（computed） ##

该computed标识用于计算属性，在使用的时候，里面的是方法的形式，但并不是在methods中使用，并不能当成方法去使用，只能做属性去使用，在属性中会有get和set两个方法，get方法在使用该属性名称的时候，会被调用，set是在设置值的时候，会被调用，最重要的一点是就是，该计算属性是用于当多个地方用到同一个数据的时候，如果当前的属性被计算出来，会被缓存起来，当下次调用的时候，直接从缓存中获取即可。

// computed 该对象是用于设置，计算属性的，虽然里面设置的是方法，但是不能
    //当 methods来使用，里面是设置计算实行的方法，在调用的时候，直接写方法名称即可
    // 不用像函数那样添加括号
    computed: {
       //下面这种方式是简写的方式
       // remaningCount:function () { 
       //     return toda.filter(t => !t.comleted).length
       // }
       //完整的写法
       //在计算属性的对象中，有get和set的方法，在调用的时候会默认调用git方法 ,如果想设置值，remaningCount = XXX
       remaningCount: {
          get(){
             return this.toda.filter(t => !t.comleted).length
          },
          set(){
             console.log("...");
          }
       }

## 监视(watch) ##

作用，用于监视数据的，当监视的数据发生改变的时候，才会调用该监视中的方法，监视的数据是在data中定义的

象监听到
    watch:{
       // 作用是用于监听toda 数据，当该数据发生改变的时候，就会被监听到，
       // 但是在使用的时候，如果你需要监听的不是简单的数据类型，是对象类型的需要添加 deep: true 用于表示 开启深层次的数据解析
       // 开启更深层次的监听, 如果只是监听基本数据类型的数据,不需要使用该标签,
       toda: {
          // 方法,刷新的要进行的操作,,
          // 用法，当数据发生改变的时候，就重新将数据放到localStorage ,从而完成数据的更新 val: 更新的数据、oldVal：更新之前的数据
          handler: function (val, oldVal) {
             console.log("数据被改变");
             window.localStorage.setItem("todaData",JSON.stringify(this.toda));
          },
          // 该注解的意思是用于,实时刷新,如果不开启,只有当数据发生改变的时候,才会触发该函数,而使用
          // immediate: true 的意思就是 实时的刷新
          deep:true,// 用于解析对象属性的数据
          immediate: true
       }
    }

组件：（可复用的Vue实例）Componet ，在使用组件的时候需要注意，如果组件名称是按照驼峰命名的，在使用的时候每个大写字母之间使用  -  分隔

##   component ： 用于自定义组件。 ##

// 全局注册组件，可以用在其被注册之后的任何新创建的Vue跟实例中，也包括其树中的其他子组件
        Vue.component("button-counter", {
            // 在使用的时候，Data 提供的是一个对象，需要将数据返回
            // 这样做的目的是，在使用的时候，每次使用自定义组件的时候，都会创建一个新的对象,保证数据的唯一性
            // 如果不保证数据的唯一性，会导致其他实例会受到一个实例点击的影响,每一个组件中的数据，在别的组件中是不能获取并使用的
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count ++">You clicked me {
       { count }} tiems.</button>'
        });
        new Vue({
            el: "#components-demo"
        });

注意： 在使用的时候，自定义组件中的data 数据是一个方法，在该方法中返回的是一个对象，在该data中定义的变量，在template中可以直接使用。

在使用组件的时候，分为局部组件和全局组件，全局组件在定义完成之后，其后面的组件可以直接使用，

全局组件定义的方式

Vue.component('component-a', { /* ... */ })
    Vue.component('component-b', { /* ... */ })
    Vue.component('component-c', { /* ... */ })
    
    new Vue({ el: '#app' })
    <div id="app">
      <component-a></component-a>
      <component-b></component-b>
      <component-c></component-c>
    </div>

局部组件定义的方式：在Vue实例中使用components属性创建的。局部组件在其他组件中是不能被访问的

import ComponentA from './ComponentA.vue'
    
    export default {
      components: {
        ComponentA
      },
      // ...
    }

## 父子间通信： ##

父组件传递消息给子组件，使用 props 。子组件向父组件传递消息，使用 emit。

单向数据流，在使用的时候，父类中传递给子类的对象，子类是不能修改其内存的指向的，可以进行修改，在操作的时候只要不修改其变量在内存中的指向即可，但是不建议使用该方式去修改值，因为在修改完成之后，父类中传递的对象数据并不知道由那个子类去修改的。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

在使用props的时候，可以对传递的数据进行验证，但是在使用验证的时候，不是将props定义为一个数组，而是定义为一个对象进行数据的校验，在使用基本数据类型的时候，也还可以使用对象类型

Vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 匹配任何类型)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
          type: String,
          required: true
        },
        // 带有默认值的数字
        propD: {
          type: Number,
          default: 100
        },
        // 带有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }
      }
    })

使用对象的方式进行校验

function Person (firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }
    Vue.component('blog-post', {
      props: {
        author: Person
      }
    })

## $emit： 表示子类数据传递给父类组件 ##

this.$emit('todoTodos',value);

参数一：表示当前子类传递给父类的事件，参数二：表示的是传递的值

<todo-todos @todoTodos="todos"></todo-todos>
    
    
    Vue.component('todo-todos',{
    
      methods:{
            todos:function(){
    
            }
        }
    });

说明，在子类的标签中（组件），$emit 的方法的事件的名称 todoTodos ,必须要添加相同名称的时间，该事件对应下面组件中的方法

## Vue的生命周期： ##

![1531106989.png][]

beforeCreate  ： 是在解析Vue实例的时候调用的，但是此时的data 和 methods 中是没有数据的，是获取不到在页面要显示的数据，

Create ： 是在Vue中的数据解析完成，数据在methods 和 data中可以获取到，但是此时的数据只是在内存中

beforMount ： 表示的数据在内存中完成模板解析，但是此时的数据并没有渲染到页面

Mounted ： 此时的数据已经在页面中显示，但是数据html模板已经渲染完成，该方法结束之后，就会在页面显示

beforeUpdate : 方法是在数据发生改变的时候调用，只有页面的参数发生改变该方法才会调用，但是此时的数据是存在于内存中，并不没有在页面中显示，页面显示的还是之前的老的数据

Virtual DOM re-render and  patch ： 表示会将最新的数据渲染到页面，

update ： 此时页面显示的数据是最新的，内存中的数据已经渲染到页面中

destroyed ： 此时处于销毁阶段，所有的数据（data、methods。。。）会全部销毁

## **[vue-resource][]： 用于请求的第三方插件，用于模仿jquery的请求（get、post、jsonp），设置请求的路径** ##

![20190129095809462.png][]

<div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
    <script>
        /*
        *   设置全局的请求路径
        * */
        Vue.http.options.root = 'http://www.baidu.com';
        //在使用post 的时候，需要设置数据发送的格式
        Vue.http.options.emulateJSON = true;
        new Vue({
            el: "#app",
            data: {},
            methods: {
                getInfo() {
                    this.$http.get("").then(function (resout) { });
                },
                postInfo() {
                    // 参数二：表示的是请求的数据
                    // 参数三: 表示的是发送数据的格式
                    this.$http.post("", {}, {}).then(function () { });
                },
                jsonpInfo() {
                    this.$http.jsonp("").then(function () { });
                }
            }
        });

## 动画过渡：Vue设置的动画还是蛮有意思的 ##

在看官网的时候，官网中提示可以使用第三方插件进行使用，这边小编使用的是animate.css，感觉还是不错的

animate.css 的网址：[https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css]

引入：

在设置的时候，设置的是动画的过程，是在插入元素的时候，执行的动画效果

<div id="app">
        <input type="button" value="显示" @click="show = !show">
        <transition
                enter-active-class="animated rotateIn"
                leave-active-class="animated rotateInUpLeft"
        >
            <h1 v-if="show">显示数据</h1>
        </transition>
    
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show: false
            }
        });
    </script>

使用javascript钩子来完成动画效果

网址：[https://cn.vuejs.org/v2/guide/transitions.html\#JavaScript-%E9%92%A9%E5%AD%90][https_cn.vuejs.org_v2_guide_transitions.html_JavaScript-_E9_92_A9_E5_AD_90]

在使用的时候，需要注意在enter的时候，一定要调用 done方法，否则动画达不到预期的效果

<!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta charset="UTF-8">
        <title>小球</title>
        <script src="node_modules/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="node_modules/animate.css/animate.css"/>
    </head>
    <style>
        .bail {
            width: 30px;
            height: 30px;
            background: red;
            -moz-border-radius: 60px;
            -webkit-border-radius: 60px;
            border-radius: 60px;
        }
    </style>
    <body>
    <div id="app">
        <input type="button" v-on:click="show = !show " value="显示"/>
        <transition
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter"
        >
            <p v-if="show" class="bail"></p>
        </transition>
    
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show: false
            },
            methods: {
                beforeEnter(el) {
                    el.style.transform = "translate(0,0)";
                },
                enter(el, done) {
                    // 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
                    el.offsetWidth;
                    el.style.transform = "translate(150px,100px)";
                    el.style.transition = "all 3s ease";
                    done();
                },
                afterEnter() {
                    this.show = !this.show;
                }
            }
        });
    </script>
    </body>
    </html>

上面是一个小的案例，可以阅读一下，不明白的可以下方留言

对于列表渲染，for循环渲染出来的数据，需要使用transition-group  的标签才可以使用，如果使用transition是不能生效的

<transition-group appear
                          tag="ul">
            <li class="bail" v-for="(item,index) in srt" :key="item.id" @click="del(index)">
                <td>"姓名:"+{
       {item.name}}+"-- 年龄"+{
       {item.age}}</td>
            </li>
        </transition-group>

在使用的时候，需要设置key ，如果不设置在渲染的时候，会报错，设置key还有另一个用途，就是在复选框勾选一个元素，然后再添加一个元素的时候，勾选的状态是不会发生改变的，

其中

appear ：是用于设置，当页面在一开始加载的时候，就会执行动画效果，

tag：适用于替换标签的，因为在循环遍历显示数据的时候，在最li 标签的外面包含的是span标签，所以使用tag属性设置外面要显示的标签

使用Vue自带的动画过渡：

v-enter ： 表示元素被添加到指定的位置，在指定的位置前显示的时候，就会执行该动画效果

v-enter-active ： 表示在元素添加到指定的位置的时候，执行的动画效果

v-enter-to： 表示在元素元素添加到指定的位置之后，执行的效果，跟v-enter 的效果似乎是相似的

还有三个离开的时候执行的动画效果

v-leave   v-leave-active  v-leave-to

## component标签的使用： ##

使用的场景，当触发不同的事件，在一个标签中显示不同的效果

mode 的效果是用于设置在显示的时候顺序。

## 路由： ##

在使用路由的时候使用的是： vue-router 在使用的时候，需要引入该js文件

使用 new VueRouter 来创建理由对象，当引入js文件之后，在页面访问的时候会出现 \# 的符号，用来分隔目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70][]

在显示的地方需要添加<router-view></router-view> 标签用于显示自己渲染的模板，但是想多个<router-view></router-view>分别显示不同的数据，需要分别给与name属性，在 components 中分别对应 完成显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 1][]

在使用路由的时候，可以设置嵌套路由，父路径下面还有子路由（在父模块中显示子模块） children，在父路径请求下，再显示子路径的请求。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 2][]

但是在设置的时候，需要在父组件中 添加 <router-view></router-view> 标签，进行显示子路由的数据

![20190214142240580.png][]

### 使用webpack管理vue 项目：[https://blog.csdn.net/weixin\_38297879/article/details/87252758][https_blog.csdn.net_weixin_38297879_article_details_87252758] ###

### 在webpack 的介绍中已经介绍了一些整合vue 一些常规的使用 ###

## Vuex 的介绍 ##

Vuex 是一个专为vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，用于管理共享的数据

首先下载 vuex 的插件

cnpm i vuex -S

导入vuex

import Vuex from 'vuex'

注册vuex到vue中

Vue.use(Vuex)

new Vuex.Store() 实例，得到一个 数据仓储对象

var store = new Vuex.Store({
      state: {
        // 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的
        // 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问
        count: 0
      },
      mutations: {
        // 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；
        increment(state) {
          state.count++
        },
        // 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
        // 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名')
        subtract(state, obj) {
          // 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；
          console.log(obj)
          state.count -= (obj.c + obj.d)
        }
      },
      getters: {
        // 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations
        optCount: function (state) {
          return '当前最新的count值是：' + state.count
        }
        // 经过咱们回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；
        // 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；
      }
    })

// 总结：

// 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations

// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.\*\*\*

// 3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)

// 4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.\*\*\*

添加到vue 的实例中

const vm = new Vue({
      el: '#app',
      render: c => c(App),
      store // 5. 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 上，任何组件都能使用 store 来存取数据
    })

## $refs 的使用 ##

用于获取当前操作的vue 值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 3][]

[http_doc.liangxinghua.com_vue-family_1.3.html]: http://doc.liangxinghua.com/vue-family/1.3.html#
[1531106989.png]: /images/20220326/4266ec7c19e74d108fffd3828d5fd5ab.png
[vue-resource]: https://github.com/pagekit/vue-resource
[20190129095809462.png]: /images/20220326/4ba73a404daa4a6bbf82e613ba370ffa.png
[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/
[https_cn.vuejs.org_v2_guide_transitions.html_JavaScript-_E9_92_A9_E5_AD_90]: https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70]: /images/20220326/f1137b9ee3014f40a1ba8e9888e034f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220326/b098539dbc7e4323b5794fae6ebb3321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220326/4bfe146b0fbc41c29fd6ccf04a3bc28d.png
[20190214142240580.png]: /images/20220326/d432431c328a4a329a21a30e06b78749.png
[https_blog.csdn.net_weixin_38297879_article_details_87252758]: https://blog.csdn.net/weixin_38297879/article/details/87252758
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI5Nzg3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220326/d90bd7c385f046afaf06fc17eeffe1e6.png