前端路线--Vue3(day02)

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

获取DOM元素

<template>
  <div class="home">
    <!-- ref属性获取DOM元素-->
    <h2 :ref="getH2">获取DOM元素</h2>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {},
  setup() {
    // 获取DOM元素
    let getH2 = (el) => {
      // el就是获得的DOM元素
      console.log(el);
      // 修改样式
      el.style.color = "red";
    };
    return {
      getH2,
    };
  },
};
</script>

父子组件之间传值

父传子

父组件中

<template>
  <div class="">
    <!-- 父传子 -->
    <h2>父组件--{{ msg }}--父亲的钱:{{ money }}</h2>
    <!-- 1.向子组件传值 在父组件内绑定自定义属性-->
    <SonPage :money="money"></SonPage>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import SonPage from "@/components/SonPage.vue";
import { reactive, ref, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    SonPage,
  },
  setup() {
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);
	//父组件定义的数据
    let money = ref(1000);

    return {
      ...data2,
      money,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

子组件中

<template>
  <div class="">
    <h2>子组件</h2>
    <p>父亲传来的数据--钱:--{{ money }}</p>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //   需要用prop来进行接收
  props: {
    money: {
      type: Number,
      default: 0,
    },
  },
  //   接收父亲传过来的数据
  setup(props) {
    // props是父组件传递过来的数据
    console.log(props);
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);

    return {
      ...data2,
      sendDataToFather,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

子传父

子组件

<template>
  <div class="">
    <h2>子组件</h2>
    <button @click="sendDataToFather">点击向父组件传值</button>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup(props, { emit }) {
    // emit是子组件用来传递给父组件的方法
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);

    let sendDataToFather = () => {
      // 向父组件进行传值
      // emit("自定义事件名",数据)
      let message = "Hello Dad!";
      emit("toFather", message);
    };
    return {
      ...data2,
      sendDataToFather,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

父组件:

<template>
  <div class="">
    <!-- 接收子组件传递的数据 -->
    <SonPage  @toFather="dataFromSon"></SonPage>
    <p>从子组件传递的值:--{{ sondata }}</p>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import SonPage from "@/components/SonPage.vue";
import { reactive, ref, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    SonPage,
  },
  setup() {
    //这里存放数据
    const data = reactive({
      sondata: "",
    });
    const data2 = toRefs(data);

    // 接收子组件传递的数据
    let dataFromSon = (result) => {
    //result就是子组件传来的数据
      console.log(result);
      data.sondata = result;
    };

    return {
      ...data2,
      dataFromSon,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

provide()和inject()

//实现父套子，子套孙，父组件和后代组件之间的数据共享

祖先组件：

<template>
  <div class="">
    <h2>共享给后代的数据:{{ money }}</h2>
    <GrandSon></GrandSon>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { provide, reactive, ref, toRefs } from "vue";
import GrandSon from "@/components/GrandSon.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { GrandSon },
  setup() {
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);

    // 定义数据
    let money = ref(1000);
    // provide("属性",数据)--向后代组件提供数据
    //适用于父--》子--》孙嵌套共享数据
    provide("money", money);

    return {
      ...data2,
      money,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

后代组件中:

<template>
  <div class="">
    <h2>孙组件</h2>
    <p>孙组件共享父组件的值--{{ money }}</p>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { inject, reactive, toRefs } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    //这里存放数据
    const data = reactive({});
    const data2 = toRefs(data);

    // 接收祖先组件共享的数据
    //inject("祖先组件provide的属性")
    let money = inject("money");
    return {
      ...data2,
      money,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

Echarts的使用

<!--  -->
<template>
  <div class="">
    <!-- 
      echarts的使用:
      1.下载模块
      cnpm install echarts --save
      2.根据官方文档引入
      import * as echarts from "echarts";
      3.在methods中封装fn(){}将官方的API代码CV
      4.在Html中用一个盒子接收,设置宽高,修改fn()中byID的id
     -->
    <h2>echarts</h2>
    <!-- 基础柱状图 -->
    <div id="main" style="width: 600px; height: 300px"></div>
    <!-- 折线图 -->
    <div id="main2" style="width: 600px; height: 300px"></div>
    <!-- 3D地球 -->
    <div id="earch" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from "echarts";
import "echarts-gl";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 基础柱状图
    fn() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    //折线图
    fn2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    },
    // 3D地球
    fn3() {
      var ROOT_PATH =
        "https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      var chartDom = document.getElementById("earch");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          heightTexture:
            ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          environment: ROOT_PATH + "/data-gl/asset/starfield.jpg",
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 5,
              shadow: true,
            },
            ambientCubemap: {
              texture: ROOT_PATH + "/data-gl/asset/pisa.hdr",
              diffuseIntensity: 0.2,
            },
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 使用fn
    this.fn();
    this.fn2();
    this.fn3();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>

笔记

在这里插入图片描述
在这里插入图片描述

喝西瓜汁的兔叽Yan
关注
专栏目录
【Python百日进阶-Web开发-Vue3】Day501 - Vue简介与快速入门
岳涛的博客
01-29 553
Vue是一个前端框架，主要负责帮助我们构建用户的界面Vue负责VM的工作（视图模型），通过Vue可以将视图和模型相关联当模型发生变化时，视图会自动更新也可以通过视图去操作模型Vue思想组件式开发声明式编程Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
Vuejs：component动态组件的使用示例
彭世瑜的博客
03-31 1734
component动态组件很适合在不同组件之间切换，相比。组件 ComponentA.vue。组件 ComponentB.vue。组件 ComponentC.vue。依赖 package.json。入口文件 main.js。
react当前页面插入外部script
sunzhen15896的博客
01-25 1010
componentDidMount() { const script = document.createElement("script"); script.src = "/scripts/xxx.js"; script.async = true; document.body.appendChild(script); }
vue如何写组件（script标签引入的方式）
嘿嘿
04-20 8476
vue如何写组件（script标签引入的方式） 很多人知道.vue结构的单文件组件形式，不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了，那如果我们又想用vue来写模板，又不想引入vue-cli管理，那该怎么来写组件呢？别着急往下看！ 1.首先在正常使用cdn引入jquery的项目中，也用script标签引入Vue.js文件。 <script src=...
vue3 动态导入src/page目录下的所有子文件，并自动注册所有页面组件
weixin_45791806的博客
08-09 784
动态导入src/pages目录下的所有子文件。
Vue3项目创建的基本步骤
weixin_56858521的博客
10-06 498
创建Vue3项目的基本操作流程
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
day04-前端(vue).zip
10-01
在"day04-前端(vue).zip"这个压缩包中，我们可以期待找到一系列关于Vue.js学习资料，包括可能的代码示例、教程文档、练习项目等，帮助学习者深入理解和掌握Vue的核心概念和特性。 1. **Vue实例**：Vue实例是框架的...
第3讲：VUE3+ant-design-vue第3版，配置vue-i18n国际化语言支持。
DVTOP的博客
11-09 2349
此处国际化选择采用i18n，VUE3必须使用vue-i18n@next安装。 antd在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。所以在国际化时，还要同时完成antd和dayjs的国际化处理。 cd dvtop-designer npm install vue-i18n@next --save npm install dayjs --save 创建语言文件，如zh_cn.ts，类似方法创建zh_tw.ts、en_gb.ts等。 module.exports = {
vue2-day3.zip
08-10
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发并维护，用于构建用户界面。...总的来说，"vue2-day3.zip"的内容涵盖了Vue 2.x的基础和进阶概念，通过深入学习，你将能更好地理解和运用这个强大的前端框架。
vue3将自定义组件插入指定dom
子期
06-05 579
vue3 通过纯 js 的方式，往会被刷新节点的 div 中插入自定义组件
vue内置动态组件component使用详解
蓑笠翁
03-05 4万+
vue动态组件使用介绍，包括动态组件切换，动态组件切换数据缓存等
VUE3(template使用)
影子
08-17 5307
模板template就是定义vue时指定页面的结构构成 默认使用mount('选择器')指定挂在元素的内容来构建页面模板 可以使用template独立的来定义页面模板，此时挂在元素的内容将被忽略 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"><...
vue3学习笔记（1）script引入vue3实现简单应用
gtd54789的博客
04-23 4340
目录一、脚本引入简单使用二、双向绑定的基本表现 一、脚本引入简单使用 script引入 <!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js --> <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script> 简单使用实现数据渲染 <body> <!-- 添加html结构 -->
vue 页面添加script 标签引入js
qq_45950523的博客
09-08 6788
mounted() { // AMapUI.loadUI(...) this.init (); }, methods: { init () { let script = document.getElementById('gaodeMapScript'); // if(this.map) return; // this.isBodyLoading = true; if(!script){ script = documen
easyexcel模板导出并且公式自动计算的方法
最新发布
weixin_47615289的博客
09-11 288
【代码】easyexcel模板导出并且公式自动计算的方法。
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 651
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 891
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
Vue基础教程：Day02 模板语法与v-for的key属性解析
在Day02的Vue基础知识中，主要涉及了几个核心的指令，它们在构建动态内容时非常关键： 1. **v-html** - 这个指令用于将HTML字符串插入到DOM元素内。例如，在示例中，`v-html="htmlTxt"`将`htmlTxt`的数据（包含HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值