VUE 基础(六)

最新推荐文章于 2024-09-14 09:50:15 发布

相逢亦逢春

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量489

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_80034662/article/details/140919697

版权

自定义指令的编写

局部指令 : new Vue({ new Vue({

directives:{指令名:配置对象} directives{指令函数}

)} }）

全局指令: Vue.directive(指令名,配置对象) Vue.directive(指令函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.4/dayjs.min.js"></script>
</head>
<style>
</style>
<body>
   <!-- v-big 让原数值扩大十倍展现 -->
   <!-- v-fbind 使input元素自动获取焦点 -->
    <div id="app">
    <h2>原数值是<span v-text="n"></span></h2>
    <h2>十倍数值是<span v-big="n"></span></h2>
    <button @click="n++">点击n变大</button>
    <input type="text" v-fbind:value="n">
    <script>
        var app = new Vue({
            el: "#app",
            data: {
              n:10
            },
            methods: {
               
            },
            // 指令函数自定义写法 一共以下两种
            directives:{
                big(element,binding){
                   element.innerText=binding.value*10
                },
                fbind:{
                    // 指令与元素成功绑定时
                    bind(element,binding){
                        element.value=binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    // 指令所在模板重新被解析
                    update(element,binding){
                        element.value=binding.value
                    }
                }

            }
        });
    </script>
</body>
</html>

生命周期:又名生命周期回调函数可帮助我们调用一些特殊名称的函数生命周期函数的this指向的是组件实例对象

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 :style="{opacity}">欢迎</h2>

    </div>
    <script>
        
        var app=new Vue({
            el: "#app",
            data:{
                opacity:1
            },
            method:{
               
            },
            //Vue完成模板的解析并把初始的真实DOM元素放入页面后调用mounted
            mounted() {
              
                    setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0) this.opacity=1
                },16)
            }
            
        })
        // 外部写定时器 不推荐
        // setInterval(()=>{
        //     app.opacity-=0.01
        //     if(app.opacity<=0) app.opacity=1
        // },16)
    </script>
</body>
</html>

组件: 用来实现局部功能效果的代码集合(html/css/js)

模块:向外提供特定功能的js程序一般是一个js文件

组件包括: 1)非单文件组件 2) 单文件组件

非单文件组件的创建

1 创建组件

2 注册组件

3 编写组件标签

注意: 组件中的data函数一定要写成函数式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">
        <!-- 编写组件标签 -->
        <school> </school>
        <hr>
        <student></student>
    </div>
    <script>
        //创建school组件
        const school=Vue.extend({
            template:`
            <div>
                <h2>学校名称: {{schoolName}}</h2>
                <h2>学校地址: {{address}} </h2>
            </div>
            `,
            // 不要写el配置项 最终都要被一个vm管理
                data(){
                    return{
                        schoolName:"你好",
                        address:"北京"
                    }
                  
                }
        })
        //创建student组件
        const student=Vue.extend({
            template:`
            <div>
                 <h2>学生姓名: {{studentName}}</h2>
                 <h2>学生年龄: {{age}} </h2>
            </div>
            `,
            // 不要写el配置项 最终都要被一个vm管理
                data(){
                    return{
                        studentName:"你好",
                        age:21
                    }
                  
                }
        })

        new Vue({
            el:"#app",
            //注册组件(局部注册)
            components:{
                school:school,
                student:student
            },
            data:{
                name:"niha"
            }
        })
       
    </script>
</body>
</html>

注意点:1 一个单词组成:

1) 第一种写法(首字母小写) school

2) 第二种写法(首字母大写) School

2 多个单词组成

1) 第一种写法(kebab-case): my-school

2) 第二种写法（CamelCase): School(Vue脚手架才能使用)

简写方式 const school=Vue.entend(options) 也可以写成 const school=(options)

组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> 
<body>
    <div id="app">
        <!-- 编写组件标签 -->
        <school> </school>
        
    </div>
    <script>
        //创建student组件
        const student=Vue.extend({
            template:`
            <div>
                 <h2>学生姓名: {{studentName}}</h2>
                 <h2>学生年龄: {{age}} </h2>
            </div>
            `,
            // 不要写el配置项 最终都要被一个vm管理
                data(){
                    return{
                        studentName:"你好",
                        age:21
                    }
                  
                }
        })
        //创建school组件
        const school=Vue.extend({
            template:`
            <div>
                <h2>学校名称: {{schoolName}}</h2>
                <h2>学校地址: {{address}} </h2>
                <student></student>
            </div>
            `,
            // 不要写el配置项 最终都要被一个vm管理
                data(){
                    return{
                        schoolName:"你好",
                        address:"北京"
                    }
                  
                },
                components:{
                    student
                }
        })

        new Vue({
            el:"#app",
            //注册组件(局部注册)
            components:{
                school:school,
            },
            data:{
               
            }
        })
       
    </script>
</body>
</html>

单文件组件(xxx.vue) 下载插件Vetur 然后创建Vue文件

三种暴露方法

1 分别暴露

export const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

2 统一暴露

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export {school}

3 默认暴露

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export default school

推荐使用默认暴露，其简化写法为

export default({
        name:"School",
        data(){
            return{
                schoolName:"你好",
                address:"北京"
            }
          
        },
})

写在<script></script>标签中

单文件组件最终要在一个组件中进行整合

<template>
    <div>
        <School></School>
    </div>
</template>

<script>
    //导入组件
    import School from './School'
    import School from './Student'

    export default{
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>
<style>

</style>

大致思路: 各个组件中配置内容格式样式在一个vue中进行组件的汇总，main.js创建Vue示例并表明为哪个容器使用 xxx .html直接使用