学习笔记-Vue2-2

weixin0605

已于 2022-06-11 18:44:54 修改

阅读量194

点赞数

分类专栏： vue javascript 文章标签：学习 javascript vue.js

于 2022-06-09 20:07:05 首次发布

本文链接：https://blog.csdn.net/weixin0605/article/details/125210127

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

vue2

生命周期

brforeCreate
- 不能访问vue内的data和methods
create
- 可以访问vue内的data和methods了
beforeMount
- 对dom操作不起作用
mounted
- Vue完成模板解析并将dom挂载完后调用
beforeUpadte
- 数据修改时，数据已改变，页面还没修改
updated
- 更新完成，数据页面都修改好
beforeDestroy
destoryed
activated
- 激活
deactivated
- 失活

<div id="app">
    <h2 :stype="{opacity}">xxx</h2>
</div

new Vue({
    el:'#app',
    data:{
        opacity:1,
    },
    methods:{
        change(){
            setInterval(()=>{
                this.opacity-=0.01
                if(this.opactiy<=0)this.opactiy = 1
            },10)
        }
    },
    mounted(){
        // Vue完成模板解析并将dom挂载完后调用
        this.change()
    }
})

组件

非单文件组件
- 一个文件中包含多个组件
单文件组件
- 只有一个组件

<div id='app'>
    <school></school>
    <studnet></studnet>
</div>


// 创建school组件
const school = Vue.extend({ 
    template:`
        <div>
            <h2>{{school}}</h2>
            <h2>{{address}}</h2>
        </div>
    `,
    data(){
        return{
            school:'xxx',
            address:'xxxxx',
        }
    }
})
// 创建student组件
const school = Vue.extend({ 
    template:`
        <div>
            <h2>{{studnet}}</h2>
            <h2>{{age}}</h2>
        </div>
    `,
    data(){
        return{
            studnet:'sss',
            age:18
        }
    }
})

new Vue({
    el:'#app',
    // 注册组件(局部注册)
    components:{
        school:school,
        studnet:studnet
    }
})

// 全局注册
Vue.component('school',school)

VueComponent

// 当<school></school>创建时，vue会帮我们创建VueComponent对象
const school = Vue.extend({ 
    template:`
        <div>
            <h2>{{studnet}}</h2>
            <h2>{{age}}</h2>
        </div>
    `,
    data(){
        return{
            studnet:'sss',
            age:18
        }
    }
})

new Vue({
    el:'#app',
    components:{school}
})

单文件组件

.vue文件
- School.vue
文件结构
- index.html
- main.js
- App.vue
  - 根组件
- xxx.vue
需要放入脚手架运行
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>xxx</title>
        
    </head>
    <body>
        <div id="root"></div>
        <!--<script type="text/javascript" src="./vue.js"></script>-->
        <!--<script type="text/javascript" src="./main.js"></script>-->
    </body>
</html>

main.js

import App from './App.vue'

new Vue({
    el:'#root',
    components:{
        App
    },
    template:`<App></App>`
})

App.vue

<template>
    <div>
        <School/>
    </div>
</template>
<script>
    // 数据 方法
    export default {
        name:'App',
        components:{
            School
        }
    }
    
</script>

School.vue

<template>
    <!--组件结构-->
    <div class="demo">
        <h2>{{school}}</h2>
        <h2>{{address}}</h2>
    </div>
</template>
<script>
    // 数据 方法
    export default {
        name:'School',
        data(){
            
        },
        methods:{
            return {
                school:'xxx',
                address:'xxxxx'
            }
        }
    }
    
</script>
<style>
    /* 样式 */
    .demo{
        background-color:orange;
    }
</style>

vue-cli脚手架

npm install -g @vue/cli
vue create demo
- 创建vue项目
- vue init webpack-simple demo
- vue init webpack demo
  - 利用模板安装
- npm run buil
  - 打包
- npm run serve
  - 运行
vue inspect > output.js
- 显示vue webpack配置,不可改

项目目录

public
- index.html
src
- App.vue
- main.js
  - 项目入口文件
- assets
  - 图片
- components
  - 组件
package.json
package-lock.json
babel.config.js
vue.config.js
- 可选配置文件
main.js

import App from './App.vue'
import Vue from 'vue'
// 关闭生产提示
Vue.config.productionTip = false
// 创建vue
new Vue({
    el:'#app',
    // 将app组件放入容器中
    render: h=> h(App)
})
//.$mount('#app')

index.html

<div id='app'></div>

App.vue

<template>
    <!--<div id='app'>-->
    <!--</div>-->
</template>
<script>
    export default(
        name:'App',
        components:{
            
        }
    )
</script>
<style>
</style>

render

vue
- 核心
- 模板解析器
  - 体积较大，打包运行时会使用精简版vue

new Vue({
    el:'#app',
    render:(createElement)=>{
        // render默认会传入createElement方法
        return createElement('h1','xxx')
    }
    // 简写
    // render:h=>h(App)
    
})

vue.config.js

module.exports = {
    pages:{
        index:{
            // 配置修改默认入口main.js
            entry:'src/xxx.js'
        }
    },
    lintOnSavve:false,//关闭语法检查
}

ref属性

ref
- id替代者

<h1 ref="title" v-text="msg"></h1>

console.log(this.$refs.title)

props属性

props
- 父组件传给子组件
- props:[‘msg’,‘title’]
- 子传父
  - 父给子一个函数，用来调用自身
父组件

<Studnet name="xx" sex="xx" :age='18'>

子组件

export default {
    name:'Student',
    // 简单接收
    //props:['name','sex'], 
    // 类型限制接收
    /*
    props:{                
        name:String,
        age:Number,
        sex:String
    }*/
    props:{
        name:{
            type:String,
            required:true
        },
        age:{
            type:Number,
            default:99
        }
    }
    data(){
        return {
            
        }
    }
}

mixin

mixin
- 混入（混合）
- mixin.js
mixin.js

export const mixin = {
    methods:{
        demo(){
            alert('xxx')
        }
    }
}

.vue文件

import {hunhe} from '../minix'

export default {
    name:'xxx',
    dara(){
        
    },
    mixins:[hunhe]
}

插件

js文件
自定义
- xxx.js

export default {
    install(Vue){
        // 可以定义全局配置 过滤器 属性 方法
    }
}

main.js

// 引入插件
import xxx from './xxx'
// 使用
Vue.use(xxx)

scoped

scoped
- 作用域限制当前组件

<style scoped>
    
</style>

组件通讯

this.$parent
- 子组件调用父组件内的属性和方法
- this.$root
  - 调用根节点
父组件调用子组件属性和方法
- this.$child1

组件自定义事件

可以用于子传父
全局事件总线
- 可以实现任意组件间通讯

<!--给Student组件实例对象绑定atguigu事件-->
<Studnet @atguigu="demo"/>
<Studnet ref="student">
<!--使用原生事件-->
<Studnet @click.native="demo"/>

export default {
    name:'xxx',
    data(){
        return {
            
        }
    },
    methods :{
        demo(){
            console.log("Student 触发 atguigu")
        },
    }，
    mounted(){
        // 手动绑定事件
        // this.$refs.student.$on('atguigu',this.demo)
        // 只能触发一次的事件
        // this.$refs.student.$once('atguigu',this.demo)

    }
}

Studnet.vue

<!--School内点击事件触发组件上自定义事件-->
<div @click="sendName"/>

export default {
    name:'xxx',
    data(){
        return {
            name:'xxx'
        }
    },
    props:['']
    methods :{
        sendName(){
            // 触发Studnet中atguigu事件
            this.$emit('atguigu',this.name)
        },
        unbind(){
        // 解绑事件(一个)
        // this.$off('atguigu')
        // 解绑多个
        // this.$off(['atguigu'])
        // 解绑所有自定义事件
        // this.$off()
        }
    }
}

全局事件组件

new Vue({
    el:'#app',
    render:h=>h(App),
    beforeCreate(){
        // 可以在$bus上挂载自定义组件，进行全局通讯
        // this.$bus.$on()
        // this.$bus.$emit()
        // 在组件beforeDestory中解绑$off
         // this.$bus.$off()
        Vue.prototype.$bus = this
    }
})

$nextTick

在下次dom节点更新后再执行

插槽slot

默认插槽

<template>
    <div>
         <h3>{{title}}</h3>
         <!--定义一个插槽-->
         <slot>默认值，当没有传slot，我会实现</slot>
    </div>
<template>
<script>
    export default {
        name:'Category',
        props:['title']
        data(){
            return {
                
            }
        }
    }
</script>

<template>
    <div>
        <Category title="美食">
            <img src='xxx' alt=''>
        </Category>
        <Category title="游戏">
        
            <ul>
                <li v-for="(item,index) in games" :key="index">{{item}}</li>
            </ul>
        </Category>
        <Category title="电影">
            <video controls src="xxx"></video>
        </Category>
    </div>
<template>
<script>
    import Category from './components/Category'
    export default {
        name:'Category',
        components:{Category}
        data(){
            return {
                games:['xx','xx','ss','ss'],
            }
        }
    }
</script>

具名插槽

多个插槽

<template>
    <div>
         <h3>{{title}}</h3>
         <!--定义一个插槽-->
         <slot name="center">默认值，当没有传slot，我会实现</slot>
         <slot name="footer">默认值，当没有传slot，我会实现</slot>
    </div>
<template>
<script>
    export default {
        name:'Category',
        props:['title']
        data(){
            return {
                
            }
        }
    }
</script>

<template>
    <div>
        <Category title="美食">
            <img slot="center" src='xxx' alt=''>
            <a slot="footer" href="xxx">更多</a>
        </Category>
        <Category title="游戏">
            <ul slot="center">
                <li v-for="(item,index) in games" :key="index">{{item}}</li>
            </ul>
            <div slot="footer">
                <a href="xxx">单机</a>
                <a href="xxx">网络</a>
            </div>
        </Category>
        <Category title="电影">
            <video slot="center" controls src="xxx"></video>
             <div slot="footer">
                <a href="xxx">经典</a>
                <a href="xxx">热门</a>
                <a href="xxx">推荐</a>
            </div>
        </Category>
    </div>
<template>
<script>
    import Category from './components/Category'
    export default {
        name:'Category',
        components:{Category}
        data(){
            return {
                games:['xx','xx','ss','ss'],
            }
        }
    }
</script>

作用域插槽

子传父

<template>
    <div>
         <h3>{{title}}</h3>
         <!--定义一个插槽-->
         <slot :youxi="games">默认值，当没有传slot，我会实现</slot>
    </div>
<template>
<script>
    export default {
        name:'Category',
        props:['title'],
        data(){
            return {
                games:['xx','xx','ss','ss'],
            }
        }
    }
</script>

<template>
    <div>
        <Category title="游戏">
            <template scope="{games}">
                <ul>
                    <li v-for="(item,index) in games" :key="index">{{item}}</li>
                </ul>
            </template>
        </Category>
        <Category title="游戏">
            <template scope="{games}">
                <ol>
                    <li v-for="(item,index) in games" :key="index">{{item}}</li>
                </ul>
            </template>
        </Category>
        <Category title="游戏">
            <template scope="{games}">
                <h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
            </template>
        </Category>
    </div>
<template>
<script>
    import Category from './components/Category'
    export default {
        name:'Category',
        components:{Category}
    }
</script>