vue从入门到放弃（四）

2023-11-09

vue——filter过滤器

filterDemo.vue

<template>
  <div>
    <h1>过滤器</h1>
    {{message | lower}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      message:'Hello World'
    }
  },
  filters:{
    lower(val){
      return val.toLowerCase()
    }
  },//过滤器
  computed(){},//计算属性
  methods: {},//普通函数
  props: {},//接收参数
  created(){},//创建后
  mounted(){},//挂载后
  beforeDestroy() {},//销毁前
  components: {}//注册组件
}
</script>

App.vue

<template>
  <div id="app">
    <filterDemo/>
  </div>
</template>
<script>
import filterDemo from './components/advanceDemo/filterDemo.vue'
export default {
  name: 'App',
  components: {
    filterDemo
  }
}
</script>

结果：

在这里插入图片描述

vue——watch

watchDemo.vue

<template>
  <div>
    <h1>watch监听</h1>
    <p>{{message}}</p>
    <p><input type="text" v-model="message"></p>
    <p>{{obj.name}}</p>
    <p><input type="text" v-model="obj.name"></p>

  </div>
</template>
<script>
export default {
  data(){
    return{
      message:'Hello World',
      obj:{
        name:'张三',
        job:{
          jobName:'前端工程师'
        }
      }
    }
  },
  // 写法一：
  // watch:{
  //   message:(newMsg,oldMsg)=>{
  //     console.log('oldMsg='+oldMsg);
  //     console.log('newMsg='+newMsg);
  //   }
  // }
  // 写法二：
  watch:{
    message:{
      'handler':'watchMessage',
      deep:true, // 深度监听
      immediate:true // 首次先执行一次
    },
    obj:{
      'handler':'watchObj',
      deep:true, // 深度监听
      immediate:true // 首次先执行一次
    }
  },
  methods: {
    watchMessage(newMsg,oldMsg) {
      console.log('oldMsg='+oldMsg);
      console.log('newMsg='+newMsg);
    },
    watchObj(newMsg,oldMsg) {
      console.log('oldMsg='+oldMsg);
      console.log('newMsg='+newMsg);
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <watchDemo/>
  </div>
</template>
<script>
import watchDemo from './components/advanceDemo/watchDemo.vue'
export default {
  name: 'App',
  components: {
    watchDemo
  }
}
</script>

vue——自定义指令

directiveDemo.vue

<template>
  <div>
    <h1>全局自定义指令</h1>
    <input type="text" v-foc>
    <h1>局部自定义指令</h1>
    <input type="text" v-foc2>
  </div>
</template>
<script>
export default {
  directives:{
    foc2:{  // 局部自定义指令
      inserted:(el)=>{
        el.focus()
      }
    }
  },
  data(){
    return{

    }
  }
}
</script>

main.js

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

Vue.config.productionTip = false

// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-foc
  inserted:el=>{
    el.focus() // 聚焦
  }
});
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <directiveDemo/>
  </div>
</template>
<script>
import directiveDemo from './components/advanceDemo/directiveDemo.vue'
export default {
  name: 'App',
  components: {
    directiveDemo
  }
}
</script>

vue——自定义双向绑定（v-model）

modelDemo.vue

<template>
  <div>
    <h1>双向数据绑定</h1>
    <p>{{message}}</p>
      <input type="text" :value="message" @change="changeMsg"/>
  </div>
</template>
<script>
// 自定义v-model，是用在组件上
// 内置v-model是用在表单上 【它就是通过:value绑定值，change事件来绑定一个函数】
export default {
  model:{ // 双向数据绑定，替换
    prop:'message',
    event:'changeMsg'
  },
  props: {
    message:String
  },
  // data: () => ({
  //     message:'默认值'
  // }),
  methods: {
    changeMsg(event) {
      // console.log(event);
      // this.message = event.target.value
      this.$emit('changeMsg',event.target.value)
    }
  }
}
</script>

parentModel.vue

<template>
  <div>
    <!-- <modelDemo :message="message" @changeMsg="changeMsg"/> -->
    <modelDemo v-model='message'/>
  </div>
</template>
<script>
import modelDemo from './modelDemo.vue'

export default {
  components: {
    modelDemo
  },
  data(){
    return{
      message:'父组件传递默认值'
    }
  },
  methods: {
    changeMsg(val) {
      this.message = val
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

App.vue

<template>
  <div id="app">
    <modelDemo/>
    <parentModel/>
  </div>
</template>
<script>
import modelDemo from './components/advanceDemo/modelDemo.vue'
import parentModel from './components/advanceDemo/parentModel.vue'
export default {
  name: 'App',
  components: {
    modelDemo,
    parentModel
  }
}
</script>

vue——nextTick

nextTickDemo.vue

<template>
  <div>
    <h1>nextTick</h1>
    <ul ref="mydom" v-if="isshow">
      <li v-for="(item,index) in arr" :key="index">
        {{item}}
      </li>
    </ul>
    <button type="button" @click="addFun">添加</button>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
      arr:['a','b','c','d'],
      isshow:false
  }),
  methods: {
    addFun() {
      this.arr.push('k')
      this.isshow = true
      console.log(this.$refs.mydom);// 获取不到dom节点，因为是异步问题
      // 使用$nextTick，可以在数据更新之后，获取到最新的dom节点
      this.$nextTick(()=>{
        // 在dom渲染完成之后就会调用$nextTick
        console.log(this.$refs.mydom);
      })
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <nextTickDemo/>
  </div>
</template>
<script>
import modelDemo from './components/advanceDemo/nextTickDemo.vue'
export default {
  name: 'App',
  components: {
    nextTickDemo
  }
}
</script>

结果：

在这里插入图片描述

vue——provide和inject跨级通信

provideAndInjectDemo.vue

<template>
  <div>
    <h1>provid和inject组件通信</h1>
    <p>{{msg}}</p>
    <son/>
  </div>
</template>
<script>
// provide 和 inject 主要在跨级通信
// 场景：全局样式、全局字体、中英文转换，全局布局
import son from './son.vue'
export default {
  components: {
    son
  },
  provide(){
    return{
      lhq:this.mony, // 传递单个
      commProvide:this // 传递当前组件
    }
  },
  data: () => ({
    msg:'爷爷辈组件',
    mony:'零花钱'
  })
}
</script>

son.vue

<template>
  <div>
      <p>{{sonMsg}}</p>
      <grandson/>
  </div>
</template>
<script>
import grandson from './grandson.vue'
export default {
  components: {
    grandson
  },
  data: () => ({
      sonMsg:'儿子辈组件'
  })
}
</script>
<style lang="scss" scoped>
</style>

grandson.vue

<template>
  <div>
      <p>{{sunMsg}}</p>
      <p>展示爷爷给的{{lhq}} - {{commProvide.mony}}</p>
  </div>
</template>
<script>
export default {
  inject: ['lhq','commProvide'],
  data: () => ({
      sunMsg:'孙子辈组件'
  })
}
</script>
<style lang="scss" scoped>
</style>

App.vue

<template>
  <div id="app">
    <provideAndInjectDemo/>
  </div>
</template>
<script>
import provideAndInjectDemo from './components/advanceDemo/provideAndInjectDemo.vue'
export default {
  name: 'App',
  components: {
    provideAndInjectDemo
  }
}
</script>

结果：

在这里插入图片描述

vue——插槽slot

slotDemo.vue

父组件给萝卜坑填萝卜，父给子传递萝卜

<template>
  <div>
      <h1>slot插槽——基本使用</h1>
      <childSlot>
        <div>
          <a href="#">我是一个萝卜</a>
        </div>
    </childSlot/>
  </div>
</template>
<script>
// 父组件 给萝卜坑填萝卜，父给子传递萝卜
import childSlot from './childSlot.vue'
export default {
  name: "",
  components: {
    childSlot
  },
  data: () => ({

  })
}
</script>
<style lang="scss" scoped>
</style>

childSlot.vue

<template>
  <div>
    <p>这里是子组件</p>
    <slot>
      这里有一个萝卜坑
    </slot>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({

  })
}
</script>

App.vue

<template>
  <div id="app">
    <slotDemo/>
  </div>
</template>
<script>
import slotDemo from './components/advanceDemo/slotDemo.vue'
export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

结果：

在这里插入图片描述

slotDemo2.vue

父组件拿子组件中 slot中的数据

<template>
  <div>
    <h1>作用域插槽</h1>
    <childSlot2>
      <!--
      写法一：
      <template v-slot="myData">
        {{myData.slotData[0].name}}
        <ul>
          <li v-for="item in myData.slotData" :key="item.id">
              {{item.name}}
          </li>
        </ul>
      </template> -->
      <!-- 写法二： 多个插槽的写法-->
      <template v-slot:luobo>
          <p>胡萝卜</p>
      </template>
      <template v-slot:wosun>
          <p>莴笋</p>
      </template>
    </childSlot2>
  </div>
</template>
<script>
// 父组件 拿子组件中 slot中的数据

import childSlot2 from './childSlot2.vue'
export default {
  name: "",
  components: {
    childSlot2
  },
  data: () => ({

  })
}
</script>

childSlot2.vue

<template>
  <div>
      <p>子组件</p>
      <slot :slotData="arr" name="luobo">
        萝卜坑
      </slot>
      <slot name="wosun">
        莴笋坑
      </slot>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
      arr:[
        {id:1,name:'hhh1'},
        {id:2,name:'hhh2'},
        {id:3,name:'hhh3'},
      ]
  })
}
</script>

App.vue

<template>
  <div id="app">
    <slotDemo2/>
  </div>
</template>
<script>
import slotDemo2 from './components/advanceDemo/slotDemo2.vue'
export default {
  name: 'App',
  components: {
    slotDemo2
  }
}
</script>

结果：

在这里插入图片描述

vue

vue从入门到放弃（四）的相关文章

Docker Portainer 安装与报错处理

安装docker 管理器 Portainer 最近在看spring cloud alibaba的时候觉得docker是肯定要用的然后找了个管理的docker的东东比较方便的查询docker的情况直接看操作吧 root localho

随机推荐

分布式锁之redis实现

docker安装redis 拉取镜像 docker pull redis 6 2 6 查看镜像启动容器并挂载目录需要挂在的data和redis conf自行创建即可 docker run restart always d v usr l
python字符串的常用方法（3-2）

目录一字符串find 和index 获取某个值的位置方法二字符串strip lstrip rstrip左右去空格方法三字符串的replace 替换方法四字符串bool集合一字符串find 和index 获取某个值的位置方
vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；

vue项目点击拖拽盒子移动盒子代码可直接复制注意需要在移动的盒子上添加 v 指令注意采用固定定位
轻量级调试器神器 - mimikatz

昨天有朋友发了个法国佬写的神器叫 mimikatz 让我们看下神器下载地址 mimikatz trunk zip 还有一篇用这个神器直接从 lsass exe 里获取windows处于active状态账号明文密码的文章 http pent
网络与信息安全应急处置预案

分享一下我老师大神的人工智能教程零基础通俗易懂 http blog csdn net jiangjunshow 也欢迎大家转载本篇文章分享知识造福人民实现我们中华民族伟大复兴为加强北海市电子政务系统的安全管理形成科学有效反
jpa自增id(@GeneratedValue和@GenericGenerator)

一 JPA通用策略生成器通过annotation来映射hibernate实体的基于annotation的hibernate主键标识为 Id 其生成规则由 GeneratedValue设定的这里的 id和 GeneratedValue都
Qt应用程序嵌入浏览器的常用方法

1 使用QAxObject嵌入微软ActiveX软件使用QAxObject需要包含Qt模块 QT axcontainer 注 1 此方式只针对微软的组件才有效不可以用来加载第三方的应用程序 2 获取该组件的相关的API接口文档可以采用以
多线程案例【二】

目录定时器标准库中的定时器实现定时器线程池 Java标准库的线程池实现线程池定时器定时器像是一个闹钟在一定时间之后被唤醒并执行某个之前设定好的任务之前学习的 join 指定超时时间 sleep 休眠指定时间都是基于系统
Vue3基础

1 setup函数 setup 函数是组件逻辑的地方它在组件实例被创建时初始化 props 之后调用 2 ref ref 主要是用来包装原始类型的数据为什么要包装对象我们知道在 JavaScript 中原始值类型如 string
决策树实例(工资预测)【机器学习算法一决策树与随机森林3】

数据集adult data下载地址 http archive ics uci edu ml machine learning databases adult 下载后将其重命名为adult csv 打开后可看到如下样子数据集描述如下属性如
Illegal base64 character 20

1 问题 RSA 解密报错 Illegal base64 character 20 2 分析如果是 url 地址栏传参只需要UrlDecode 一次如果开发平台默认 UrlDecode 程序就不用再次 UrlDecode 否则 bas
互联网摸鱼日报(2023-09-05)

互联网摸鱼日报 2023 09 05 36氪新闻蔚小理上半年比拼谁拿住了不下牌桌的筹码一杯酱香拿铁年轻人就能爱上茅台关于瑞幸酱香拿铁的一些疑问为什么不直接滴酒是科技与狠活吗小红书关停自营电商业务本硕加入抢单千万外卖员卷
生成专题3

文章转自微信公众号机器学习炼丹术作者陈亦新欢迎交流共同进步联系方式微信cyx645016617 学习论文 Analyzing and Improving the Image Quality of StyleGAN 文章目录 3
Poco C++库简介

学习一个框架前要先明白它的是什么为什么怎么用下面这些文字是从中文poco官网上转过来的正如poco c 库的特点非常清晰代码风格更是一目了然 poco开发库的特点非常适合写后台处理程序效率也是很高的前台界面程序使用Qt
2022华为杯研究生数学建模解题思路和代码思路

本博客将持续更新2022研究生数学建模ABCDEF赛题的思路一题目 2022华为杯A题华为题移动场景超分辨定位问题在日常家庭生活中人们可能需要花费大量时间去寻找随意摆放在家中某些角落里的小物品但如果给某些重要物品贴上电路标签
原子类型AtomicLong用法探究

AtomicLong 探究 AtomicLong 是 Java 提供的一个原子长整型类提供了对长整型数据的原子性操作在多线程环境下 AtomicLong 可以确保对长整型数据的操作是线程安全的在 Android 中 AtomicLon
IBM Websphere安装配置与项目部署

Websphere安装配置 1 在IBM官网下载安装包需注册账户不要偷懒账户后边需要用到而且注册不需要审核很简单一分钟即可搞定下载地址下载需要通过审核可能一天后才可以点击打开链接最下方下载win64位版本即可将得到EX
Vrep学习笔记（二）

四基于Dummy和path的路径规划 4 1 Dummy和path Path用来自定义各种运动路径从Path上我们可以给定某一个时刻机器人运动到某一点的位置以及其姿态定义机器人在整个路径中每一时刻的运动过程 V REP中默认的Path
【大数据】分布式机器学习平台

记录一下团队之前搭建的分布式机器学习平台功能展示架构图平台演变前端页面 SparkML和sklearn模型训练耗时记录
vue从入门到放弃（四）

vue filter过滤器 filterDemo vue

vue从入门到放弃（四）

vue——filter过滤器

filterDemo.vue

App.vue

结果：

vue——watch

watchDemo.vue

App.vue

vue——自定义指令

directiveDemo.vue

main.js

App.vue

vue——自定义双向绑定（v-model）

modelDemo.vue

parentModel.vue

App.vue

vue——nextTick

nextTickDemo.vue

App.vue

结果：

vue——provide和inject跨级通信

provideAndInjectDemo.vue

son.vue

grandson.vue

App.vue

结果：

vue——插槽slot

slotDemo.vue

childSlot.vue

App.vue

结果：

slotDemo2.vue

childSlot2.vue

App.vue

结果：

更多文章

vue从入门到放弃（四） 的相关文章

随机推荐

热门标签

vue从入门到放弃（四）的相关文章