Vue----插槽、Vuex、Vue3.0、Vue3新特性

一、插槽

举例：

●程序中:多个提示框，布局风格一致，只不过内部的具体内容不同。

●程序中:也可以造一个带样式和插槽的外壳

解析：

然后定义每个对话框时，都把这个外壳套上，再在外壳内填入每个对话框不同的内容

 如何使用插槽

●1.先定义一个组件包含统一的外壳结构
   --新建一个外壳组件，将任意一个现有对话框代码整体复 制到组件中
   --删除组件中将来可能发生变化的大片HTML片段位置，并用
      <slot> </slot>标签占位
  --组件中个别可能变化的文本，改为绑定语法
  --并在props成员中添加外来属性

如何使用插槽(续1 )

●1.先定义-一个组件包含统一 -的外壳结构

 如何使用插槽(续2)

●2.再在每次使用组件时，动态改变组件中插槽区域的HTML片段内容
2.1在原对话框中引|入带插槽的外壳组件

import Waike from ". /Waike. vue"
export default {
... ... ,
components:{ Waike },
... ... 
}

如何使用插槽(续3)

2.再在每次使用组件时，动态改变组件中插槽区域的HTML片段内容
- 2.3再在外壳组件内添加<template>,其中添加对话框独有内容

如何使用插槽(续4)

2.再在每次使用组件时，动态改变组件中插槽区域的HTML片段内容
-结果: 

具名插槽

如果一个带插槽的外壳组件，有多个部位将来可能会改变
●可以为每个部位指定插槽名

具名插槽(续1)

●将来使用插槽时，可以将不同的HTML片段，插入不同的插槽中
●如果-个带插槽的外壳组件包含多个具名插槽 ,则使用时,每个插槽对应的HTML片段，都要放在一个<template v-slot:插槽名>中
●v-slot:插槽名，可简写为#插槽名

二、Vuex

如何使用Vuex

1.创建脚手架时，选择vuex选项，一起安装
结果:在脚手架项目src文件夹下:

结果:在main.js中:

如何使用Vuex (续2)

●2.在store/index.js中state内添加要多个组件共享的变量
一state相当于商店货架上的商品，谁来商店都可访问

state: {
        uid:-1,
        uname: " dingding" 
},

如何使用Vuex (续3)

●3.在页面上，显示Vuex中的内容:

一3.1在页面组件export default {}之前弓|入Vuex提供的专|门]获取Vuex中State中所有变量的函数mapState
 

- import { mapState } from "vuex"

●3.在页面上，显示Vuex中的内容:

一3.2在页面组件export default {}中computed中调用mapState函数，指定要解构出来的State中的变量名，当做当前组件的计算属性使用

3.在页面上，显示Vuex中的内容:

一3.3在页面中就可以绑定mapState帮我们生成的计算属性了

 

如何使用Vuex (续6)

●4.在Vuex中Mutations中定义专门门]修改State中变量的修改函数

 ●
5.在页面.上登录组件中使用setUname修改用户名，并切换页面中用户登录状态，同时显示新用户名
.-5.1在登录组件export default {}之前引入Vuex提供的专i门提取Vuex中所有State变量和Mutations方法的函数: mapState和mapMutations

- import { mapMutations } from "vuex"

5.在页面上登录组件中使用setUname修改用户名，并切换页面中用户登录状态，同时显示新用户名
- 5.2在登录组件methods中，调用mapMutation()函数，并解构出修改uname变量要使用的方法。

如何使用Vuex (续10)

5.在页面上登录组件中使用setUname修改用户名，并切换页面中用户登录状态，同时显示新用户名
- 5.5在登录组件methods中，登录方法login)中。

如何使用Vuex (续11)

●6. Vuex中定义发送ajax请求的方法，专门发送的登录请求
6.1在Vuex中，顶部提前引|入axios:

import axios from' axios

- 6.2在Vuex中，Actions内添加vlogin函数
- 6.3 vlogin函数内发送axios请求，并接受返回值。
- 6.4如果返回登录成功的结果，则:调用当前vuex大环境中的
setUid()和setUname()两个函数。将服务器返回的uid和uname两个值设置到State中的uid和uname两个属性上。
- 6.5如果返回登录失败的结果，则:直接调用alert,提示登录牛
败。

如何使用Vuex (续13)

7. Vuex中定义发送ajax请求的方法，专门发送的登录请求
一7.1在登录组件中，引入Vuex提供的专门]提取Actions中方法的mapActions函数

- import { mapActions } from "vuex"

一7.2在登录组件中，methods中 ，调用mapActions函数，解构出发送ajax请求的函数vlogin
- 7.3在登录组件中login方法中调用vlogin方法，如果登录成功，就把success改为true,让登录框切换显示登录成功

如何使用Vuex (续14)

三、Vue3.0

脚手架选项：

 

 

 绑定原理

访问器属性的问题

只能在首次创建new Vue()对象时初始就有的属性，添加监视(访问器属性)。今后动态添加进来的成员，就无法自动添加访问器属性，也就无法自动得到监视。
无法给索引数组的数字下标添加访问器属性
结果，在vue程序中后添加成员，或通过下标修改索引数组中的元素值，页面都不自动更新
 

访问器属性的问题(续1)

比如:

<div id="app" >
     <ul>
           <li v-for=" (t,i) of arr" :key="i">{{i+1}}-{{t}}K</li></ul>
    <ul>
             <li v-for="(value,key) of lilei" :key="key">{{key}}-{{value}}</li></ul>
</div>

<script>
       var vm=new Vue({
             el: "#app" ,data: {
             ar:["亮亮","然然","东东"]，

            lilei: {sname : "Li Lei" ,sage: 11}

                     }
                });
//在f12->console中输入:
//vm.arr[1]="涛涛";
//vm.lilei.className="初一2班";

访问器属性的问题(续2)

Vue3的绑定原理

. ES6的Proxy代理对象
- proxy在目标对象的外层搭建了一层拦截，外界对目标对象的所有操作，都必须通过这层拦截。

Vue3的绑定原理(续1)

 ES6的Proxy代理对象
-优点:对象内部所有现有属性自动被监视，而且更可贵的是，后添加的属性，一进入对象就被监视!
-缺点:兼容性问题

Vue3的绑定原理(续2)

·如何使用:

Vue3的绑定原理(续3)

●如何使用:

Vue3的绑定原理(续4)

●如何使用:

main.ts中的变化(了解)

. import { createApp } from 'vue'

. import App from './App.vue'

. import router from './router'

. import store from './store'

createApp(App).use(store).use(router).mount('#app')

·//代替了new Vue()

页面组件内的变化
●好消息: <template>和<style>没有任何变化

<div>                        < !--template里和vue2写法完全一样-->

<button @click="minus" >-</button>
<span>{{n}}</span>
<button @click="add">+</button>

</ div>

页面组件内的变化（续1)

●<script>中,Vue3也支持vue2的写法，但会逐渐不支持。

●<script>中新写法:

-1.引入vue模块中提供的函数，用于创建组件对象和加工组件对象中的内容.
- import { defineComponent, ref } from 'vue';
- defineComponent是vue3提供的专门创建组件对象的函数-ref是vue3提供的一个函数，专门将任何东西包装为一个能被监视的proxy对象。
 

页面组件内的变化(续2)

●<script>中新写法:
-2.用defineComponent()函数创建个组件对象，依然可以用components成员引入其他子组件。(与vue2相同)

export default defineComponent({
name: 'Home',

components: {
            子组件对象,..

},
))

页面组件内的变化（续3)

●<scriot>中新写法:
-3.defineComponent{()}函数内，必须先调用setup()函数作为整个组件代码的运行起点。

export default defineComponent({
 ...
               //必须:

              //代替了之前的create阶段

             //作为整个组件的运行起点setup(){

            //组件所需的所有变量和函数都放在setup()函数内

           }
})

 

页面组件内的变化（续4)

●<script>中新写法:
-4.“界面”中所需的所有变量和函数，只要直接声明在setup()函数内即可

 
页面组件内的变化(续5)

●<scriot>中新写法:
-5.所有要在”界面”上使用的变量或事件处理函数都要放在return中返回才行!
●因为有的成员需要抛出到界面，而有的成员不需要抛出到界面仅程序内部使用!
●return就是分水岭!

setup(){

... ...
      return {
       n, add, minus
        }
}
 

四、VUE3新变化
 

ref与toRefs

●问题:如果一个组件对象中有多个变量值都要返回给界面使用，难道每个变量值都要分别调用ref() ,然后在return中还要罗列每个变量值?
●解决:将多个变量放在一个对象中，集中保存，并用ref和toRefs配合，为每个变量添加监视
 

ref与toRefs(续1)

●如何:
-1.将这个功能所有变量都集中保存在一个自定义对象data中，并在创建对象时，用ref()包裹及其内容。
-原理: ref()会深度遍历对象中每个成员，甚至遍历成员的子成员。并且自动为各级成员及其子成员添加监视
-比如:

const data=ref({

in:0,

arr:["亮亮", "然然","东东"]

})

ref与toRefs(续2)

●如何:
-2.再将data对象中的成员分别解构出来，单独使用。
-问题: ref包裹的对象成员虽然在对象内部是被监视的，但是，一旦解构出来，就成了普通的变量，不再受监视。修改变量，无法自动更新界面了。
-解决:解构时，=右边的data对象必须用toRefs()包裹。
-原理:toRefs()会自动为从data中解构出的每个成员再次调用ref()，使每个成员即使解构出来，也是受监视的。
-但是，使用toRefs()函数前，也必须先在开头import中从vue中解构出来才能用

let {n,arr}=toRefs (data.value);

watch

●Vue3中的watch是通过函数实现的。且一个组件中可以有多个watch()。
●如何:
    -1.必须先在开头import中解构出watch函数

    import { defineComponent，... ...，watch } from 'vue ' ;

-2.调用watch函数，监视变量:

watch(kw , ( newVal， oldVal)=>{
console.log(`kw变量变了，新值为${newVal}，旧值为$1O1ava1凝search();
})

directivce

●vue3中2种自定义指令:
-1.全局自定义指令: main.ts中:
-强调: vue3自定义指令中用mounted()函数代替了vue2中的inserted()函数。但是其他用法保持一致。

var app=createApp(App);
       app.directive( "my-focus",{

          mounted ( el){
             el.focus();}
        }
    })
      }
app.use ( store).use ( router ) .mount( ' #app ' );

directive(续)

●Vue3中2种自定义指令:
-2.局部自定义指令:.vue文件中:
-说明:除了mounted()代替了inserted()之外，其余与vue2相同

export default defineComp.onent({
     directives:{
        "my-focus" :{

       mounted (el){
        el.focus();

          }
       }

      },
    setup(){

... ...

}

计算属性

●Vue3中计算属性也是通过专门的函数实现的
●如何: 
一1.还是要在开头的import中解构出computed函数

import { defineComponent, ... . computed } from ' yue' ;

-2.一定在包含所有方法的自定义methods对象中添加计算属性方法，才能在return时被解构出来，才能在界面。上使用

过滤器

●Vue3中已不再支持过滤器!
●可用计算属性代替

注册全局组件

●main.ts中:
一app.component( my-component-name', {
一/...*/
-})