Vue CLI ref props mixin plugin scoped

最新推荐文章于 2024-11-11 23:32:58 发布
最新推荐文章于 2024-11-11 23:32:58 发布
阅读量351 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/130715376
版权

3.2. ref 属性

ref被用来给元素或子组件注册引用信息（id的替代者）

  • 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc
  • 使用方式
    • 打标识：

      或
    • 获取：this.$refs.xxx
<template> 
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
        <Student/>
    </div> 
</template> 

<script> 
    // 引入组件
    import School from './components/School.vue';
    import Student from './components/Student.vue';

    export default { 
        name:'App', 
        components:{ 
            School,
            Student 
        },
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title); // 真实DOM元素
                console.log(this.$refs.btn);  // 真实DOM元素
                console.log(this.$refs.sch);  // School组件的实例对象（vc）
            }
        }
    }
</script>

输出如下所示：

在这里插入图片描述

3.3. props 配置项

props让组件接收外部传过来的数据

  • 传递数据**<Demo name=“xxx” :age=“18”/>**这里age前加:，通过v-bind使得里面的18是数字
  • 接收数据
    • 第一种方式（只接收）props:[‘name’, ‘age’]
    • 第二种方式（限制类型）props:{name:String, age:Number}
    • 第三种方式（限制类型、限制必要性、指定默认值）
      props:{
    name: {
        type:String,    // 类型
        required:true,  // 必要性
        default:'老王'  //默认值
    }
}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据

src/App.vue

<template> 
    <div>
        <Student name="李四" sex="女" :age="18"/>
        <Student name="王五" sex="男" :age="18"/>
    </div> 
</template> 

<script> 
    // 引入组件
    import Student from './components/Student.vue';

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

src/components/Student.vue

<template>
    <div>
        <h1>{{ msg }}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{myAge + 1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                msg: "我是一个莆田学院的学生",
                myAge: this.age
            }
        },
        methods: { 
            updateAge() { 
                this.myAge++; 
            }
        },
        // 简单声明接收
        // props:['name','age','sex']

        // 接收的同时对数据进行类型限制
        // props: {
        //     name: String,
        //     age: Number,
        //     sex: String
        // }
        
        // 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        props: {
            name: {
                type: String,   // name的类型是字符串
                required: true  // name是必要的
            },
            age: {
                type: Number,
                default: 99,    // 默认值
            },
            sex: {
                type: String,
                required: true
            }
        }
    }
</script>

输出如下所示：

在这里插入图片描述

3.4. mixin 混入

  1. 功能：可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式
    1. 定义混入
      const mixin = { 
  data() {....}, 
  methods: {....} 
  .... 
}
    2. 使用混入
      1. 全局混入Vue.mixin(xxx)
      2. 局部混入mixins:[‘xxx’]

备注

  1. 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先
  2. 同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

src/mixin.js

export const hunhe = { 
    methods: { 
        showName() { 
            alert(this.name); 
        }
    }, 
    mounted() {
        console.log('你好啊！'); 
    }
} 

export const hunhe2 = {
    data() { 
        return { 
            x:100, 
            y:200 
        } 
    }
}

src/components/School.vue

<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    // 引入一个hunhe 
    import {hunhe,hunhe2} from '../mixin';
    export default {
        name:'School',
        data() {
            return {
                name: "莆田学院",
                address: '北京'
            }
        },
        mixins:[hunhe,hunhe2] // 局部混入
    }
</script>

src/components/Student.vue

<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
    </div>
</template>

<script>
    import {hunhe,hunhe2} from '../mixin';
    
    export default {
        name:'Student',
        data() {
            return {
                name: "liqb",
                sex: '男'
            }
        },
        mixins:[hunhe,hunhe2] // 局部混入
    }
</script>

src/App.vue

<template> 
    <div>
        <School/>
        <hr/>
        <Student/>
    </div> 
</template> 

<script> 
    // 引入组件
    import Student from './components/Student.vue';
    import School from './components/School.vue';

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

src/main.js

import Vue from 'vue';
import App from './App.vue';

// import {mixin} from './mixin'

Vue.config.productionTip = false;
// Vue.mixin(hunhe) // 全局混合引入 
// Vue.mixin(hunhe2) // 全局混合

new Vue({
  el: '#app',
  render: h => h(App),
})

输出如下所示：

在这里插入图片描述

3.5. plugin 插件

  1. 功能：用于增强Vue
  2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
  3. 定义插件（见下 src/plugin.js）
  4. 使用插件：Vue.use()

src/plugin.js

export default {
    install(Vue,x,y,z){
        console.log(x,y,z);
        
        // 全局过滤器
        Vue.filter('mySlice', function(value) {
            return value.slice(0,3);
        });

        // 定义全局指令
        Vue.directive('fbind',{
            // 指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value = binding.value;
            },

            // 指令所在元素被插入页面时
            inserted(element,binding) {
                element.focus();
            },

            // 指令所在的模板被重新解析时
            update(element,binding) {
                element.value = binding.value;
            }
        });

        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            }
        });

        // 给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = ()=> {
            alert('你好啊');
        }
    }
}

src/main.js

import Vue from 'vue';
import App from './App.vue';
import plugins from './plugins'; // 引入插件

Vue.config.productionTip = false;
Vue.use(plugins,1,2,3); // 应用（使用）插件

new Vue({
  el: '#app',
  render: h => h(App),
})

src/components/School.vue

<template>
    <div>
        <h2>学校地址：{{address}}</h2>
        <h2>学校名称：{{name}}</h2>
        <button @click="test">点我测试一个hello方法</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name: "莆田学院",
                address: '福建莆田'
            }
        },
        methods: {
            test(){
                this.hello();
            }
        }
    }
</script>

src/components/Student.vue

<template>
    <div>
        <h2>学生姓名：{{ name | mySlice}}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <input type="text" v-fbind:value="name">
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name: "liqb",
                sex: '男'
            }
        }
    }
</script>

输出如下所示：

在这里插入图片描述


3.6. scoped样式

  1. 作用：让样式在局部生效，防止冲突
  2. 写法：<style scoped>

Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版

src/components/School.vue

src/components/Student.vue<template>
    <div class="demo">
        <h2 class="title">学校地址：{{address}}</h2>
        <h2>学校名称：{{name}}</h2>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name: "莆田学院",
                address: '福建莆田'
            }
        }
    }
</script>

<style scoped> 
    .demo{ 
        background-color: skyblue; 
    } 
</style>

src/components/Student.vue

<template>
    <div class="demo">
        <h2 class="title">学生姓名：{{ name }}</h2>
        <h2 class="atguigu">学生性别：{{ sex }}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name: "liqb",
                sex: '男'
            }
        }
    }
</script>

<style lang="less" scoped> 
    .demo { 
        background-color: pink; 
        .atguigu { 
            font-size: 40px; 
        } 
    } 
</style>

src/App.vue

<template> 
    <div>
        <h1 class="title">你好啊</h1>
        <School/>
        <Student/>
    </div> 
</template> 

<script> 
    // 引入组件
    import Student from './components/Student.vue';
    import School from './components/School.vue';

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

<style scoped> 
    .title { 
        color: red; 
    } 
</style>

输出如下所示：

在这里插入图片描述

怀梦
关注
专栏目录
VUE3学习 第六章 V3自动引入插件、深入v-model、自定义指令directive、自定义Hooks、编写Vue3插件、
m0_55170432的博客
11-10 1858
学习
Vue学习笔记二
铁马冰河入梦来
08-29 215
Vue学习笔记
【Vue CLI ref props mixin plugin scoped】
yang_72的博客
04-06 544
通过v- bind绑定使得里面的18是数字。注意：age前面加了。
Vue CLl中的 ref props mixin plugin scoped
g_xlike的博客
04-17 695
在 Vue 组件中，需要通过配置 props 属性来定义组件的 props。在组件中添加 props 属性之后，就可以使用 props 选项接收从父组件传递的数据。Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
19Vue Vue CLI ref props mixin plugin scoped
m0_51943115的博客
02-27 108
19Vue Vue CLI ref props mixin plugin scoped
【关于Vue CLI ref props mixin plugin scoped】
wjw1204的博客
04-06 305
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据。Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版。：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。第一种方式（只接收）props:['name', 'age']
【Vue】学习笔记-Vue CLI ref props mixin plugin scoped
德仔
05-05 334
ref被用来给元素或子组件注册引用信息(id的代替者)
Vue中的ref props mixin plugin scoped的使用方法
XCXLOVE_的博客
04-26 328
ref属性：1被用来给元素或子组件注册引用信息（id的代替者）2.应用在HTML标签上获取的是真实dom元素，应用在组件标签上是组件实例对象（vc）3.使用方法：打标识：
【Vue】14 ref props mixin plugin scoped 属性
one or only的博客
07-11 249
【Vue】14 ref props mixin plugin scoped 属性
Vue.CLI ref、props、mixin、plugin、scoped
2302_76607708的博客
04-03 515
新建一个 plugin 文件夹 在文件夹中新建 plugins.js 文件。最后编辑时间 2024，4，04；接下来写一个vue示例。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （三）
weixin_44566194的博客
12-24 937
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第三章 Vue脚手架的学习内容笔记，包含初始化脚手架、ref与props属性、混入、插件、自定义事件、全局事件总线、消息订阅与发布、过渡与动画以及TodoList案例实操等内容。
7-vue-2
loveX001的博客
02-26 719
----------@----------1、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下之前我们或许会面临的问题而 经过长达两三年时间的筹备，做了哪些事情？我们从结果反推一句话概述，就是更小更快更友好了更小更快主要体现在编译方面：更友好在兼顾的的同时还推出了，大大增加了代码的逻辑组织和代码复用能力这里代码简单演示下：存在一个获取鼠标位置的函数 我们只需要调用这个函数，即可获取、的坐标，完全不用关注实现过程试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率
Vue源码分析之-Vue初始化的过程
前端高薪进击手记
07-07 719
Vue初始化过程调试 在src/core/global-api/index.js中，给Vue函数定义挂载了以下的静态成员： Vue的实例初始化过程 根据new Vue时的options挂载了各种属性成员：Vue首次渲染的过程
Vue2进阶之Vue2高级用法
qq_34306228的博客
04-18 1231
App.vue main.js App.vue main.js global注入到new Vue实例上，然后在App.vue的实例中执行自己当前的data与Vue实例执行顺序有关，先进行当前实例化声明（全局注入），然后再实例化声明的时候注入我们内部的mixin，是外部的的global更高一点像Vue-router、Vuex等也是插件，通过插件注入进去的 Vue-router Vue-router关于插件的内容 Vuex install的方法，将全部内容挂载到Vue的构造函数上，通过use方法挂载到Vue实
第四十二章 Vue中使用mutations修改Vuex仓库数据
最新发布
Calvin的博客
11-11 555
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
智能化健身房管理：Spring Boot与Vue的创新解决方案
Yaml4的博客
11-07 933
在现代社会，人们对健康和健身的重视程度不断提高。健身房作为人们进行体育锻炼和追求健康生活的重要场所，其数量和规模也在不断增长。然而，传统的健身房管理方式面临着诸多挑战。一方面，随着健身房会员数量的增加和业务的不断扩展，传统的人工管理方式变得越来越繁琐和低效。例如，会员信息的登记、课程安排、教练分配、设备管理等工作都需要大量的人力和时间，而且容易出现错误和漏洞。此外，传统的管理方式也难以满足会员对个性化服务和便捷体验的需求。另一方面，随着科技的不断进步，人们对智能化、数字化的服务需求也越来越高。
Vue 状态管理工具vuex
gklcsdn的博客
11-07 591
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
新手 Vue 项目运行
有你真好的博客
11-11 323
2.1 回到Idea后端的springboot项目，找到src--> rescources --> front.front --> index.html文件，打开之后找到 adminurl : 'adminurl'2.6 至此，前端Vue程序已经运行起来，结合前面的spingboot项目，我们已经将整个springboot + Vue项目运行起来。打开cmd命令行，按住win+R，出来命令行窗口，输入cmd，出来终端窗口。在运行项目之前，确保运行vue项目的环境已经安装成功，并可以找到；
【开源免费】基于SpringBoot+Vue.JS美发门店管理系统（JAVA毕业设计）
customer08的博客
11-11 900
基于Vue.js和SpringBoot开发的美发门店管理系统是一个功能全面的解决方案，旨在为美发店提供高效的日常运营支持。该系统分为两个主要部分：管理后台和用户网页端，以满足不同用户角色的需求。
Vue CLI2到Vue CLI3升级指南
“Vue CLI2升级至Vue CLI3的方法步骤涉及多个方面，包括卸载与安装、环境变量与多环境配置、静态资源文件处理以及IDE的配置适应。” 在升级Vue CLI的过程中，首先需要确保你的全局环境中已经卸载了旧版的Vue CLI，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值