vue-3

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

一、文章内容概括

1.生命周期

  1. 生命周期介绍
  2. 生命周期的四个阶段
  3. 生命周期钩子
  4. 声明周期案例

2.工程化开发入门

  1. 工程化开发和脚手架
  2. 项目运行流程
  3. 组件化
  4. 组件注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

在这里插入图片描述

三、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
        // 此时this.count为undefind
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
           // 结果：{{ title }}
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
          // 结果："计数器"
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>
</html>

四、生命周期钩子小案例

1.在created中发送数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .news {
            display: flex;
            height: 120px;
            width: 600px;
            margin: 0 auto;
            padding: 20px 0;
            cursor: pointer;
        }

        .news .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 10px;
        }

        .news .left .title {
            font-size: 20px;
        }

        .news .left .info {
            color: #999999;
        }

        .news .left .info span {
            margin-right: 20px;
        }

        .news .right {
            width: 160px;
            height: 120px;
        }

        .news .right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="item.id" class="news">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="info">
                        <span>{{ item.source }}</span>
                        <span>{{ item.time }}</span>
                    </div>
                </div>
                <div class="right">
                    <img :src="item.img" alt="">
                </div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 接口地址：http://hmajax.itheima.net/api/news
        // 请求方式：get
        const app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            async created() {
                // 1. 发送请求获取数据
                const res = await axios.get('http://hmajax.itheima.net/api/news')
                // 2. 更新到 list 中，用于页面渲染 v-for
                this.list = res.data.data
            }
        })
    </script>
</body>

</html>

2.在mounted中获取焦点

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例-获取焦点</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
    <!-- 核心样式 -->
    <style>
        html,
        body {
            height: 100%;
        }

        .search-container {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .search-container .search-box {
            display: flex;
        }

        .search-container img {
            margin-bottom: 30px;
        }

        .search-container .search-box input {
            width: 512px;
            height: 16px;
            padding: 12px 16px;
            font-size: 16px;
            margin: 0;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            -webkit-tap-highlight-color: transparent;
        }

        .search-container .search-box button {
            cursor: pointer;
            width: 112px;
            height: 44px;
            line-height: 41px;
            line-height: 42px;
            background-color: #ad2a27;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            box-shadow: none;
            font-weight: 400;
            border: 0;
            outline: 0;
            letter-spacing: normal;
            color: white;
        }

        body {
            background: no-repeat center /cover;
            background-color: #edf0f5;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="search-container">
            <img src="https://www.itheima.com/images/logo.png" alt="">
            <div class="search-box">
                <input type="text" v-model="words" id="inp">
                <button>搜索一下</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                words: ''
            },
            // 核心思路：
            // 1. 等input框渲染出来 mounted 钩子
            // 2. 让input框获取焦点 inp.focus()
            mounted() {
                document.querySelector('#inp').focus()
            }
        })
    </script>

</body>

</html>

五、案例-小黑记账清单

1.需求图示：

在这里插入图片描述

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

  • 立刻发送请求获取数据 created
  • 拿到数据，存到data的响应式数据中
  • 结合数据，进行渲染 v-for
  • 消费统计 —> 计算属性

2.添加功能

  • 收集表单数据 v-model，使用指令修饰符处理数据
  • 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
  • 请求成功后，对文本框内容进行清空
  • 重新渲染列表

3.删除功能

  • 注册点击事件，获取当前行的id
  • 根据id发送删除请求
  • 需要重新渲染

4.饼图渲染

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
  • 根据数据试试更新饼图 echarts.setOptions({…})

4.代码准备

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    <style>
        .red {
            color: red !important;
        }

        .search {
            width: 300px;
            margin: 20px 0;
        }

        .my-form {
            display: flex;
            margin: 20px 0;
        }

        .my-form input {
            flex: 1;
            margin-right: 20px;
        }

        .table> :not(:first-child) {
            border-top: none;
        }

        .contain {
            display: flex;
            padding: 10px;
        }

        .list-box {
            flex: 1;
            padding: 0 30px;
        }

        .list-box a {
            text-decoration: none;
        }

        .echarts-box {
            width: 600px;
            height: 400px;
            padding: 30px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        tfoot {
            font-weight: bold;
        }

        @media screen and (max-width: 1000px) {
            .contain {
                flex-wrap: wrap;
            }

            .list-box {
                width: 100%;
            }

            .echarts-box {
                margin-top: 30px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="contain">
            <!-- 左侧列表 -->
            <div class="list-box">

                <!-- 添加资产 -->
                <form class="my-form">
                    <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
                    <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
                    <button @click="add" type="button" class="btn btn-primary">添加账单</button>
                </form>

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>消费名称</th>
                            <th>消费价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list" :key="item.id">
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.name }}</td>
                            <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                            <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- 右侧图表 -->
            <div class="echarts-box" id="main"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 接口文档地址：
         * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
         * 
         * 功能需求：
         * 1. 基本渲染
         *    (1) 立刻发送请求获取数据 created
         *    (2) 拿到数据，存到data的响应式数据中
         *    (3) 结合数据，进行渲染 v-for
         *    (4) 消费统计 => 计算属性
         * 2. 添加功能
         *    (1) 收集表单数据 v-model
         *    (2) 给添加按钮注册点击事件，发送添加请求
         *    (3) 需要重新渲染
         * 3. 删除功能
         *    (1) 注册点击事件，传参传 id
         *    (2) 根据 id 发送删除请求
         *    (3) 需要重新渲染
         * 4. 饼图渲染
         *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
         *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
         */
        const app = new Vue({
            el: '#app',
            data: {
                list: [],
                name: '',
                price: ''
            },
            computed: {
                totalPrice() {
                    return this.list.reduce((sum, item) => sum + item.price, 0)
                }
            },
            created() {
                // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                //   params: {
                //     creator: '小黑'
                //   }
                // })
                // this.list = res.data.data

                this.getList()
            },
            mounted() {
                this.myChart = echarts.init(document.querySelector('#main'))
                this.myChart.setOption({
                    // 大标题
                    title: {
                        text: '消费账单列表',
                        left: 'center'
                    },
                    // 提示框
                    tooltip: {
                        trigger: 'item'
                    },
                    // 图例
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    // 数据项
                    series: [
                        {
                            name: '消费账单',
                            type: 'pie',
                            radius: '50%', // 半径
                            data: [
                                // { value: 1048, name: '球鞋' },
                                // { value: 735, name: '防晒霜' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },

            methods: {
                async getList() {
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
                        params: {
                            creator: '小黑'
                        }
                    })
                    this.list = res.data.data

                    // 更新图表
                    this.myChart.setOption({
                        // 数据项
                        series: [
                            {
                                // data: [
                                //   { value: 1048, name: '球鞋' },
                                //   { value: 735, name: '防晒霜' }
                                // ]
                                data: this.list.map(item => ({ value: item.price, name: item.name }))
                            }
                        ]
                    })
                },
                async add() {
                    if (!this.name) {
                        alert('请输入消费名称')
                        return
                    }
                    if (typeof this.price !== 'number') {
                        alert('请输入正确的消费价格')
                        return
                    }

                    // 发送添加请求
                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
                        creator: '小黑',
                        name: this.name,
                        price: this.price
                    })
                    // 重新渲染一次
                    this.getList()

                    this.name = ''
                    this.price = ''
                },
                async del(id) {
                    // 根据 id 发送删除请求
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    // 重新渲染
                    this.getList()
                }
            }
        })
    </script>
</body>

</html>

六、工程化开发和脚手架

1.开发Vue的两种方式

  • 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
  • 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

在这里插入图片描述

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

  • webpack配置不简单
  • 雷同的基础配置
  • 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：
  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化的webpack配置
使用步骤：
  1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
  2. 查看vue/cli版本： vue --version
  3. 创建项目架子：vue create project-name(项目名不能使用中文)
  4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

七、项目目录介绍和运行流程

1.项目目录介绍

在这里插入图片描述

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

  1. main.js 入口文件
  2. App.vue App根组件
  3. index.html 模板文件

2.运行流程

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 兼容：给不支持js的浏览器一个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
    <div id="app">
      <!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
    </div>

    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2. 导入 App.vue 根组件
import App from './App.vue'

// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false

// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

八、组件化开发

​ 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

​ 好处：便于维护，利于复用 → 提升开发效率。

​ 组件分类：普通组件、根组件。

​ 比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

在这里插入图片描述

总结：

组件化的好处是什么？

组件的分类？

九、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

在这里插入图片描述

2.组件是由三部分构成

  • 语法高亮插件

在这里插入图片描述

  • 三部分构成

    • template：结构 （有且只能一个根元素）
    • script: js逻辑
    • style： 样式 (可支持less，需要装包)

  • 让组件支持less

    （1） style标签，lang=“less” 开启less功能

    （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

    -D ：开发依赖，–save-dev的简写

3.总结

App组件包含哪三部分？

十、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

  1. 创建.vue文件（三个组成部分）
  2. 在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法：

在这里插入图片描述

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default { 
    // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

6.练习

在App组件中，完成以下练习。在App.vue中使用组件的方式完成下面布局

在这里插入图片描述

HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

HmMain.vue

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

HmFooter.vue

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

App.vue

<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>

    <!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
         设置中搜索 trigger on tab → 勾上
    -->
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    // '组件名': 组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

7.总结

  • A组件内部注册的局部组件能在B组件使用吗
  • 局部注册组件的步骤是什么
  • 使用组件时 应该按照什么命名法

十一、普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

  1. 创建.vue组件（三个组成部分）
  2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6.练习

在以下3个局部组件中是展示一个通用按钮

在这里插入图片描述

HmButton.vue

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton.vue'

Vue.config.productionTip = false

// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)

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

在其中某个组件中使用，比如HmMain.vue（当成HTML标签直接使用）

<template>
  <div class="hm-main">
    我是hm-main
    <HmButton></HmButton>
  </div>
</template>

<script>
export default {};
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

7.总结

1.全局注册组件应该在哪个文件中注册以及语法是什么？

2.全局组件在项目中的任何一个组件中可不可以使用？

是三好
关注
专栏目录
使用vue-3D-model(一个展示3D模型的 Vue 组件)
weixin_48947842的博客
03-31 5311
1、安装 npm install vue-3d-model 2、引入 在vue的HTML中引入script (在那个地方用在那引入就可以了) 3、支持的格式、功能、写法 提供一个给刚接触的同学熟悉的demo 话不多说,直接上连接 https://hujiulong.github.io/vue-3d-model/#/demo-controls 4、使用vue-3D-model会遇到的一些问题我放另一篇上了哦 ...
Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 4918
基于threeJS的vue 3D展示组件。
vue-router 详解
热门推荐
星海IT学习之路
01-16 12万+
文章目录1、认识vue-router2、安装和使用vue-router 1、认识vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ vue-router是基于路由和组件的 路由用户设定访问
vue-element-admin
小赵的呢
03-01 3万+
vue-element-admin 1、vue-element-admin 1.1简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub地址：https://github.com/PanJiaChen/vue-element-admin 项目在线预览：https://panjiachen.gitee.io/vue-element-admin 1.2安装 # 解压压缩包 # 进入目录 cd vue-element-admin-master # 安装依赖
vue-treeselect 安装及使用
ingenuou_的博客
03-14 7512
1、建议通过npm安装vue-treeselect，并使用webpack之类的捆绑器来构建您的应用程序。 npm install --save @riophae/vue-treeselect 2、本示例说明如何将vue-treeselect与Vue SFCs集成在一起。 <!-- Vue SFC --> <template> <div id="app"> <treeselect v-model="value" :multiple="true" :opt
Vue3的vue-router超详细使用
qq_52769059的博客
09-08 2万+
Vue3的vue-router超详细使用
vue-cli2,vue-cli3（vue脚手架）超详细教程
stormzhuo的博客
02-21 4090
文章目录vue-cli脚手架Node.js环境安装vue-cli的安装npm，cnpm介绍安装脚手架用脚手架生成项目目录 vue-cli脚手架 顾名思义，脚手架就是用来协助，配合，帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作，具有安全,高效的特点。 vue-cli与平台无关,功能更加齐全。无论是预编译模板，注入依赖，还是模拟生产环境等功能，vue-cli都具备,而且占用内存少，更高效，运行速度非常快。 Node.js环境安装 要安装Vue.js脚手架
vue-qr二维码组件
@@小旭的博客
06-12 4058
前端使用vue组件生成二维码。
vue-devtools的安装
chenhaiy的博客
03-25 9684
vue-devtools的安装 vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容，那么借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 本文重点介绍vue-devtools安装方法，提供chrome插件直接安装方法。接下来
vue-element-admin--使用体验
IT利刃出鞘的博客
06-25 1万+
本文用示例介绍vue-element-admin的用法。
ruoyi-vue-pro开发指南PDF下载
03-07
ruoyi-vue-pro开发指南PDF下载 包含各种组件开发指南
vue-devtools-5.1.1.zip
04-23
在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。 使用方法 切换到根目录 cnpm install，然后 npm run build，再 修改shells\chrome 目录下的manifest.json 里面的 ...
vue中展示3D模型 -- vue-3d-model
Rainy_X的博客
08-14 2万+
一、搜集到的网址 3D模型库 three.js WebGL babylonJS ThingJS EverAPI 3D数据可视化库 echarts — 基于Canvas Highcharts —基于SVG d3.js — 基于SVG/Canvas+SVG g2.js — 基于Canvas 二、需求 尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型 效果图如下 使用原因可看这篇文章 https://www.jianshu.com/p/
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 504
toRef。
vue如何让下拉框可以输入---查询下拉框内容
最新发布
qq_42666729的博客
10-28 436
使用filterable。
Vue 关于路由
歌舞阿瓜的博客
10-26 568
路由
vue实现语音合成功能，Android和wap端
ahualong1的博客
10-25 1089
vue项目需要实现小说朗读功能，wap端和Android APP端，wap端能使用的方法在Android端不能使用，需要使用原生Android的方法实现小说朗读功能。
Vue3用户关注与粉丝列表展示
m0_74963840的博客
10-27 616
粉丝列表小组件
在vue中 如何实现跨域
Sherry Tian的博客
10-26 1990
跨域问题是Web开发中常见的挑战，那么如何解决跨域呢，我们一起来看看吧！
vue-three-loader 和 vue-3d-loader 区别
05-13
Vue-three-loader 和 Vue-3d-loader 是两个不同的库，虽然名称相似，但是它们的主要功能和用途略有不同。 Vue-three-loader 是一个 Webpack 的 loader，用于在 Vue.js 中加载 Three.js 场景。它提供了一个 Vue 组件，通过这个组件，可以很方便地在 Vue 应用中使用 Three.js。Vue-three-loader 底层使用了 Three.js 中的 WebGL 渲染引擎，可以让你使用 Three.js 创建 3D 场景和动画效果。 Vue-3d-loader 是一个 Vue.js 组件，可以用于在应用中加载 3D 模型文件。它支持多种格式的 3D 模型文件，如 OBJ、MTL、PLY、STL 等。Vue-3d-loader 可以将这些 3D 模型文件转换成可渲染对象，然后将其显示在页面上。Vue-3d-loader 还可以让你对这些模型进行旋转、缩放、移动等操作。 总的来说，Vue-three-loader 和 Vue-3d-loader 都是用于在 Vue 应用中集成 3D 功能的库，但是 Vue-three-loader 更专注于 Three.js 场景的创建和渲染，而 Vue-3d-loader 更专注于加载和渲染 3D 模型文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值