day3 vue2 学习笔记 vue组件

已于 2022-10-12 09:40:54 修改
阅读量597 收藏
点赞数
文章标签： vue.js
于 2022-09-25 22:34:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51715424/article/details/127044601
版权

 系列文章目录

day1学习vue2笔记 vue指令

day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios

day3 vue2 学习笔记 vue组件

day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法

day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints

day6 vue 学习笔记 vue-router路由

文章目录

前言

一、vue 组件

1、什么是组件化开发

2、  vue  中的组件开发

3、vue  组件的三个组成部分

4、组件之间的父子关系

4.1使用组件的三个步骤

4.2 通过  component  注册的是私有子组件

4.3 注册全局组件

 5、组件的 props

5.1  props  是只读的

 5.2  props  的  default  默认值

5.3  props 的 type 值类型

 5.4  props   的 required  必填项

6、组件之间的样式冲突

6.1 解决样式冲突问题：

6.2  /deep/ 样式穿透

总结

vue 组件

前言

vue2 学习笔记

一、vue 组件

1、什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护

2、  vue  中的组件开发

vue  是一个支持组件化开发的前端框架。

vue  中规定：组件的后缀名  是 .vue。之前接触到的App.vue 文件本质上就是一个  vue  组件。

3、vue  组件的三个组成部分

每一个  .vue 组件都由3部分构成，分别是：

  • template  --> 组件的  模板结构
  • script  --> 组件的   JavaScript 行为
  • style    --> 组件的  样式
<template>
  <div  class="test_box">
    <span>{{user_name}}</span>
    <button @click="changeName">确定</button>
 
  </div>
</template>
 
<script>
  //<!--   默认导出，这是固定写法-->
  export default {
    name: "demo_test",
    // data 数据源
    // 注意 vue 组件中的  data 不能像之前一样，不能指向对象。
    // 注意： 组件中的 data 必须是一个函数
    data(){
      //这个return 出去的 {} 中，可以定义数据
      return {
        user_name:'张三',
      }
    },
  //方法函数区
    methods:{
      changeName(){
        /**
         * 在组件中  this 就表示当前实例的对象
         */
        console.log(this)
        this.user_name='李四'
      }
    },
  //  当前组件中的侦听器
    watch:{},
  // 当前组件中的计算属性
    computed:{},
  // 当前组件中在过滤器
    filters:{},
  }
</script>
 
<style scoped lang="less">
  .test_box{
    background-color: coral;
  }
 
</style>

4、组件之间的父子关系

组件在封装好之后，彼此之间是相互独立的，不存在父子关系；

 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系

4.1使用组件的三个步骤

@指向配置  :在vue 中vue-cli 已经配置了

# webpack.config.js


module.exports = {
    resolve:{
        alias:{
            @:path.join(_dimame,'./src')
        }
    }

}

步骤1：使用  import 语法导入需要的组件；

步骤2： 使用  components  节点注册组件；

步骤3： 以标签的形式使用刚才注册的组件

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3、以标签的形式使用刚才注册的组件-->
      <Left></Left>
    </div>
  </div>
</template>
<script>
  //1、导入  left 组件
  import Left from "@/components/Left";
  export default {
    /**
     * 2、components：注册组件
     */
    components:{
      Left
    },
    data(){
      return{
      }
    },
  }
</script>

<style lang="less">
  .app-container {
    padding: 1px 20px 20px;
    background-color: #efefef;
  }
  .box {
    display: flex;
  }
</style>

websorm 插件名称为  File  Path  Autocomplete

4.2 通过  component  注册的是私有子组件

例如：

在组件A 的components  节点下，注册了组件F

则在组件 F 只能在组件A 中；不能被 其他组件使用。

4.3 注册全局组件

在 vue 项目的  main.js  入口文件中，通过  Vue.commponent()  方法，可以注册全局组件。

 

 

 在注册的组件中使用自己的组件会报错（循环嵌套组件 ），并且无意义。

当只有一行代码是  click 事件可以简写为 

 5、组件的 props

props  是组件的自定义属性，在封装通用组件的时候，合理的使用  props  可以极大的提高组件的复用性.

定义完成使用

  • props  是自定义的属性，允许使用这通过自定义属性，当前组件指定初始值
  • 自定义属性的名字是封装者自定义的（只要名称合法即可）
  • 通过该属性穿过来的值可以通过    :   /   v-bind  进行属性绑定
  • props  是只读的，不要直接修改  props  的值，否则会报错
  • 要修改 props 的值，可以吧  props 的值转存到 data中，因为data 中的数据是可读可写的
  • 在声明自定义属性时，可以通过  default  来定义属性的默认值
  • 在声明自定义属性时，可以通过  type  来定义属性的值类型

5.1  props  是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员 不能直接修改  props 的值，否则会直接报错

 要修改  props  的值，可以把  props  的值转存到  data 中，因为  data 中的数据是可读可写的

<template>
    <div>
        <h5>Count组件</h5>
        <span>count 值是 {{count}}</span>
        <br>
        <button @click="add1">+1</button>
        <button @click="count -= 1">-1</button>
    </div>
</template>
<script>
    export default {
        name: "Count",
        // props  是自定义属性，允许使用这通过自定义属性，当前组件指定初始值
        // 自定义属性的名字是封装者自定义的（只要名称合法即可）
        // props 中的数据，可以直接在模板结构中使用
        // props 是只读的，不可用直接修改，修改了会报错
        //
        // props:['init_count'],
        props:{
            //    在其中定义自定义属性
            init_count:{
                //如果外键使用  init_count 组件的时候，没有传递  init_count 属性，则默认值生效
                default:0,
                // init_count 的值类型  Number 数字
                type:Number,
                // 必填项校验，默认为 false
                required: true,
            }
        },
        data(){
            return{
                //this.init_count  通过this 获取组件属性的值
                count:this.init_count,
            }
        },
        methods:{
            add1(){
                this.count +=1;
            },
        }
    }
</script>
<style scoped>
</style>

<!--使用到  Count 组件  通过 props 传自定义值-->
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <Count :init_count="9"></Count>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <Count></Count>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

 5.2  props  的  default  默认值

再声明自定义属性时，可以通过  default 来定义属性的默认值。

5.3  props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型。

 5.4  props   的 required  必填项

6、组件之间的样式冲突

默认情况下，写在， vue  组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间的样式冲突的根本原因是：

  • 单页面应用中，所有组件的  DOM 结构，都是基于唯一的 index .html 页面进行呈现的
  • 每个组件中的样式，都会影响整个  index.html  页面中的  DOM  元素

6.1 解决样式冲突问题：

原理：给需要用到的 标签中增加一个自定义属性，在 style 中也增加一个这样的属性即可；

例如：

<template>
  <div class="left-container">
    <h3  data-v-001>Left 组件</h3>
    <Count :init_count="9"></Count>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="less" >
  .left-container {
    padding: 0 20px 20px;
    background-color: orange;
    min-height: 250px;
    flex: 1;
  }
  h3[data-v-001] {
    color: red;
  }
</style>

实际运用写法：

在 style 中增加一个 scoped  属性即可；

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <Count :init_count="9"></Count>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="less" scoped>
  .left-container {
    padding: 0 20px 20px;
    background-color: orange;
    min-height: 250px;
    flex: 1;
  }
  h3{
    color: red;
  }
</style>

在创建 vue 时尽量的增加  scoped 属性，以防样式冲突

6.2  /deep/ 样式穿透

当使用第三方库的时候，如果需要修改第三方默认样式的需求，就需要用到  /deep/  ;

当只用到  scoped 时就会在当前的  vue 组件中的样式，那么当前样式就只会在当前组件中使用，如果有嵌套的组件，那么需要修改 子组件中的样式，那么就可以通过   /deep/ 来实现修改。

应用场景：当使用到第三方组件库时，如果需要更改其背景颜色，那么就可以使用  /deep/ 来找到该元素进行更改。

演示：更改  组件  count  中的  h5 标签的字体颜色

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
<!--    在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定的时候，
建议改写成“连字符“ 格式 例如： cmtCount 建议写成 cmt-count-->
    <Count :init_count="9"></Count>

  </div>
</template>
<script>
  export default {}
</script>
<style lang="less" scoped>
  .left-container {
    padding: 0 20px 20px;
    background-color: orange;
    min-height: 250px;
    flex: 1;
  }
  h3{
    color: red;
  }
/*  在父组件中更改子组件中的样式 */
  /deep/h5{
    color: crimson;
  }

</style>

<template>
    <div>
        <h5>Count组件</h5>
        <span>count 值是 {{count}}</span>
        <br>
        <button @click="add1">+1</button>
        <button @click="count -= 1">-1</button>
    </div>
</template>
<script>
    export default {
        name: "Count",
        // props  是自定义属性，允许使用这通过自定义属性，当前组件指定初始值
        // 自定义属性的名字是封装者自定义的（只要名称合法即可）
        // props 中的数据，可以直接在模板结构中使用
        // props 是只读的，不可用直接修改，修改了会报错
        //
        // props:['init_count'],
        props:{
            //    在其中定义自定义属性
            init_count:{
                //如果外键使用  init_count 组件的时候，没有传递  init_count 属性，则默认值生效
                default:0,
                // init_count 的值类型  Number 数字
                type:Number,
                // 必填项校验，默认为 false
                required: true,
            }
        },
        data(){
            return{
                //this.init_count  通过this 获取组件属性的值
                count:this.init_count,
            }
        },
        methods:{
            add1(){
                this.count +=1;
            },
        }
    }
</script>
<style scoped>
</style>

当两个页面都使用了  scoped  那么需要修改子组件的  style 样式可以如下方式修改：

总结

vue 组件

1、组件化开发指的是：根据封装的思想，吧页面上可重用的   UI 结构进行封装为组件，从而方便项目的开发与维护。

2、组件的组成部分

  • template  --> 组件的  模板结构
  • script  --> 组件的   JavaScript 行为
  • style    --> 组件的  样式

3、组件之间的父子关系

4、使用组件的三个步骤

  • 步骤1：使用  import 语法导入需要的组件；
  • 步骤2： 使用  components  节点注册组件；
  • 步骤3： 以标签的形式使用刚才注册的组件

5、注册私有组件：在组件A 的components  节点下，注册了组件F，则在组件 F 只能在组件A 中；不能被 其他组件使用。

6、注册全局组件：在 vue 项目的  main.js  入口文件中，通过  Vue.commponent()  方法，可以注册全局组件。

7、组件  props  ：props  是组件的自定义属性，在封装通用组件的时候，合理的使用  props  可以极大的提高组件的复用性.。

  • props  是自定义的属性，允许使用这通过自定义属性，当前组件指定初始值
  • 自定义属性的名字是封装者自定义的（只要名称合法即可）
  • 通过该属性穿过来的值可以通过    :   /   v-bind  进行属性绑定
  • props  是只读的，不要直接修改  props  的值，否则会报错
  • 要修改 props 的值，可以吧  props 的值转存到 data中，因为data 中的数据是可读可写的
  • 在声明自定义属性时，可以通过  default  来定义属性的默认值
  • 在声明自定义属性时，可以通过  type  来定义属性的值类型
  • props 的属性有，default  默认值，type  数据类型，requird  必填项
     

8、组件之间的样式冲突：通过在style 标签中增加 scoped 属性；

9、/deep/    样式穿透;

严不纯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.x源码——_init函数
白水煮青菜的博客
02-04 1935
执行了new Vue()之后，会通过_init方法触发一系列的初始化流程。而_init方法是通过initMixin方法挂载到Vue原型中的： export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { //do something...
vue项目如何设置某节点的最小高度
weixin_43963309的博客
02-06 2643
vue项目如何设置某节点的最小高度 在本项目中，需要给一个dom设置最小高度 最小高度=页面的高度 - 上一个节点到页面顶部的高度 首先 在methods里面设置一个方法 getRightHeight() { // 获取页面高度 let temp = document.getElementsByClassName('xxx')[0].offsetHeight // 获取heade...
Vue2学习之路（1）：Vue基础知识和组件化
lzx的博客
10-20 305
vue.js 前言（稍稍记录一下）： 其实学习Vue是冒着很大的担子的，这段时间有许多的事情要做，项目，OS，考研……而且我是个做服务器端或者后端的，搞这玩意纯属浪费时间，但是吧，不学一套完整的前端框架的话，感觉又有点不太充实。换句话来说，就是对前端要加深理解，才能更好的写后端和服务器端代码！之前看过很好的一句话，“我们说的全栈，不是说什么都会懂要做，而是在懂的基础上能更好的和前后端进行沟通，增强开发的进度，增加前后端的沟通性”，vue作为前端的一个大的较好框架，我便选择他作为我的前端框架了，后期也打算配合
Vue基本组件/插件开发
qq_32439381的博客
03-13 2500
一、组件和插件的区别 vue插件可以将自己的模块添加到Vue原型对象上，然后组件中可以通过this直接引用。还要就是通过插件机制，可以通过一个入口，就可以将一系列组件添加到环境中，直接使用插件是采用通用接口编写的，多用于制作好的东西功能扩展。vue组件只是一个独立的模块，可重复使用并且可以和其他对象进行交互的对象插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：添加全局方法...
Vue2收集依赖的时机以及生命周期解读
qq_53157160的博客
07-15 447
执行_render把vnode映射到真实dom，在这个方法中会访问到所依赖的数据，触发getter，然后判断Dep.target是否存在，我们在pushTarget中已经启用了依赖收集，所以这个时候就会通过判断，执行depend方法，调用Watcher的addDep方法，在addDep方法中，首先获取dep的id，然后判断newDepIds数组中是否存在这个id，防止重复收集依赖。显然，beforeCreate的钩子函数当中就不能获取到props，data当中的值，也不能调用methods当中的方法。...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的入口，在这里定义的...
Vue2学习笔记-前端开发
最新发布
03-03
Vue2学习笔记-前端开发
初学Vue(学习笔记 一) day one
01-20
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 Vue 的优点： 易用：熟悉HTML、CSS、 JavaScript知识后，可快熟上手 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kb运行大小，超快虚拟DOM Vue...
vue3学习笔记，亲测有效，持续更新
06-14
小白上手神器，记录的是我每天学习vue3的笔记，有的收费视频观看了好几遍，亲测有效，持续更新
vue+el-table 根据屏幕大小动态设置max-height属性适合适配多个表格高度出现滚动条
m13302979400的博客
06-18 1万+
<el-table ref="table" :data="info" :span-method="colspanMethod" :max-height="tableHeight"> <el-table-column type="selection" width="40"> </el-table-column> <el-table-c...
Vue如何设置动态宽度高度或者动态样式
热门推荐
Guoye的专栏
07-26 5万+
Vue如何设置动态宽度高度或者动态样式1. 添加样式绑定2. 添加属性计算 在开发过程中，很多时候都会用到动态的计算的样式，比如宽度，高度。特别是开发后台管理系统。 那么首先你务必看Vue的官方文档。涉及到的基础知识有： 绑定内联样式的使用 computed的使用 文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案： 需求场景：获取当前手机屏幕高度，设置cont...
vue中如何动态设置元素的高度
mm
06-03 1万+
1. 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 computed: { // 滚动区高度 scrollerHeight: function() { return (window.innerHeight - 50) + 'px'; //自定义高度需求 } } ...
min-height 对子元素的影响
lee_star_one的博客
11-05 458
父元素使用min-height，子元素设置height：100%不会继承父元素的高度 解决方法 可以使用js获取父元素，强制给子元素添加高度： vue： this.$nextTick(() => { this.$refs.line.style.height =this.$refs.wrapper.getBoundingClientRect().height + "px"; }); ...
css3——max-height 和 min-height
肖的博客
10-31 1763
max-height：最大高度 为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个 table tr td 表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破 tr td 表格，这个时候通过 css max-height 限制图片最大高度是有必要的。 min-height：最小高度 为了避免对象（可以是在加载过程中）没有内容时候不能撑开，但内容多少不能...
vue中设置height：100%无效的问题
weixin_34150503的博客
07-27 3834
在vue.js中写新的components的时候，如果在新页面中的模板中设置height：100%的时候一直无效。 App.vue文件 <template> <div id="app"> <router-view/> </div> </template> &l...
vue2学习笔记尚硅谷
09-15
但是，我可以为您提供一些关于Vue.js 2的学习笔记。以下是一些重要的主题和概念，供您参考： 1. Vue.js介绍： - Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。 - 它采用了MVVM（Model-View-ViewModel...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值