Vue学习笔记02-Vue组件

目录

• ​​Vue学习笔记01-Vue基础​​
• ​​Vue学习笔记02-Vue组件​​
• ​​Vue学习笔记03-Axios​​
• ​​Vue学习笔记04-Vue路由​​
• ​​Vue学习笔记05-H5实例百度音乐​​
• ​​Vue学习笔记06-Vuex​​
• ​​Vue学习笔记07-Web商城实例​​

Vue组件

6. Vue组件基础

（1）新建组件（包含HTML、JavaScript、CSS）
在src/components中新建文件hello.vue

src/compents/hello.vue

<template>
    <div class="">
        我是Hello
    </div>
</template>
<script>
export default {
    name: "hello",
    data(){
        return {
            
        }
    }
}
</script>
<style scoped> 
    
</style>

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

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

<template>
  <div id="app">
    hi
    <Hello />  <!-- 加载组件 -->
  </div>
</template>

<script>

import Hello from "./components/hello"

export default {
  name: 'App',
  components: {
    Hello:Hello
  }
}
</script>

<style lang="css">

</style>

7. Vue组件交互父传子

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

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

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

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

<template>
    <div class="">
        我是子组件
        <p>父组件传来的数据: {{ id }} {{ title }} {{ hello }} {{ world }} {{ obj }}</p>
    </div>
</template>

<script>

export default {
    name: 'child',
    data() {
        return {
            
        }
    },
    props: {
        title:String,
        hello:String,  
        id: {
            type: [String,Number],  //支持String或Number
            required: true  //必选
        },
        world: {
            type:String,
            default: "world"  //默认值
        },
        obj: {
            type:Object,
            default:function(){  //默认值需要使用函数
                return {
                    name: "kevin"
                }
            }
        }
    }
}
</script>

<style lang="css">
    
</style>

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

<template>
    <div class="">
        我是父组件
        <Child id=15 title="子组件1" v-bind:hello="hello" v-bind:obj="obj"/>  <!--引用子组件 通过属性向子组件传递数据-->
    </div>
</template>

<script>

import Child from "./child"

export default {
    name: 'parent',
    data() {
        return {
            hello: "hello",
            obj: {
                name: "kevin",
                age: 20
            }
        }
    },
    components: {
        Child
    }
}
</script>

<style lang="css">
    
</style>

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

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Parent />
  </div>
</template>

<script>

import Parent from "./components/parent"

export default {
  name: 'App',
  components: {
    Parent
  }
}
</script>

<style lang="css">

</style>

8. Vue组件交互子传父

• 子组件在函数中，使用\(emit向父组件发送事件`this.\)emit("getInfo", this.initMsg)`
• 父组件使用​​v-on:getInfo="handleInfo"​​，定义handleInfo函数处理事件，函数参数即子组价传递的数据。

示例：

src/components/clild.vue

<template>
    <div class="">
        我是子组件
        <button v-on:click="sendMsg" type="button">发送</button>
    </div>
</template>

<script>
export default {
    name: 'child',
    data() {
        return {
            initMsg: "子组件初始化数据"
        }
    },
    methods:{
        sendMsg(event) {
            this.$emit("getInfo", this.initMsg)   //将initMsg发送给父组件的getInfo事件
        }
    },
    
}
</script>

<style lang="css">
</style>

src/components/parent.vue

<template>
    <div class="">
        我是父组件
        <Child v-on:getInfo="handleInfo"/>  <!--调用handleInfo处理子组件传递过来的getInfo事件-->
    </div>
</template>
<script>
import Child from "./child"
export default {
    name: 'parent',
    data() {
        return {}
    },
    components: {
        Child
    },
    methods: {
        handleInfo(data){
            console.log(data)  // 打印子组件传递过来的数据
        }
    }
}
</script>

<style lang="css">
</style>

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Parent />
  </div>
</template>

<script>

import Parent from "./components/parent"

export default {
  name: 'App',
  components: {
    Parent
  }
}
</script>

<style lang="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

<template>
    <div class="">
        <p>插槽功能</p>
        <slot></slot>
        <hr/>
        <slot name="hello"></slot>
        <slot name="h3" v-bind:text="text"></slot>
    </div>
</template>

<script>
export default{
    name: 'chachao',
    data(){
        return {
            text: '插槽组件数据'
        }
    }
}
</script>
<style lang='css'></style>

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <ChaChao>
      <p>插入数据</p>

      <div slot="hello">插入Hello</div>
      <p slot="h3" slot-scope="props">{{ h3 }} - {{ props.text }}</p>
    </ChaChao>
  </div>
</template>

<script>

import ChaChao from "./components/chachao"

export default {
  name: 'App',
  components: {
    ChaChao
  },
  data(){
    return {
      h3: '哈哈3'
    }
  }
}
</script>
<style lang="css">
</style>

10. Vue-组件缓存

template视图中可以使用​​component v-bind:is="Ct1"></component>​​​来引用组件
等同于
如果要对组件内容进行缓存可以使用keep-alive

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

示例：
（1）新建src/components/ct1.vue

<template>
    <div class="ct1">
        我是ct1 - {{ info }}
        <button v-on:click="changeCt1" type="button">更改ct1内容</button>

    </div>
</template>

<script>

export default {
    name: 'ct1',
    data() {
        return {
          info: ''
        }
    },
    methods:{
        changeCt1(event){
            this.info = '更改后'
        }
    }
}
</script>

<style lang="css">
    
</style>

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

<template>
    <div class="ct1">
        我是ct2
    </div>
</template>

<script>

export default {
    name: 'ct2',
    data() {
        return {
            
        }
    }
}
</script>

<style lang="css">
    
</style>

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

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <button v-on:click="changeEvent" type="button">切换</button>
    <div><component v-bind:is="currentView"></component></div>  <!--未加缓存效果-->

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

<script>

import Ct1 from "./components/ct1"
import Ct2 from "./components/ct2"

export default {
  name: 'App',
  components: {
    Ct1, Ct2,
  },
  data(){
    return {
      currentView:Ct1
    }
  },
  methods:{
    changeEvent(event){
      if(this.currentView === Ct1){
        this.currentView = Ct2;
      }
      else {
        this.currentView = Ct1;
      }
    }
  }
}
</script>
<style lang="css">
</style>

11. Vue动画效果

组件的生命周期

• 创建

• beforeCreate()
• created()

• 渲染

• beforeMount()
• mounted()

• 更新

• beforeUpdate()
• updated()

• 销毁

• beforeDestory()
• destoried()

示例：
（1）新建src/components/ct3.vue

<template>
    <div class="ct3">
        我是ct3
        <button v-on:click="changeData">改变</button>
        {{ mydata }}
    </div>
</template>

<script>

export default {
    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>

<style lang="css">
</style>

（2）src/App.vue中引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Ct3/>
  </div>
</template>

<script>

import Ct3 from "./components/ct3"

export default {
  name: 'App',
  components: {
    Ct3
  },
  data(){
    return {
    }
  },
}
</script>
<style lang="css">
</style>

Vue过渡动画

• 在template段使用​​<transtion name="demo"></transtion>​​
• 在样式中定义demo的动作过渡

<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

<template>
    <div class="ct4">
        我是ct4
        <hr/>
        <button v-on:click="show=!show">切换</button>  <!--将show取反-->
        <transition name='demo'>   <!--指定使用的样式类基称-->
            <h1 v-if="show">hello</h1>  <!--根据show变量来控制是否显示 transtion中只能存在一个根元素-->
        </transition>
    </div>
</template>

<script>

export default {
    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中引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Ct4/>
  </div>
</template>

<script>

import Ct4 from "./components/ct4"

export default {
  name: 'App',
  components: {
    Ct4
  },
  data(){
    return {
    }
  },
}
</script>
<style lang="css">
</style>

使用三方动画库

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

• index.html head中引入响应的css

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

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

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

示例：

（1）index.html

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

（2）src/components/ct4.vue

<template>
    <div class="ct4">
        我是ct4
        <hr/>
        <!--指定自定义过渡和动作引用的类-->
        <button v-on:click="show=!show">切换</button>  <!--将show取反-->
        <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> 
            <h1 v-if="show">hello</h1>  <!--根据show变量来控制是否显示 transtion中只能存在一个根元素-->
        </transition>
        <tr
    </div>
</template>

<script>
export default {
    name: 'ct4',
    data() {
        return {
            show: false
        }
    }
}
</script>
<style>
</style>

（3）src/App.vue中引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Ct4/>
  </div>
</template>

<script>

import Ct4 from "./components/ct4"

export default {
  name: 'App',
  components: {
    Ct4
  },
  data(){
    return {
    }
  },
}
</script>

<style lang="css">

</style>

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

自定义指令

• 全局指令卸载main.js中

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

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

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

其中inserted是钩子函数
钩子函数有以下几种

• 绑定/解绑：bind/unbind 只调用一次
• 插入：inserted 节点插入时调用
• 更新：update/componentUpdated 虚拟节点/组件全部更新后调用

示例：
src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示
Vue.directive('focus', {
    inserted: function(el){
        el.focus();
    }
})


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

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input v-focus/>  <!--使用全局自定义变量-->
    <p v-red>红色</p>  <!--使用局部自定义变量-->
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
    }
  },
  directives: {     // 局部自定义变量
    red: {
      inserted: function(el){
        el.style.color = "red";
      }
    }
  }
}
</script>
<style lang="css">
</style>

自定义过滤器

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

• 全局过滤器写在main.js中

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

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

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

示例：

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

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

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

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    {{ book | author }}
    <br/>
    {{ book | upper }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      book: 'Python'
    }
  },
  filters: {
    upper: function(value){
      return value.toString().toUpperCase();
    }
  }
}
</script>

<style lang="css">

</style>