devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue2基础

作者：秋刀鱼在做梦 | 2024-07-24 11:17:59

赞

踩

vue2基础

vue

简介

一套用于构建用户界面的渐进式JavaScript框架

特点

1、采用组件化模式，提高代码复用率、且让代码更好维护

2、声明式编码，让编程人员无需直接操作DOM，提高开发效率

3、使用虚拟DOM+优秀的Diff算法，尽量使用DOM节点

基本使用

创建Vue实例

1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象

2.root容器里面的代码依然符合Html规范，只不过混入了一些特殊的Vue语法

3.root容器里的代码被称为【Vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个vue实例，并且会配合组件一起使用

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会更新

注意区分：js表达式和js代码(语句)

1.表达式:一个表达式会生成一个值，可以放在任何一个需要值的地方

2.js代码：

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止 Vue 在启动时生成生产提示
        
        //创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为ess选择器字符串
            data:{ //data用于存储数据，数据供e1所指定的容器去使用，我们暂时先写成一个对象
                name:'尚硅谷'
            }
        });
    </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

模板语法

Vue语法有两大类：

1.插值语法：

功能：用于解析标签体内容

写法：{{xxx}}，其中xxx是js表达式，且可以直接读取到data中的所有属性

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

v-bind:href=“xxx” 可以简写成:href=“xxx” xxx同样是js表达式，且可以直接读取到data中的所有属性

数据绑定

Vue中有两种数据绑定的方式：

1、单向绑定(v-bind)：数据只能从data流向页面

2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

备注：

1.双向绑定一般都应用在表单类元素上

2.v-model:value 可以简写为v-model 因为v-model默认收集的是value值

el和data的两种写法

 <script>
        // const v = new Vue({
        //      el: '#root', el的第一种写法
        //      data: {
        //          name: '鱼头'
        //      }
        //  })

        //  v.$mount('#root') //el的第二种写法

        new Vue({
            el:'#root',
            // data:{

            // } data的第一种写法
            
            //data的第二种写法 函数式
            data:function(){
                return{
                    name:''
                }
            }
        })
     </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

理解MVVM

MVVM模型：

  1. M：模型(Model) data中的数据
  2. V： 视图(view) 模板代码
  3. VM： 视图模型(ViewModel) Vue实例

观察发现：

data中所有的属性，最后都出现在了vm上

vm上的所有属性及Vue原型上的所有属性，在Vue模板中都可以直接使用

Object_defineProperty

<script type="text/javascript">
        let number = 18
        let person ={
           name:'zzh',
           sex:'男',
        //    age:30
       }

       Object.defineProperty(person,'age',{
           value:18,
           enumerable:ture, //控制属性是否可以枚举，默认值是false
           writable:true, //控制属性是否可以被修改，默认值是false
           configurable:true, //控制属性是否可以被删除，默认值是false

           //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
           get(){
               return number
           },

           //当有人修改person的age属性时，set函数(setter)就会被调用，且回收到修改的具体值
           set(value){
                console.log("修改了age信息，且值是",value)
                number = value
           }
       })

       console.log(Object.keys(person))
        
     </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

数据代理

通过一个对象代理对另一个对象中的属性的操作(读/写)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RC1EkC0D-1631271650329)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210902145756698.png)]

事件处理

事件的基本使用

  1. 使用v-on:xxx 或@xxx 绑定事件，其中xxx是事件名

  2. 事件的回调需要配置在methods对象中，最终会在vm上

  3. methods中配置的函数，不要用箭头函数；否则this就不是vm

  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

  5. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参

事件修饰符

   <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: green;
        }
        .box1{
            padding: 5px;
            background-color: greenyellow;
        }
        .box2{
            padding: 5px;
            background-color:royalblue;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: salmon;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="root">
        <h2>你好，{{name}}</h2>
        <!-- 阻止默认事件(常用) -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡(常用) -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- 事件只触发一次(常用) -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg">
            div1
            <div class="box2" @click="showMsg">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待 -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        new Vue({
            el:'#root',
            data:{
                name:'鱼头'
            },
            methods:{
                showInfo(e){
                    alert('你好')
                },
                showMsg(msg){
                    console.log(msg)
                }, 
                demo(){
                    console.log('1')
                }
            }
        })
     </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

键盘事件

1、Vue中常用的案件别名

回车 enter

删除 delete

退出 qsc

空格 space

换行 tab

上 up

下 down

左 left

右 right

2、Vue未提供别名的案件，可以使用案件原始的key值去绑定，但要注意转为kebab-case（短横线命名）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta

配合keyup使用，按下修饰键的同时再按下其他键，然后释放其他键，事件才被触发

配合keydown使用，正常触发事件

4、也可以使用keyCode去指定具体的按键（不推荐）

5、Vue.config.KeyCodes.自定义键名 = 键码，可以去定制按键别名

属性

计算属性

1.定义：要用的属性不存在，要通过已有的属性计算得来

2.原理：底层借助了object.defineproperty方法提供的getter和setter

3.get函数什么时候执行？初次读取的时候和当前依赖的数据发生改变的时候会再次调用

4.优势：跟method实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注：计算数学最终会直接出现在vm上，直接读取使用即可

如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

 <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'鱼',
                lastName:'头'
            },
            computed:{
                fullName:{
                    //get有什么作用？当有人读取fullName时，get就会被调用,且返回值久作为fullName的值
                    //get什么时候调用？1.初次读取fullName时2.所依赖的数据发生变化时
                    get(){
                        console.log('get被调用了')
                        // console.log(this) //此处的This是vm
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
                        console.log('set',value)
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
     </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

计算属性的简写

 computed:{
                //只需要get时，可以简写
                fullName:function(){
                    console.log('get被调用')
                    return this.firstName + '-' + this.lastName
                }
            }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

//监视的写法1
            watch:{
                isHot:{
                    immediate:true, //初始化时handler调用
                    //handler什么时候调用？当isHot发生变化时
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                }
            }
//监视的写法2
 vm.$wacth('isHot',{
            immediate:true
        })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

深度监视

深度监视：

1.Vue中的watch默认不监测对象内部值的改变（一层）

2.配置deep:true可以检测对象内部改变（多层）

备注：

Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据数据的具体结构，决定是否采用深度监视

 const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            computed:{
               info(){
                   return this.isHot ? '炎热':'冰冷'
               }
            },
            //监视的写法1
            watch:{
                isHot:{
                    immediate:true, //初始化时handler调用
                    //handler什么时候调用？当isHot发生变化时
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                },
                'number.a':{
                    handler(){
                        console.log('a被改变了')
                    }
                },
                //监视多级结果中所有属性的变化
                number:{
                    deep:true
                }
            }
        })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

监视的简写形式

          //简写
                isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            

        vm.$wacth('isHot',function(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

watch对比computed

computed和watch之间的区别：

computed能完成的功能，watch都可以完成

watch能完成的功能，computed不一定能完成，比如watch可以进行异步操作

两个重要的原则：

1、所被vue管理的函数，最好写成普通函数，这样This的指向才是vm 或组件实例对象

2、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象

 computed:{
               fullName(){
                   console.log('get被调用了')
                   return this.firstName + '-' + this.lastName
               }
            },
            
            watch:{
               firstName(val){
                this.fullName = val + '-' + this.lastName
               },
               lastName(val){
                this.fullName = this.firstName + '-' + val
               }
            }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

绑定样式

绑定class样式

写法：

:class=“xxx” xxx可以是字符串、对象、数组

字符串的写法适用于：类名不确定，要动态获取

对象的写法适用于：要绑定多个样式，个数不确定，名字也不确定

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

 <div id="root">
        <!-- 绑定class样式--字符串写法 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

        <!-- 绑定class样式--数组写法 -->
        <div class="basic" :class="classArr">{{name}}</div>

        <!-- 绑定class样式-- 对象写法 -->
        <div class="basic" :class="classObj">{{name}}</div>
        
    </div>
    data:{
                    classArr:[class1,class2],
                    classObj:{
                        class1:false,
                        class2:false
                    }
                },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

绑定Style样式

<!-- 绑定style样式 对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!-- 绑定style样式 数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
        
        
          styleObj:{
                    fontSize:'40px'
                },
                styleObj2:{
                    color:'red'
                }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

条件渲染

条件渲染：

v-if：适用于频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

v-show

适用于切换频率较高的场景

特点是不展示的DOM的元素未被移除，仅仅是使用样式隐藏掉

使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

列表渲染

	<!-- 遍历数据 -->
        <ul>
            <li v-for="(value,key) of car" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
           <li v-for="(p,index) in personArr" :key="p.id">
               {{p.name}}-{{p.age}}
           </li>
        </ul>
       <!-- 遍历字符串 -->
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <ul>
            <li v-for="(a,b) of 5" :key='index'>
                {{index}}-{{number}}
            </li>
        </ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

key作用与原理

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较：比较规则如下：

  1. 旧虚拟DOM中中找到了与新虚拟DOM相同的key:

    • 若虚拟DOM中内容没变，直接使用之前的真实DOM

    • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

  2. 虚拟DOM中未找到与新虚拟DOM相同的key值

    创建新的真实DOM，随后渲染到页面

用Index作为key可能会引发的问题：

  1. 若对数据进行：逆序添加，逆序删除等破坏顺序的操作：会产生没有必要的真实DOM更新，页面效果没有问题，但效率低
  2. 如果结构中包含输入类的DOM：会产生错误DOM更新，界面有问题

开发中如何选择key

  1. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
  2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCAYvMfo-1631271650333)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210904100727553.png)]

列表过滤

用watch实现模糊查询

new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                   {id:'001',name:'李',age:18,sex:'女'},
                   {id:'002',name:'张',age:12,sex:'女'},
                   {id:'003',name:'王',age:19,sex:'女'},
                   {id:'004',name:'段',age:22,sex:'女'}
               ],
               filPersons:[]
            },
            watch:{
                keyWord:{
                    immediate:true,
                    handler(val){
                        this.filPersons = this.persons.filter((p)=>{
                            
                            return p.name.indexOf(val) !== -1
                        })
                        
                    }
                }
            }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

用computed实现

computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

列表排序

data:{
   sortType:0, //0 原顺序 1 降序 2 升序  
},
computed:{
                filPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                    //判断是否需要排序
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType === 1 ? p2.age-p1.age:p1.age-p2.age
                        })
                    }
                    return arr
                }
            }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

sort()比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

Vue检测数据原理

<script type="text/javascript">
        let data = {
            name:'鱼头'
        }

        //创建一个监控的实例对象，用于监视data中属性的变化
        const obs = new Observer(data)
        console.log(obs)

        //准备一个vm实例对象
        let vm = {}
        vm._data = data = obs

        function Observer(obj){
            //汇总对象中所有的属性形成一个数组
            const keys = Obejct.keys(obj)
            //遍历
            keys.forEach((k)=>{
                Obejct.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(){
                        console.log('${k}被改了')
                        obj[k] = val
                    }
                })
            })
        }
    </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

vue监视数据的原理

Vue会监视data中所有层次的数据

如何检测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要检测的数据

  1. 对象中后追加的数据，vue默认不做响应式处理

  2. 如需给后添加的数据做响应式，请使用如下API：

    Vue.set(target,propertyName/index,value)或vm.$set(target,propertyName/index,value)

如何检测数组中的数据？

通过包装数组更新元素的方法实现，本质就是做了两件事：

  1. 调出原生对应的放对数据进行更新
  2. 重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用如下方法

  1. 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  2. Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data）添加属性

收集表单数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XoweFmoW-1631271650340)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210904190711760.png)]

<body>
     <!-- 准备好一个容器 -->
     <div id="root">
         <form @submit.prevent="demo">
            
            账号：<input type="text" v-model:trim="account"> <br/><br/>
            密码：<input type="password" v-model="password"> <br/><br/>
            性别：
            男<input type="radio" name="sex" v-model="sex" value="male">
            女<input type="radio" name="sex" v-model="sex" value="female"><br/><br/>
            爱好:
            学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="game">
            吃饭<input type="checkbox" v-model="hobby" value="eat">
            <br/><br/>
            所属校区
            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option></option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option></option>
                <option value="wuhan">武汉</option>
            </select>
            <br/><br/>
            其他信息：
            <textarea v-model.lazy="other"></textarea>
            <br/><br/>
            <input type="checkbox" v-model="agree">
            阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <button>提交</button>
         </form>
        
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false
      new Vue({
          el:'#root',
          data:{
              account:'',
              password:'',
              sex:'female',
              hobby:[],
              city:'beijing',
              other:'',
              agree:''
          },
          methods:{
              demo(){
                
                console.log(JSON.stringify(this._data))
              }
          }
          
      })
    </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

内置指令

v-text指令

作用：向所在的系欸但那中渲染文本内容、

与插值语法的区别是v-text会替换掉节点中的内容，{{xx}}不会

v-html指令

作用：向指定节点中渲染包含html结构的内容

与插值语法的区别：

1、 v-html会替换掉节点中的所有内容，插值不会

2、v-html可以识别Html语法

v-html有安全性问题

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上

v-cloak指令

本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令

跳过其所在节点的编译过程

可以利用指令跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译

自定义指令

定义语法：

//全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
new Vue({

          el:'#root',
          data:{
              n:1
          },
    		//局部指令
          directives:{
              //big函数同时会被调用？1.指令与元素成功绑定时(一上来)
              //2.指令所在的模板被重新解析时
              big(element,binding){
                  console.log(this)//此时的this是window
                  element.innerText = binding.value * 10
              },
              //配置对象中常用的三个回调
              fbind:{
                  //指令与元素成功绑定时
                  bind(element,binding){
                    element.value = binding.value
                  },
                  //指令所在元素被插入页面时
                  inserted(element,binding){
                    element.focus()
                  },
                  //指令所在的模板被重新解析时
                  updata(element,binding){                   
                    element.value = binding.value
                  }
              }
          }
          
      })

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

指令定义时不加v-，但使用时加v-

指令名如果是多个单词，要使用kebab-case命名方法，不要用camelCase命名

生命周期

又名生命周期回调函数、生命周期函数、生命周期钩子

是什么：Vue关键时刻帮我们调用的一些特殊名称的函数

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

生命周期函数中的this指向是vm 或 组件实例对象

挂载流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7hfHwgyt-1631271650343)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210905154445767.png)]

销毁流程

vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及(自定义)事件监听器。

总结

vm的生命周期：

将要创建 ===> 调用beforeCreate函数

创建完毕 ===> 调用created函数

将要挂载 ===> 调用beforeMount函数

挂载完毕 ===> 调用mouted函数(重要)

将要更新 ===> 调用beforeUpdate函数

更新完毕 ===> 调用Updated函数

将要销毁 ===> 调用beforeDestory函数(重要)

销毁完毕 ===> 调用destoryed函数

常用的生命周期钩子：

1、mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】

2、beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

1、销毁后借助Vue开发者工具看不到任何信息

2、销毁后自定义事件会失效，但原生DOM事件依然有效

3、一般不会再beforeDestory操作数据，因为即使操作数据，也不会再触发更新流程了

组件化编程

模块

理解:向外提供特定功能的js程序，一般就是一个js文件

作用：复用js，简化js的编写，提高js运行效率

当应用中的js都是以模块来编写，那么这个应用就是一个模块化的应用

组件

理解：用来实现局部(特定)功能效果的代码集合

作用：复用代码，简化项目编码，提高运行效率

当应用中的功能是多组件的方式来编写的，那么这个应用就是一个组件化应用

非单文件组件

vue中使用组件的三大步骤：

1、定义组件(创建组件)

2、注册组件

3、使用组件(写组件标签)

如何定义一个组件？

使用vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别

区别如下：

1、组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器

2、data必须写成函数，避免组件被复用时，数据存在引用关系

如何注册组件

局部注册：靠new Vue的时候传入componets选项

全局注册：靠Vue.component(‘组件名’,组件)

编写组件标签：

组件的几个注意点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iOUOUJHs-1631271650344)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210905173536585.png)]

VueComponent构造函数

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

特别注意：每次调用Vue.extend，返回时都是一个个新的VueComponent

关于this指向：

组件配置中：

deta函数、methods函数、watch中的函数、computed中的函数，它们的this均是【VueCompoent实例对象】

new Vue()配置中：

deta函数、methods函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】

VueComponent的实例对象，以后简称vc(组件实例对象)，Vue实例对象，以后简称vm，vm有一个功能vc做不到，vm可以通过el知道为了哪个组件服务

一个重要的内置关系

VueComponent.prototype.__ proto__ === Vue.prototype

为什么要有这样的关系：让组件实例对象(vc)可以访问到Vue原型对象上的属性、方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlSAmwsE-1631271650346)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210905193911899.png)]

单文件组件

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称{{schoolName}}</h2>
        <h2>学校地址{{address}}</h2>
    </div>
</template>
<script>
export default {
    name:'school',
    data() {
        return {
            schoolName:'鱼头',
            address:'湖南衡阳'
        }
    },
}
</script>
<style scoped>
    .demo{
        background: skyblue;
    }
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

使用Vue脚手架

安装vue-cli

创建一个vue脚手架项目

使用npm run sever启动

脚手架文件结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qt5PDNRP-1631271650348)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210906154042814.png)]

render函数

render(createElement){
	return createElement('h1','你好啊')
}

  • 1
  • 2
  • 3

main.js中把App组件放入容器中：

因为精简版的vue不包含模板解析器可以省一些体积

render:h => h(App)

  • 1

关于不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别：

vue.js是完整版的vue 包含：核心功能+模板解析器

vue.runtime.xxx.js是运行版的vue，只包含：核心功能：没有模板解析器

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

vue.config.js配置文件

使用vue.inspect > output.js可以查看到Vue脚手架的默认配置

使用vue.config.js可以对脚手架进行个性化定制

ref属性

1.被用来给元素或子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

3.使用方式:

<h1 ref="xxxx”>...</h1> 或<School ref="xxxx"> </school>

  • 1

获取this.$ref.xxx

scoped样式

作用：让样式在局部生效，防止冲突

写法：

总结TodoList案例

组件化编码流程

1.实现静态组件，抽取组件，使用组件实现静态页面效果

2.实现动态组件：考虑好数据存放位置，数据是一个组件在用，还是一些组件在用

一个组件在用：放在组件自身即可

一些组件在用：放在他们共同的父组件上（状态提升）

3.实现交互：从绑定事件开始

props

适用于：

1.父组件 ===>子组件 通信

2.子组件 ===> 父组件 通信 (要求父先给子一个函数)

使用v-model

要切记v-model的值不能是props传来的值，因为props是不可以修改的

props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

浏览器本地存储

let p ={name:'鱼头',age:'23'}
function saveData(){
	localStorage.setItem('msg','hello')
    localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
    localStorage.getItem('msg');
    const result = localStorage.getItem('person')
    console.log(JSON.parse(result))
}
function deleteData(){
    localStorage.removeItem('msg')
}
function deleteAllData(){
    localStorage.clear()
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

将上面的localStorage替换成SessionStorage，SessionStorage存储的内容会随着浏览器窗口关闭而消失

LocalStorage存储的内容，需要手动清除才会消失

组件自定义事件

绑定

App.vue

<!--通过父组件给子组件传递函数类型的Props实现:子给父组件传递数据-->
<School :getSchoolName="getSchoolName"/>
<!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法：使用@或v-on)-->
<Student @yutou.once="getStudentname"></Student>
<!--通过父组件给子组件绑定一个自定义事件实现，子给父传递数据(第二种写法：使用ref)-->
<Student ref="student"></Student>

<script>
	export default{
        methods:{
            getSchoolName(name){
                console.log('app收到了学校名',name)
            },
            getStudentName(name,...params){
                console.log('app收到了学生名',name,params)
            }
        },
        mounted(){
            this.$ref.student.$on('yutou',this.getStudentName)
        }
    }
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

School.vue

<script>
	export default{
        name:'School',
        props:['getSchoolName'],
        methods:{
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        }
    }
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Student.vue

<script>
	export default{
        name:'School',
        props:['getSchoolName'],
        methods:{
            sendSchoolName(){
                //触发student组件实例身上的yutou事件
                this.$emit('yutou',this.name)
            },
            
        
        }
    }
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

解绑

		unbind(){
                this.$off('yutou') //解绑一个自定义事件
                //this.$off('[yutou,demo]') //解绑多个自定义事件
                this.$off() //解绑所有的自定义事件
            },
        death(){
			this.destory() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效
}    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

总结

1.一种组件间通信的方式，适用于子组件===>父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中：父组件才能收到数据）

3.绑定自定义事件：

第一种方式：在父组件中:<Demo @yutou="text" /> 或 <Demo v-on:yutou="text" />

第二种方式：在父组件中：

<Demo ref="demo"/>
...
mounted(){
	this.$refs.xxx.$on('yutou',this.test)
}

  • 1
  • 2
  • 3
  • 4
  • 5

若想让自定义事件只能触发一次，可以使用once修饰符，或$Once方法

触发自定义事件：this.$emit('yutou')

解绑自定义事件：this.$off('yutou')

组件上也可以绑定原生DOM，需要使用native修饰符

注意：通过this.$refs.xxx.$on('yutou',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题

组件间通信方式

全局事件总线

一种组件间通信的方式，适用于任意组件间通信

安装全局事件总线：

new Vue({
	....
	beforeCreated(){
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	}
	....
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

使用事件总线

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调在A组件自身

methods(){
	demo(data){.....}
}
....
mounted(){
	this.$bus.$on('xxxx',数据)
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

提供数据：this.$bus.$emit('xxxx',数据)

最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件

消息订阅与发布

一种组件间通信的方法，适用于任意组件间通信

使用步骤：

1.安装pubsub: npm i pubsub-js

2.引入：import pubsub from 'pubsub.js'

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
	demo(data){...}
}
...
mounted(){
	//pid是指消息的id，销毁时使用pid
	this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

4.提供数据：pubsub.publish('xxx',数据)

5.最好在beforeDestory钩子中，用PubSub.unsubscribe(pid)去取消订阅

nextTick()

语法：this.$nextTick(回调函数)

作用：在下一次DOM更新结束后执行其指定的回调

当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

过度与动画

作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QxUaagFt-1631271650349)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210907191929739.png)]

写法：

1.准备好样式：

  • 元素进入的样式：
    1. v-enter:进入的起点
    2. v-enter-active：进入过程中
    3. v-enter-to:进入的终点
  • 元素离开的样式：
    1. v-leave:离开的起点
    2. v-leave-active:离开的过程中
    3. v-leave-ro：离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性

<transition name="hello">
	<h1 v-show="isShow">xxx</h1>
</transition>

  • 1
  • 2
  • 3

若有多个元素需要过渡，则需要使用：<transition-group>，且每个元素都要指定key值

配置代理

方式一

在vue.config.js中添加如下配置：

devServer:{
	proxy:"http://localhost:5000"
}

  • 1
  • 2
  • 3

说明：

1.优点：配置简单，请求资源时直接发给前端(8080)即可

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方式二

编写vue.config.js配置具体代理规则

devServer:{
        proxy:{
            '/api':{ //匹配所有以api开头的请求路径
                target:'http://localhost:5000', //代理目标的基础路径
                pathRewrite:{'/api':''}, //去掉api前缀
                ws:true, //用于支持websocket
                changeOrigin:true //设置为true时，服务器收到的请求头Host为：localhost:5000 如果为false收到的请求头为localhost:8080
            }
        }
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

插槽

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件

2.分类：默认插槽、具名插槽、作用域插槽

3.使用方式：

默认插槽

父组件中：
	<Category>
		<div>html结构</div>
	</Category>
子组件：
	<template>
		<div>
			<!--定义插槽-->
			<slot>插槽默认内容</slot>
		</div>
	</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

具名插槽

父组件中：
	<Category>
		<template slot="center">
			<div>html结构1</div>
		</template>
		
		<template v-slot:footer>
			<div>html结构2</div>
		</template>		
	</Category>
	
子组件：
	<template>
		<div>
			<!--定义插槽-->
			<slot name="center">插槽默认内容</slot>
            <slot name="footer">插槽默认内容</slot>
		</div>
	</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

父组件中：
	<Category>
		<template scope="scopeData">
        	<!--生成的是ul列表-->
			<ul>
                <li v-for="g in scopeData.games" :key="g">{{g}}</li>
            </ul>
        </template>
	</Category>

	<Category>
		<template scope="scopeData">
        	<!--生成的是h4标题-->
			<ul>
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </ul>
        </template>
	</Category>

子组件
	<template>
		<div>
            <slot :games="games"></slot>
        </div>
	</template>

	<scirpt>
		export default{
        	name:'Category',
        	props:['title'].
        	//数据在子组件自身
        	data(){
        		return{
        		games:['红色警戒','英雄联盟','塞尔达传说','胡闹厨房']
        		}
        	}
        }
	</scirpt>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

Vuex

专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0iL2dmw-1631271650350)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210909192916358.png)]

什么时候使用Vuex

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

搭建vuex环境

1.创建文件:src/store/index.js

//该文件用于创建vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备action——用于响应组件中的动作
const actions = {
    
}
//准备mutations——用于操作数据(state)
const mutations = {
    
}
//准备state——用于存储数据
const state = {
    
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

2.在main.js中创建vm时传入store配置项

//引入vuex
import Vuex from 'vuex'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'
//关闭vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)


//创建Vue实例对象---vm
const vm = new Vue({
  //将app组件放入容器中
  render: h => h(App),
  store
}).$mount('#app')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

基本使用

1.初始化数据，配置actions，配置mutations，操作文件stroe.js

2.组件中读取vuex中的数据:$store.state.sum

3.组件中修改vuex中的数据:$store.dispath('action中的方法名',数据)或$store.commit('mutation中的方法名',数据)

methods: {
    increment(){
      this.$store.commit('JIA',this.n)
    },
    decrement(){
      this.$store.commit('JIAN',this.n)
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

getter配置项

当state中的数据需要经过加工后再使用时，可以使用getters加工

在store.js中添加getters配置

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	....
	gettters
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

组件中读取数据：$store.getter.bigSum

map方法的应用

import {mapState,mapGetters,mapMutation,mapActions} from ‘vuex’

mapState方法

用于帮助我们映射state中的数据为计算属性

computed:{
	//借助mapState生成计算属性:sum、school、subject（对象写法）
	...mapState({sum:'sum',school:'school',subject:'subject'})
	//借助mapState生成计算属性:sum、school、subject（数组写法）
	...mapState(['sum','school','subject'])
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
mapGetter方法

用于帮助我们映射getters中的属性为计算属性

computed:{
	//借助mapGetters生成计算属性，bigSum（对象写法）
	...mapGetters({bigSum:'bigSum'})
	//借助mapGetters生成计算属性，bigSum（数组写法）
	...mapGetters({'bigSum'})
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
mapActions方法

用于帮助我们生成与action对话的方法，即包含$store.dispatch(xxx)函数

methods:{
	//靠mapAction方法LicremnetOdd,incrementWait(对象形式)
	...mapActions({incrementOdd:'jiaOdd',incremnetWait:'jiaWait'})
	//靠mapAction方法LicremnetOdd,incrementWait(数组形式)
	...mapActions(['jiaOdd','jiaWait'])
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
mapMutations方法

用于帮助我们生成与mutations对话的方法,即包含$store.commit(xxx)函数

methods:{
	//靠mapMutations生成:increment、decrement(对象形式)
	...mapMutation(increment:'JIA',decrement:'JIAN')
	//靠mapMutations生成:increment、decrement(数组形式)
	...mapMutation(['JIA','JIAN'])
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

mapActions与mapMutations使用时，若需要传递参数时，在模板中绑定事件时传递好参数，否则参数是事件对象

模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确

1.修改store.js

const countAbout = {
	namespace:true, //开启命名空间
	state:{x:1},
	mutation:{...},
	action:{...},
	getters:{
		bigSum(state){
			return state.sum * 10
		}
	}
}

const personAbout = {
	namespace:true, //开启命名空间
    state:{...},
    mutation:{...},
    action:{...}
}
              
const store = new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }          
})              

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

2.开启命名空间后，组件读取state数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject'])

  • 1
  • 2
  • 3
  • 4

3.开启命名空间后，组件读取getters数据

//方式一：自己直接读取
this.$store.getters{'personAbout/firstPersonName'}
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

  • 1
  • 2
  • 3
  • 4

4.开启命名空间后，组件调用dispatch

//方式一：自己直接dispatch
this.$store.dispach('personAbout/addPersonWang',person)
//方式二：借助mapAction
...mapAction('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  • 1
  • 2
  • 3
  • 4

5.开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutation
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

  • 1
  • 2
  • 3
  • 4

路由

vue-router

是vue的一个插件库，专门用来实现SPA应用

SPA应用：

1.单页web应用

2.整个应用只有一个完整的页面

3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新

4.数据需要通过ajax请求获取

理解

一个路由就是一组映射关系，(key-value)

key为路径，value可能是function或component

分类

后端路由：

value是function用于处理客户端提交的请求

工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

value是component，用于展示页面内容

工作过程：当浏览器的路径改变时，对应的组件就会显示

基本使用

1.安装vue-router，命令：npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from ',,/components/Home'

//创建并暴露router实例对象去管理一组一组的路由规则，
export default new VueRouter({
	routers:[
	{
		path:'/about',
		components:About
	},
	{
		path:'/home',
		components:Home
	}
]
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

4.实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

5.指定展示位置

<router-view></router-view>

几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常放在components文件夹中

2.通过切换，隐藏了的路由器组件，默认是被销毁掉的，需要的时候再去挂载

3.每个组件都有自己的$route属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过组件的$router属性获取到

嵌套路由

1.配置路由规则，使用children配置项：

routers:[
	{
		path:'/about',
		components:About
	},
	{
		path:'/home',
		components:Home,
		children:[
			{
				path:'new', //此处不要写/new
				components:News
			},
			{
				path:'message', //此处不要写/message
				components:Message
			}
		]
	}
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.跳转

<router-link to="/home/news">News</router-link>

  • 1

路由传参

1.传递参数

<!--跳转并携带query参数，to字符串写法-->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!--跳转并携带query参数，to对象写法-->
<router-link :to="{
                  path:'/home/message/detail',
                  query:{
						id:666,
                  		title:'你好'
                  	}
                  }"
             >跳转</router-link>             

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2.接收参数

$route.query.id

$router.query.title

命名路由name

作用：可以简化路由的跳转

使用：

1.给路由命名

routers:[
	{
		path:'/demo',
		components:Demo,
		children:[
			{
				path:'test',
				components:Test,
				children:[
                    {	
                    	name:'hello' //给路由命名
                        path:'welcome', 
                        components:Hello
                    }
                ]
			}
		]
	}
	
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.简化跳转

<!--简化前，需要写完整的路径-->
<router-link to="/demo/test/hello">跳转</router-link>

<!--简化后，直接通过名字跳转-->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数-->
<router-link :to="{
                  name:'hello',
                  query:{
						id:666,
                  		title:'你好'
                  	}
                  }"
             >跳转</router-link>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
路由的params参数

1.配置路由

{
	path:'/home',
	components:Home,
	children:[
		{
			path:'news',
			components:News
		},
		{
			components:Message,
			chidlren:[
				{
					name:'xiangqing',
					path:'detail/:id/:title' //使用占位符声明接收params参数
					componenets:Detail
				}
			]
		}
	]
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.传递参数

<!--跳转并携带params参数，to的字符串写法-->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!--跳转并携带params参数，to的对象写法-->
<router-link :to="{
	name:'xiangqing',
	params:{
		id:666,
		title:'你好'
	}
}"
>跳转</router-link>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

3.接收参数

$router.params.id
$router.params.title

  • 1
  • 2
路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	//props:{a:500}
	
	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有的params参数通过props传给Detail组件
	props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return{
			id:route.query.id,
			title:route.query.title
		}
	}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
replace属性

作用：控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式：分别为push和repalce，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push

开启replace模式：<router-link replace .....></router-link>

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活

//$router的两个API
this.$router.push({
	name:'xiangqing',
	prams:{
		id:xxx,
		title:xxx
	}
})

this.$router.replace({
	name:'xiangqing',
	prams:{
		id:xxx,
		title:xxx
	}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //前进和后退都可以

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

  • 1
  • 2
  • 3

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

activated路由组件被激活时触发

deactiveted路由组件失活时触发

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫

//全局前置守卫：初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next) =>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 
		if(localStorage.getItem('school') === 'yutou'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')	
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行，每次路由切换后执行
router.afterEach((to,from,next)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){
		document.title = to.meta.title  //修改网页的Title
	}else{
		document.title = 'vue_test'
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

独享路由守卫

beforeEnter(to,from,next){
	console.log('beforeEnter',tp,from)
	if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 
		if(localStorage.getItem('school') === 'yutou'){
			next()
		}else{
			alert('暂无权限查看')	
		}
	}else{
		next() //放行
		}
	}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

组件内路由守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
},
//离开守卫：通过路由规则，离开该组件时被调用
//跟全局后置路由守卫不同
beforeRouteLeave(to,from,next){
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

路由器的两种模式

1.对于一个url来说，#后面的内容就是hash值

2.hash值不会包含在HTTP请求中，即:hash值不会带给服务器

hash模式：

地址栏中永远带着#号，不美观

若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法

兼容性较好

history模式

地址干净，美观

兼容性和hash模式相比略差

应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue UI组件库

移动端常用UI组件库

Vant、Cube UI、Mint UI

PC端常用UI组件库

Element UI、IView UI

ry.id,
title:route.query.title
}
}
}


#### replace属性

作用：控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式：分别为`push`和`repalce`，`push`是追加历史记录，`replace`是替换当前记录，路由跳转时候默认为`push`

开启replace模式：`<router-link replace .....></router-link>`

### 编程式路由导航

作用：不借助`<router-link>`实现路由跳转，让路由跳转更灵活

```js
//$router的两个API
this.$router.push({
	name:'xiangqing',
	prams:{
		id:xxx,
		title:xxx
	}
})

this.$router.replace({
	name:'xiangqing',
	prams:{
		id:xxx,
		title:xxx
	}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //前进和后退都可以

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

  • 1
  • 2
  • 3

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

activated路由组件被激活时触发

deactiveted路由组件失活时触发

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫

//全局前置守卫：初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next) =>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 
		if(localStorage.getItem('school') === 'yutou'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')	
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行，每次路由切换后执行
router.afterEach((to,from,next)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){
		document.title = to.meta.title  //修改网页的Title
	}else{
		document.title = 'vue_test'
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

独享路由守卫

beforeEnter(to,from,next){
	console.log('beforeEnter',tp,from)
	if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 
		if(localStorage.getItem('school') === 'yutou'){
			next()
		}else{
			alert('暂无权限查看')	
		}
	}else{
		next() //放行
		}
	}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

组件内路由守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
},
//离开守卫：通过路由规则，离开该组件时被调用
//跟全局后置路由守卫不同
beforeRouteLeave(to,from,next){
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

路由器的两种模式

1.对于一个url来说，#后面的内容就是hash值

2.hash值不会包含在HTTP请求中，即:hash值不会带给服务器

hash模式：

地址栏中永远带着#号，不美观

若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法

兼容性较好

history模式

地址干净，美观

兼容性和hash模式相比略差

应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue UI组件库

移动端常用UI组件库

Vant、Cube UI、Mint UI

PC端常用UI组件库

Element UI、IView UI

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/874353
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号