测试开发之Vue学习笔记-Vue组件

测试-八戒

于 2023-02-06 14:28:22 发布

阅读量178

点赞数

分类专栏：测试开发文章标签： vue.js 学习 javascript 测试开发 Powered by 金山文档

测试-八戒

本文链接：https://blog.csdn.net/m0_59868866/article/details/128901179

版权

测试开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件

6. Vue组件基础

（1）新建组件（包含HTML、JavaScript、CSS）

在src/components中新建文件hello.vue

src/compents/hello.vue

Copy<template><divclass="">
        我是Hello
    </div></template><script>exportdefault {
    name: "hello",
    data(){
        return {
            
        }
    }
}
</script><stylescoped></style>

注：scoped表示样式只在当前组件生效（不能在style中添加）

（2）通过App.vue导入并使用

src/App.vue

Copy<template><divid="app">
    hi
    <Hello /><!-- 加载组件 --></div></template><script>importHellofrom"./components/hello"exportdefault {
  name: 'App',
  components: {
    Hello:Hello
  }
}
</script><stylelang="css"></style>

7. Vue组件交互父传子

父组件通过将子组件作为Tag来引用子组件，通过属性向子组件传递数据，如：

Copy<Childid=15title="子组件1"v-bind:hello="hello"v-bind:obj="obj"/>

子组件通过props: {id:String, title:{type:String, required:true}}来接收父组件传递的值

示例：

（1）在src/components中创建child.vue

Copy<template><divclass="">
        我是子组件
        <p>父组件传来的数据: {{ id }} {{ title }} {{ hello }} {{ world }} {{ obj }}</p></div></template><script>exportdefault {
    name: 'child',
    data() {
        return {
            
        }
    },
    props: {
        title:String,
        hello:String,  
        id: {
            type: [String,Number],  //支持String或Numberrequired: true//必选
        },
        world: {
            type:String,
            default: "world"//默认值
        },
        obj: {
            type:Object,
            default:function(){  //默认值需要使用函数return {
                    name: "kevin"
                }
            }
        }
    }
}
</script><stylelang="css"></style>

（2）在src/components中创建parent.vue

Copy<template><divclass="">
        我是父组件
        <Childid=15title="子组件1"v-bind:hello="hello"v-bind:obj="obj"/><!--引用子组件 通过属性向子组件传递数据--></div></template><script>importChildfrom"./child"exportdefault {
    name: 'parent',
    data() {
        return {
            hello: "hello",
            obj: {
                name: "kevin",
                age: 20
            }
        }
    },
    components: {
        Child
    }
}
</script><stylelang="css"></style>

（3）src/App.vue中引入父组件

Copy<template><divid="app"><imgsrc="./assets/logo.png"><Parent /></div></template><script>importParentfrom"./components/parent"exportdefault {
  name: 'App',
  components: {
    Parent
  }
}
</script><stylelang="css"></style>

8. Vue组件交互子传父

子组件在函数中，使用emit向父组件发送事件‘this.��向父组件发送事件‘�ℎ��.emit("getInfo", this.initMsg)`

父组件使用v-on:getInfo="handleInfo"，定义handleInfo函数处理事件，函数参数即子组价传递的数据。

示例：

src/components/clild.vue

Copy<template><divclass="">
        我是子组件
        <buttonv-on:click="sendMsg"type="button">发送</button></div></template><script>exportdefault {
    name: 'child',
    data() {
        return {
            initMsg: "子组件初始化数据"
        }
    },
    methods:{
        sendMsg(event) {
            this.$emit("getInfo", this.initMsg)   //将initMsg发送给父组件的getInfo事件
        }
    },
    
}
</script><stylelang="css"></style>

src/components/parent.vue

Copy<template><divclass="">
        我是父组件
        <Childv-on:getInfo="handleInfo"/><!--调用handleInfo处理子组件传递过来的getInfo事件--></div></template><script>importChildfrom"./child"exportdefault {
    name: 'parent',
    data() {
        return {}
    },
    components: {
        Child
    },
    methods: {
        handleInfo(data){
            console.log(data)  // 打印子组件传递过来的数据
        }
    }
}
</script><stylelang="css"></style>

src/App.vue

Copy<template><divid="app"><imgsrc="./assets/logo.png"><Parent /></div></template><script>importParentfrom"./components/parent"exportdefault {
  name: 'App',
  components: {
    Parent
  }
}
</script><stylelang="css"></style>

9. Vue插槽功能

插槽用于父组件的视图在在子组件中显示。

（父组件的元素塞到子组件中显示）

单个插槽

子组件中使用默认值

父组件中使用插入的值

具名插槽

子组件中使用<slot name="hello">默认值</slot>

父组件中使用<Child><div slot="hello">插入Hello</div></Child>

获取子组件属性

子组件数据-->父组件-->父组件渲染视图-->子组件

子组件绑定属性slot name="h3" v-bind:text="text"></slot>

父组件中<p slot="h3" slot-scope="props">{{ h3 }} - {{ props.text }}</p>
示例：
src/components/chachao.vue

Copy<template><divclass=""><p>插槽功能</p><slot></slot><hr/><slotname="hello"></slot><slotname="h3"v-bind:text="text"></slot></div></template><script>exportdefault{
    name: 'chachao',
    data(){
        return {
            text: '插槽组件数据'
        }
    }
}
</script><stylelang='css'></style>

src/App.vue

Copy<template><divid="app"><imgsrc="./assets/logo.png"><ChaChao><p>插入数据</p><divslot="hello">插入Hello</div><pslot="h3"slot-scope="props">{{ h3 }} - {{ props.text }}</p></ChaChao></div></template><script>importChaChaofrom"./components/chachao"exportdefault {
  name: 'App',
  components: {
    ChaChao
  },
  data(){
    return {
      h3: '哈哈3'
    }
  }
}
</script><stylelang="css"></style>

10. Vue-组件缓存

template视图中可以使用component v-bind:is="Ct1"></component>来引用组件

等同于

如果要对组件内容进行缓存可以使用keep-alive

Copy<keep-alive><!--添加缓存效果--><componentv-bind:is="currentView"></component></keep-alive>

示例：

（1）新建src/components/ct1.vue

Copy<template><divclass="ct1">
        我是ct1 - {{ info }}
        <buttonv-on:click="changeCt1"type="button">更改ct1内容</button></div></template><script>exportdefault {
    name: 'ct1',
    data() {
        return {
          info: ''
        }
    },
    methods:{
        changeCt1(event){
            this.info = '更改后'
        }
    }
}
</script><stylelang="css"></style>

（2）新建src/components/ct2.vue

Copy<template><divclass="ct1">
        我是ct2
    </div></template><script>exportdefault {
    name: 'ct2',
    data() {
        return {
            
        }
    }
}
</script><stylelang="css"></style>

（3）src/App.vue中引入两个组件

Copy<template><divid="app"><imgsrc="./assets/logo.png"><buttonv-on:click="changeEvent"type="button">切换</button><div><componentv-bind:is="currentView"></component></div><!--未加缓存效果--><keep-alive><!--添加缓存效果--><componentv-bind:is="currentView"></component></keep-alive></div></template><script>importCt1from"./components/ct1"importCt2from"./components/ct2"exportdefault {
  name: 'App',
  components: {
    Ct1, Ct2,
  },
  data(){
    return {
      currentView:Ct1
    }
  },
  methods:{
    changeEvent(event){
      if(this.currentView === Ct1){
        this.currentView = Ct2;
      }
      else {
        this.currentView = Ct1;
      }
    }
  }
}
</script><stylelang="css"></style>

11. Vue动画效果

组件的生命周期

创建

beforeCreate()

created()

渲染

beforeMount()

mounted()

更新

beforeUpdate()

updated()

销毁

beforeDestory()

destoried()

示例：

（1）新建src/components/ct3.vue

Copy<template><divclass="ct3">
        我是ct3
        <buttonv-on:click="changeData">改变</button>
        {{ mydata }}
    </div></template><script>exportdefault {
    name: 'ct3',
    data() {
        return {
            mydata: '改变之前'
        }
    },
    methods:{
        changeData(event){
            this.mydata = '改变之后';
        }
    },
    beforeCreate(){ 
        console.log('组件被创建之前'); 
    },
    created(){
        console.log('组件被创建之后');
    },
    beforeMount(){
        console.log('组件被渲染之后');
    },
    mounted(){
        console.log('组件被渲染字后');
    },
    beforeUpdate(){
        console.log('数据改变渲染之前');
    },
    updated(){
        console.log('数据改变渲染之后');
    },
    beforeDestory(){
        console.log('组件销毁之前');
    },
    destored(){
        console.log('组件被销毁之后');
    }
}
</script><stylelang="css"></style>

（2）src/App.vue中引入

Copy<template><divid="app"><imgsrc="./assets/logo.png"><Ct3/></div></template><script>importCt3from"./components/ct3"exportdefault {
  name: 'App',
  components: {
    Ct3
  },
  data(){
    return {
    }
  },
}
</script><stylelang="css"></style>

Vue过渡动画

在template段使用<transtion name="demo"></transtion>

在样式中定义demo的动作过渡

Copy<style>
    demo.enter { ... }
    demo.enter-active { ... }
</style>

动作分为以下两组

进入

demo.enter: 进入开始点

demo.enter-action: 进入中

demo.enter-to：进入结束

离开

demo.leave：离开开始点

demo.leave-action：离开中

demo.leave-to：离开结束

示例：

（1）新建src/components/ct4.vue

Copy<template><divclass="ct4">
        我是ct4
        <hr/><buttonv-on:click="show=!show">切换</button><!--将show取反--><transitionname='demo'><!--指定使用的样式类基称--><h1v-if="show">hello</h1><!--根据show变量来控制是否显示 transtion中只能存在一个根元素--></transition></div></template><script>exportdefault {
    name: 'ct4',
    data() {
        return {
            show: false
        }
    }
}
</script><style>.demo-enter-active, .demo-leave-active { 
  transition: opacity .5s;
}
.demo-enter, .demo-leave-to {
  opacity: 0;
}
</style>

（2）src/App.vue中引入

Copy<template><divid="app"><imgsrc="./assets/logo.png"><Ct4/></div></template><script>importCt4from"./components/ct4"exportdefault {
  name: 'App',
  components: {
    Ct4
  },
  data(){
    return {
    }
  },
}
</script><stylelang="css"></style>

使用三方动画库

Animate动画官网： https://daneden.github.io/animate.css/

index.html head中引入响应的css

Copy<linkhref="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"rel="stylesheet"type="text/css">

template中直接指定动作引用的动画

Copy<transitionname="custom-classes-transition"enter-active-class="animated tada"leave-active-class="animated bounceOutRight"><h1v-if="show">hello</h1><!--根据show变量来控制是否显示 transtion中只能存在一个根元素--></transition>

示例：

（1）index.html

Copy<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkhref="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"rel="stylesheet"type="text/css"><title>vb</title></head><body><divid="app"></div><!-- built files will be auto injected --></body></html>

（2）src/components/ct4.vue

Copy<template><divclass="ct4">
        我是ct4
        <hr/><!--指定自定义过渡和动作引用的类--><buttonv-on:click="show=!show">切换</button><!--将show取反--><transitionname="custom-classes-transition"enter-active-class="animated tada"leave-active-class="animated bounceOutRight"><h1v-if="show">hello</h1><!--根据show变量来控制是否显示 transtion中只能存在一个根元素--></transition><tr
    </div></template><script>exportdefault {
    name: 'ct4',
    data() {
        return {
            show: false
        }
    }
}
</script><style></style>

（3）src/App.vue中引入

Copy<template><divid="app"><imgsrc="./assets/logo.png"><Ct4/></div></template><script>importCt4from"./components/ct4"exportdefault {
  name: 'App',
  components: {
    Ct4
  },
  data(){
    return {
    }
  },
}
</script><stylelang="css"></style>

12. Vue-自定义指令与过滤器

自定义指令

全局指令卸载main.js中

CopyVue.directive('focus', {
    inserted: function(el){
        el.focus();
    }
})

局部指令写在组件的directives属性中

Copydirectives: {     // 局部自定义变量red: {
      inserted: function(el){
        el.style.color = "red";
      }
    }
  }

其中inserted是钩子函数

钩子函数有以下几种

绑定/解绑：bind/unbind 只调用一次

插入：inserted 节点插入时调用

更新：update/componentUpdated 虚拟节点/组件全部更新后调用

示例：

src/main.js

Copy// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefrom'vue'importAppfrom'./App'Vue.config.productionTip = false// 生产环境配置提示Vue.directive('focus', {
    inserted: function(el){
        el.focus();
    }
})


/* eslint-disable no-new */newVue({
  el: '#app',  // 绑定根视图components: { App },  // 加载组件template: '<App/>'// 使用组件
})

src/App.vue

Copy<template><divid="app"><imgsrc="./assets/logo.png"><inputv-focus/><!--使用全局自定义变量--><pv-red>红色</p><!--使用局部自定义变量--></div></template><script>exportdefault {
  name: 'App',
  data(){
    return {
    }
  },
  directives: {     // 局部自定义变量red: {
      inserted: function(el){
        el.style.color = "red";
      }
    }
  }
}
</script><stylelang="css"></style>

自定义过滤器

过滤器用于在 {{ 变量 | 过滤器 }} 中对变量数据进行处理后输出。

全局过滤器写在main.js中

CopyVue.filter('author', function(value) {
    return value + ' - kevin'
})

局部过滤器写在组件的filters属性中

Copyfilters: {
    upper: function(value){
      return value.toString().toUpperCase();
    }
  }

示例：

src/main.js

Copy// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefrom'vue'importAppfrom'./App'Vue.config.productionTip = false// 生产环境配置提示Vue.filter('author', function(value) {
    return value + ' - kevin'
})

/* eslint-disable no-new */newVue({
  el: '#app',  // 绑定根视图components: { App },  // 加载组件template: '<App/>'// 使用组件
})

src/App.vue

Copy<template><divid="app"><imgsrc="./assets/logo.png">
    {{ book | author }}
    <br/>
    {{ book | upper }}
  </div></template><script>exportdefault {
  name: 'App',
  data(){
    return {
      book: 'Python'
    }
  },
  filters: {
    upper: function(value){
      return value.toString().toUpperCase();
    }
  }
}
</script><stylelang="css"></style>

如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步

在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。

我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，

测试开发视频教程、学习笔记领取传送门！！！