前端技术Vue学习笔记--005

这篇具有很好参考价值的文章主要介绍了前端技术Vue学习笔记--005。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue学习笔记

一、非父子通信-event bus 事件总线

作用:非父子组件之间,进行简易消息传递。(复杂场景用----Vuex)

使用步骤:

前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习

  1. 创建一个都能访问的事件总线 (空Vue实例)-----utils/EventBus.js
// 1.创建一个都能访问你的时间总线(空闲的Vue实例)
import Vue from "vue"

const Bus = new Vue()

export default Bus
  1. A组件(接受方),监听Bus的 $on事件
<script>
import Bus from '../utils/EventBus'
export default {
  created(){
    // 2.在A组件(接收方),进行监听Bus的事件(订阅消息)
    Bus.$on('sendMsg',(msg) => {
       consloe.log(msg)
    })
  }
}
</script>
  1. B组件(发送方),触发Bus实例的事件
<script>
//导入事件总线
import Bus from '../utils/EventBus'
export default {
  methods:{
    clickSend(){
      // 3.B组件(发送方)触发事件的方式来传递参数(发布消息)
      Bus.$emit('sendMsg','今日天气不错')
    }
  }
}
</script>

二、非父子通信(拓展)----provide&indect(跨层级共享数据)

provide&indect作用:跨层级共享数据

语法:

  1. 父组件 provide提供数据
export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}
  1. 子/孙组件 inject获取数据
export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

注意:

  • provide提供的简单类型的数据不是响应式的复杂类型数据是响应式推荐提供复杂类型数据
  • 子/孙组件通过inject获取的数据,不能在自身组件内修改

三、子组件与父组件之间的双向绑定

3.1、原理介绍

v-model本质上是一个 语法糖(语法的简写)。例如应用在输入框上,就是value属性 和 input事件 的合写(不同的表单元素会有所不同)

作用:提供数据的双向绑定

  1. 数据发生改变,页面就会自动变 :value(v-bind:value=‘实例中的数据’)
  2. 页面输入改变,数据会自动变化 @input

注意:$event 用于在模板中,获取事件的形参

下面两种写法等价:

<template>
  <div class="app">
        1:<input v-model="msg1"  type="text"/><br>
        <!-- 模版中获取事件的形参  ->  $event获取 -->
       2:<input :value="msg2" @input=" msg2 = $event.target.value" type="text"/>
  </div>
</template>

不同的表单元素, v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked属性和change事件。

3.2、表单类组件封装&v-model简化代码

  1. 表单类组件封装—>实现了子组件和父组件数据的双向绑定
    • 父传子数据 应该是父组件props传递过来的,v-model拆解绑定数据
    • 子传父监听输入,子传父值给父组件修改

前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习
App.vue

<template>
  <div class="app">
    <!-- $event就可以拿到当前子传父的形参 -->
       <BaseSelect :cityId="selectId" @changeId=" selectId = $event"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
    data(){
        return{
            selectId: '102'
        }
    },
    components:{
        BaseSelect:BaseSelect
    }
}

BaseSelect

<template>
  <div>
    <!-- 父传子 ::value="cityId" -->
    <select :value="cityId" @change="handlerChange" >
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    cityId: String 
  },
  methods:{
    handlerChange(e){
      //e.target.value 获取下拉菜单的值
      // alert(e.target.value)
      this.$emit('changeId',e.target.value)
    }
  }
  
}
</script>

<style>
</style>

注意:不是自己的数据不能用v-model实现双向绑定,只能通过将v-model拆解,利用父子通信的手段进行修改。

  1. 父组件v-model简化代码实现子组件和父组件的双向绑定

相比与上述代码并没有大致区别,只是将子组件的一些名字替换为value与input,从而在父组件中利用v-model实现数据绑定

v-model其实就是 :value和@input事件的简写
步骤:

  • 子组件:props通过value接收数据事件触发 input
  • 父组件v-model直接绑定数据
    前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习

输入框子组件通信

App.vue

<template>
  <div class="app">
 
       <!-- <BaseSelect :value="inputValue" @input="inputValue = $event"></BaseSelect> -->
       <!-- :value="inputValue" @input="inputValue = $event" 等价于v-model="inputValue" -->
       <BaseSelect v-model="inputValue"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
    data(){
        return{
            inputValue: 'i love china'
        }
    },
    components:{
        BaseSelect:BaseSelect
    }

}
</script>

<style>

</style>

BaseSelect

<template>
  <div>
    <!-- 父传子 ::value="cityId" -->
   <input type="text" :value="value" @change="handleChange">
   
  </div>
</template>

<script>
export default {
  props:{
    value: String 
  },
  methods:{
    handleChange(e){
      //e.target.value 获取下拉菜单的值
      // alert(e.target.value)
      this.$emit('input',e.target.value)
    }
  }
  
}
</script>

<style>
</style>

四、.sync修饰符(重要)

作用:可以实现子组件父组件双向绑定,简化代码
特点:prop属性名,可以自定义,非固定为value(用v-model)
场景:封装弹框类的基础组件,visible属性 true显示 false隐藏
本质:就是 :属性名@update:属性名 合写
子父组件的使用方式
前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习
弹出框数据
App.vue

<template>
  <div class="app">
    <button @click=" isShow = true ">退出按钮</button>
    <!-- :visible.sync 等价于  :visible  和@update:visible整合 -->
    <!-- <BaseDialog :visible.sync="isShow"></BaseDialog> -->
    <!-- $event用来接收  this.$emit('update:visible',false)的参数 -->
    <BaseDialog :visible="isShow"  @update:visible=" isShow = $event"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
export default {
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    BaseDialog,
  }
}
</script>

<style>
</style>

BaseDialog

<template>
  <div class="base-dialog-wrap" v-show="visible">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示:</h3>
        <button class="close" @click="close">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么?</p>
      </div>
      <div class="footer">
        <button @click="close">确认</button>
        <button @click="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  methods:{
    close(){

      this.$emit('update:visible',false)
    }
  }
}
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

五、ref和$ref

5.1、获取dom

前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习

BaseChart

<template>
  <div class="base-chart-box"  ref="myCharts">子组件</div>
  <!--  -->
</template>

<script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'
// import echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom,初始化echarts实例
    // this.$refs.myCharts替代document.querySelector('.base-chart-box')查找范围是当前页面的盒子
    var myChart = echarts.init(this.$refs.myCharts)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>

5.2、获取组件实例

前端技术Vue学习笔记--005,Vue学习记录,前端,vue.js,学习
App.vue

<template>
  <div class="app">
    <h4>父组件 -- <button @click="getData">获取组件实例</button></h4>
    <BaseFromVue ref="fromVue"></BaseFromVue>
      <div>
      <button @click="getData">获取数据</button>
      <button @click="resetData">重置数据</button>
    </div>
  </div>
</template>

<script>
import BaseFromVue from './components/BaseFrom.vue'

export default {
  components: {
    BaseFromVue :BaseFromVue
  },
  data(){

    return{
        user :{
            username : '',
            password : ''
        }
    }
  },
  methods: {
   getData(){
    var user =this.$refs.fromVue.getFromValue()
    // alert(user.username)
    this.user=user
   },
   resetData(){
   this.$refs.fromVue.resetFrom()
   }
  }
}
</script>

<style>
</style>

BaseFrom.vue

<template>
  <div class="app">
    <div>
      账号: <input v-model="username" type="text">
    </div>
     <div>
      密码: <input v-model="password" type="text">
    </div>
  
  </div>
</template>

<script>
export default {
    data(){
        return{
            //定义数据
            username : '',
            password : ''
        }
    },
    methods:{
        //获取到表单数据并返回
        getFromValue(){
            console.log("用户名:"+this.username)

            return{
                username : this.username,
                password : this.password
            }
        },
        resetFrom(){
            this.username=''
            this.password=''
        }
    }
}
</script>

<style scoped>
.app {
  border: 2px solid #ccc;
  padding: 10px;
}
.app div{
  margin: 10px 0;
}
.app div button{
  margin-right: 8px;
}
</style>

六、Vue异步更新、$nextTick

需求:点击编辑按钮,显示编辑框,并让编辑框自动聚焦

this.isShowEdit = true   //控制显示
 this.$refs.inp.focus()  //利用ref得到Dom聚焦

问题:“显示后”,立即获取焦点失败
原因:Vue是异步更新Dom(提升性能)

解决方法:
$nextTick:等Dom更新后,才会触发方法里的函数体
语法:this. $ nextTick

 methods: {
    editFn() {
        // 显示输入框(异步dom更新)---this.$refs.inp获取不到Dom
        this.isShowEdit = true  
        //$nextTick()
       this.$nextTick(()=>{
         // 获取焦点
        this.$refs.inp.focus() 
       })
       //setTimeout等待的时间不精准 -------- 推荐使用 $nextTick()
    //    setTimeout(() => {
    //      this.$refs.inp.focus() 
    //    }, 100);
    }  }

通过自定义指令封装自动聚焦文章来源地址https://www.toymoban.com/news/detail-660521.html

//自动聚焦指令的封装
//封装全局指令 focus为指令名--------定义好字后就可以在对应的框上v-focus直接使用
Vue.directive('focus',{
  //指令所在的dom元素,被插入到页面中时触发
    inserted(el){
      el.focus()
    }
})

到了这里,关于前端技术Vue学习笔记--005的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端笔记(Css、JS、Vue、UniApp、微信小程序)

    点击穿透 应用场景:点赞或送礼等出现的弹窗遮罩,无法再次触发点击事件 磨砂模糊 底部安全距离 可以放入【common.scss】中,在需要的页面引入 宽度根据内容决定 媒体查询@media 必须是以 @media 开头 使用 mediatype 指定媒体(设备)类型 使用 and | not | only 逻辑操作符构建复杂

    2024年04月26日
    浏览(42)
  • 前端技术学习第八讲:VUE基础语法---初识VUE

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时

    2023年04月27日
    浏览(48)
  • 前端技术学习第九讲:VUE基础语法---VUE常用指令

    在VUE学习中,通常使用相关指令使VUE对象中的内容与网页进行挂载绑定,是我们的数据与视图之间产生关联,完成渐进式动态效果。VUE指令都会以“v-”开头。 指令名 描述 v-text 将文本内容挂载到页面元素中 v-html 将html代码展示到页面元素中 v-bind 将内容解析成为js,绑定至页

    2024年02月13日
    浏览(43)
  • 【前端Vue】Vue学习笔记之基础内容

    Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一

    2023年04月23日
    浏览(57)
  • Vue学习笔记(黑马前端)

    Vue阶段作业地址 Vue 快速上手 Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 / 开发者工具 Vue 指令 v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 综合案例 - 小黑记事本 列表渲染 / 删除功能 / 添加功能 / 底部统计 / 清空 Vue 是什么 概念:Vue 是一个用于 构建用户界面 的 渐

    2024年04月15日
    浏览(83)
  • Html + Jquery + Vue前端学习笔记

    输入框里的值变了,data里的查询参数也会跟着变,这就是vue的绑定 @keyup.enter.native 这个代表键盘的回车事件,一般用来做查询 clearable 代表可清空 看一下整体效果 some方法判断数组中是否包含某个值 div富文本显示,u3000代表空格 上移,下移,删除,添加 控制两个按钮切换变

    2024年02月12日
    浏览(41)
  • 前端学习笔记(14)-Vue3组件传参

    1.props(父组件传递给子组件) 1.1 实现 如果你没有使用 script setup,props 必须以 props 选项的方式声明,props 对象会作为 setup() 函数的第一个参数被传入: 在子组件中: 在父组件中: 一个组件可以有任意多的 props,默认情况下,所有 prop 都接受任意类型的值。 这种情况下,我

    2024年01月21日
    浏览(53)
  • Vue.js知识点学习的一点笔记

    目录 一、虚拟DOM  二、MVVM 三、数据代理 四、事件修饰 五、键盘事件 六、插值语法{{}}、方法methods、计算属性computed 七、 监视、深度监视、另一种写法、简写 八、computed计算属性和watch侦听 九、什么时候用箭头函数 十、Vue侦听和watch侦听原理 十一、从Vue侦听原理得出,往对

    2024年02月11日
    浏览(44)
  • 【前端学习记录】vue中使用el-upload组件时,上传文件进度条没有实时更新

    问题背景 今天在项目中遇到一个问题,使用el-upload组件时,上传文件进度条没有实时更新,需要手动点击一下才会更新。 原理及可尝试方案 el-upload 组件默认的进度条是通过 Ajax 请求上传文件,并且进度条通过监听 xhr.upload 的 progress 事件来实时更新。但是,有些浏览器在处

    2024年02月01日
    浏览(52)
  • Vue-Element-Admin项目学习笔记(7)用Node.js写一个简单后端接口

    前情回顾: vue-element-admin项目学习笔记(1)安装、配置、启动项目 vue-element-admin项目学习笔记(2)main.js 文件分析 vue-element-admin项目学习笔记(3)路由分析一:静态路由 vue-element-admin项目学习笔记(4)路由分析二:动态路由及permission.js vue-element-admin项目学习笔记(5)路由分析

    2024年02月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包