Vue进阶

最新推荐文章于 2024-05-08 23:00:38 发布
最新推荐文章于 2024-05-08 23:00:38 发布
阅读量214 收藏
点赞数 7
分类专栏： 前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beyondydx/article/details/100176947
版权

今天接着上篇博客内容继续讲一讲vue的计算属性、侦听属性、vue的生命周期函数、vue的数据请求和vue的组件

1. 计算属性

任何复杂的业务逻辑，我们都应当使用计算属性。
任何复杂的业务逻辑，我们都应当使用计算属性。
任何复杂的业务逻辑，我们都应当使用计算属性。

重要的事说三遍

在特定的条件下，计算属性要优于方法

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算

计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算

原始数据： {{ msg }} <br /> 计算属性的值： {{ computedMsg }} - {{ computedMsg }} -{{ computedMsg }} <br /> 
方法实现： {{ reversemsgfn() }} - {{ reversemsgfn() }}- {{ reversemsgfn() }} 

computed: { // 计算属性 ，计算属性可以依据data中的初始数据转换而来，可以像data中的数据一样使用，一般为函数，返回一个值 
  computedMsg () { 
	console.log('computed') // 执行一次 
	  return this.msg.split('').reverse().join('') 
	} 
}, 
methods: { 
  reversemsgfn () { 
    console.log('methods') // 执行3次 return this.msg.split('').reverse().join('') 
	} 
}

2. 侦听属性（监听属性）

vue提供了检测数据变化的一个属性 watch

在特定条件下，计算属性要优于侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

3. vue的生命周期函数

在这里插入图片描述
使用方法 — 4个before，4个ed，创造，装载，更新，销毁

beforeCreate () { console.log('在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。') },

created () { console.log('在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。') },

beforeMount () { console.log('在挂载开始之前被调用：相关的 render 函数首次被调用。') },

mounted () { console.log('el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。')},

beforeUpdate () { console.log('数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。') },

updated () { console.log('由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。') },

beforeDestroy () { console.log('实例销毁之前调用。在这一步，实例仍然完全可用。') },

destroyed () { console.log('Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。') }

vue的生命周期周期，就好像我们的人生历程，这样会更好理解点，如下（星号表示运用频率）：

初始化阶段
beforeCreate(){} // 准备怀孕
created(){} // 怀上了 *******************************************
beforeMount(){} // 准备生
mounted(){} // 生下来了 *************************************************
运行时阶段
beforeUpdate(){} // 每天都在长大
updated(){} ************************
销毁阶段
beforeDestroy(){} // 回光返照
destroyed(){} // 撒手人寰 ************

综上所述，会在 created 或者 mounted 中请求数据
如果必须使用dom操作，那么可以在 mounted 和 updated 中

4. vue中数据的请求

ajax — 数据请求 — 前后端分离（前后端耦合、不分离开发— 传统的系统架构）— 跨域
js 原生请求：
XMLHttpRequest / ActiveXObject
使用xhr发送一个json请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("options, error");
};

xhr.send();

jQuery请求：
jQuery $.ajax() / $.get() / $.post() / $.load() / $.getScript()

vue请求：
vue/react fetch / axios — 基于es6的promise

4.1 fetch

fetch API 是基于 Promise 设计,旧浏览器不支持 Promise，需要使用 polyfill es6-promise

fetch 不需要额外的安装什么东西，直接就可以使用

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("options, error");
});

写成ES6的箭头函数：

fetch(url).then(response => response.json()) //将promise 对象转换成json对象，供我们使用
  .then(data => console.log(data)) //得到请求的数据，执行后续的业务逻辑
  .catch(e => console.log("options, error", e)) //请求失败打印出错误信息

Get & Post：

<script>
  new Vue({
    el: '#app',
    mounted () {
      /**
      * fetch 可以直接使用，不需要引入任何东西
      * fetch()  --- 返回的是 promise 对象
      *  .then(res => res.json()) 将promise 对象转换成json对象，供我们使用
      *  .then(data => {}) 得到请求的数据，执行后续的业务逻辑
      */
      fetch('https://www.daxunxun.com/douban?start=40', {
        method:'get',
        // body: JSON.stringify({
        //   start: 40
        // })
      }).then(res => res.json()).then(data => {
        console.log(data)
      })

      fetch('https://www.daxunxun.com/users/login', {
        method:'post',
        // body: JSON.stringify({
        //   username: '1322574****',
        //   password: '123456'
        // })
        body: 'username=1322574****&password=123456'
      }).then(res => res.json()).then(data => {
        console.log(data)
      })
    }
  })
</script>

4.2 axios

1.必须得安装之后才能使用
$ npm install axios

2.导入，在哪使用就在哪daoru
import axios from ‘axios’

3.请求数据

<script>
  new Vue({
    el: '#app',
    mounted () {
      axios.get('https://www.daxunxun.com/banner').then(res => {
        console.log(res.data)
      })

      axios.post('https://www.daxunxun.com/users/login', {
        username:'1322574****&',
        password: '1234567'
      }).then(res => {
        console.log(res.data)
      })
    }
  })
</script>

5. 组件

组件其实也是一个Vue的实例 ---- 组件是可复用的 Vue 实例

1、注册一个组件
2、使用组件 ---- 就像HTML标签一样使用即可

5.1 注册组件

5.1.1 全局注册组件

new Vue之前写的组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件初体验</title>
</head>
<body>
  <div id="app">
    <!-- 3、使用组件 -->
    <my-header></my-header>
  </div>
</body>
<script src="vue.js"></script>
<script>
  // 全局注册组件
  // 1、定义组件
  const MyHeader = {
    template: `<header>头部</header>`, 
  }

  // 2、全局注册组件
  Vue.component('my-header', MyHeader)

  new Vue({
    el: '#app'
  })
</script>
</html>

如果页面结构复杂，template选项不好维护

抽离template选项的内容,template标签应该放到和 body以及script标签同级

<template id="header"> 
  <header>头部</header> 
</template>
<script>
  // 全局注册组件
  // 1、定义组件
  const MyHeader = {
    template: `<header>头部</header>`, 
  }

  // 2、全局注册组件
 Vue.component('my-header', { 
   template: '#header'
  })

  new Vue({
    el: '#app'
  })
</script>

5.1.2 局部注册组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>组件初体验</title>
</head>
<body>
  <div id="app">
    <!-- 3、使用组件 -->
    <my-header></my-header>
  </div>
</body>
<template id="header">
  <header>
    这里是头部
  </header>
</template>
<script src="vue.js"></script>
<script>
  // 局部注册组件

  // 1、定义组件
  const MyHeader = { 
    template: '#header'
  }

  new Vue({
    el: '#app',
    // 2、局部注册组件
    components: {
      'my-header': MyHeader
    }
  })
</script>
</html>

5.2 组件之间传值

5.2.1 父组件给子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>父子组件</title>
</head>
<body>
  <div id="app">
    <!-- <my-content test = "测试" :count="100" :flag="true" :tip="tip"/> -->
    <my-content :count="100" :flag="true" :tip="tip"/>
  </div>
</body>
<template id="content">
  <div>
    我这里是内容区域 --- {{ test }} -- {{ count }} --- {{ flag }} --- {{ tip }}
  </div>
</template>
<script src="vue.js"></script>
<script>
  // 组件的名称不能和模板的id同名
  /**
   * 父组件在调用子组件的地方  <my-content />
   * 添加一个自定义的属性      <my-content test = "测试"/>
   * 属性的值就是你要传递给子组件的值             "测试"
   *    如果属性的值是number类型，boolean类型，或者是变量，需要使用到绑定属性
   *    <my-content test = "测试" :count="100" :flag="true" :tip="tip"/>
   * 在子组件定义的地方       const Content = {}
   * 给他添加一个选项 props   const Content = { props: }
   * props的值可以为数组以及对象
   * 如果是数组, 元素则为父组件中自定义的属性名     
   *    ['test', 'count', 'flag', 'tip']
   * 在子组件中就可以通过 你自定义的属性名 得到父组件传递过来的数据
   *      如果是对象，对象的形式有两种写法
   *        写法一：验证传递数据的有效性  ----  可能父子组件不是一个人写的，如果数据类型不对，会报出警告，可以及时调整
   *          props: {
                test: String,
                count: Number,
                flag: Boolean,
                tip: String
              }
            写法二：既要验证数据的类型，又要设定属性的默认值，如果默认值是对象或者是数组，值为一个函数
              props: {
                test: {
                  type: String,
                  default: '测试数据了' 
                }
              }
              eg: 
              props: {
                list: {
                  type: Object,
                  default: function () {
                    return {}
                  }
                }
              }
   * */
  const Content = {
    template: '#content',
    // props: ['test', 'count', 'flag', 'tip']
    // props: {
    //   test: String,
    //   count: Number,
    //   flag: Boolean,
    //   tip: String
    // }
    props: {
      test: {
        type: String,
        default: '测试数据了' // 如果父组件有这个属性，那么就用父组件的值，没有这个属性，直接使用这个值
      }
    }
  }

  new Vue({
    el: '#app',
    data: {
      tip: '提示'
    },
    components: {
      'my-content': Content
    }
  })
</script>
</html>

5.2.2 子组件给父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>父子组件</title>
</head>
<body>
  <div id="app">
    <my-content @myevent="getData"/>
  </div>
</body>
<template id="content">
  <div>
    我这里是内容区域
  </div>
</template>
<script src="vue.js"></script>
<script>
  /**
   * 父组件调用子组件的地方，给他绑定一个自定义的事件, 事件不要加（）
   *      <my-content @myevent="getData"/>
   * 在父组件选项methods中实现此事件，默认参数为你将从子组件得到的值
   *    methods: {
          getData (val) { // val为从子组件中获取到的值
            console.log(val)
          }
        },
      
      在子组件中，可以是生命周期钩子函数，也可以是组件自己的事件 去 触发 父组件中的自定义事件
          this.$emit('myevent', 10000)
   **/
  const Content = {
    template: '#content',
    mounted () {
      this.$emit('myevent', 10000)
    }
  }

  new Vue({
    el: '#app',
    data: {},
    methods: {
      getData (val) { // val为从子组件中获取到的值
        console.log(val)
      }
    },
    components: {
      'my-content': Content
    }
  })
</script>
</html>

5.2.1 非父子（兄弟）组件之间传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>非父子组件传值</title>
</head>
<body>
  <div id="app">
    <my-list></my-list>
    <my-count></my-count>
  </div>
</body>
<template id="list">
  <ul>
    <li>111<button @click="add">+1</button></li>
    <li>222<button @click="add">+1</button></li>
    <li>333<button @click="add">+1</button></li>
    <li>444<button @click="add">+1</button></li>
    <li>555<button @click="add">+1</button></li>
  </ul>
</template>
<template id="count">
  <div>
    总量是：{{ num }}
  </div>
</template>
<script src="vue.js"></script>
<script>
  /**
   *  非父子组件传值 ---- 兄弟组件传值                   （邮差与信的故事）
   *  ------------------ 中央事件总线传值  1. const bus = new Vue()
   * 
   *  先要确保 收信 的那个人是存在的
   *  然后写信的人 写信 给邮差
   *  邮差给送
   * 
   *  // 此处一定要注意this指向，可以使用 => 
   *  2.在接收端通过 bus.$on('收信信号'， function (val) {
   * 
   *  })
   * 
   *  3.在发送端通过 bus.$emit('收信信号', val)
   * */
const bus = new Vue()

const List = {
  template: '#list',
  methods: {
    add () {
      bus.$emit('count-event', 1)
    }
  }
}
const Count = {
  template: '#count',
  data () {
    return {
      num: 0
    }
  },
  mounted () { // 一般情况下接收都使用 生命周期钩子函数
    bus.$on('count-event', (val) => { // 此处要注意this指向，可以使用 箭头函数 =>
      console.log(val)
      this.num += val
    })
  }
}

new Vue({
  el: '#app',
  components: {
    'my-list': List,
    'my-count': Count
  }
})
</script>
</html>

5.3 动态组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件</title>
</head>
<body>
  <div id="app">
    <button @click="tem='my-a'">AAA</button>
    <button @click="tem='my-b'">BBB</button>
    <button @click="tem='my-c'">CCC</button>
    <keep-alive include="a,b">
      <component :is="tem"></component>
    </keep-alive>
    
  </div>
</body>
<template id="acom">
  <div>
    <input type="text" placeholder="a组件">
  </div>
</template>
<template id="bcom">
  <div>
    <input type="text" placeholder="b组件">
  </div>
</template>
<template id="ccom">
  <div>
    <input type="text" placeholder="c组件">
  </div>
</template>
<script src="vue.js"></script>
<script>
  /**
   * keep-alive 
   *  保留组件的状态，避免组件的重新渲染  ---  类似于手机软件使用中按了home键之后应用程序的状态
   *  添加include 可以 只给部分组件保留状态，需要定义组件时添加name属性
   * 
   * 每个组件都会有 两个生命周期钩子函数
   *    activated()     正在用的
   *    deactivated()   后台的
   * */
const Acom = {
  name: 'a',
  template: '#acom',
  activated () {
    console.log(' a 正在被使用')
  },
  deactivated () {
    console.log(' a 被雪藏了')
  }
}
const Bcom = {
  name: 'b',
  template: '#bcom',
  activated () {
    console.log(' b 正在被使用')
  },
  deactivated () {
    console.log(' b 被雪藏了')
  }
}
const Ccom = {
  template: '#ccom',
  activated () {
    console.log(' c 正在被使用')
  },
  deactivated () {
    console.log(' c 被雪藏了')
  }
}

new Vue({
  el: '#app',
  data: {
    tem: 'my-a'
  },
  components: {
    'my-a': Acom,
    'my-b': Bcom,
    'my-c': Ccom
  }
})
</script>
</html>

如果每一个组件内部含有 表单元素 ，默认在动态组件切换的时候，表单数据会有所丢失

可以使用 包裹动态组件，避免组件的重新渲染（手机按home键并不是退出了系统的应用程序）

如果书写形式为 ,那么表示只有 a 和 b 的组件的装填会被保留，而其余的组件都是先卸载，需要的时候再装载， a 和 b为定义组件的时候的name选项的值

组件的钩子函数有两大对比

销毁 创建 ---- 动态组件 — 不会触发 activated 和 deactivated
显示 隐藏 ------ 动态组件 + keep-alive — 所有的组件都只创建了一遍

生命周期钩子函数
beforeCreate
created
beforeUpdate
updated
beforeMount
mounted
beforeDestroy
destroyed
activated ----- 跟keep-alive配合使用 — 组件激活时调用
deactivated ----- 跟keep-alive配合使用 — 组件停用时调用

今天的分享就到这里，vue项目构建内容请听下回分解，内容如有错误，欢迎评论，指教

BeyondYdx
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue进阶篇.pdf
05-09
vue基础知识，文章内部存在案例、分析以及js底层原理。深入解剖前端模块之间的原理，是读者更容易上手和编写，为后续自我提升帮助很大。让读者在轻松阅读中得到良好的提升
vue3中使用第三方评论畅言，以及单点登录配置
qq_29184685的博客
08-30 1365
vue3、畅言、第三方评论系统、单点登录
vue jquery性能_六项提高性能的jQuery最佳实践
cune1359的博客
06-28 557
编者注：本文是我们的代码优化系列的一部分，我们在其中探讨如何优化编码以提高效率，以期成为更好的编码人员。 jQuery是当今最流行JavaScript库之一。 它的API非常易于使用，导致学习曲线并不那么陡峭。 许多项目使用jQuery代码，而不是直接使用原始JavaScript来引入动态功能。 但是jQuery也有缺点。 如果不慎使用它所基于的语言，可能会导致一些性能问题 。 这篇文...
vue学习（六）之vue实例的数据请求
weixin_43841308的博客
02-06 457
vue实例的数据请求 数据请求基础知识 常见的数据请求类型？ get post jsonp jsonp的实现原理 由于浏览器的安全性限制，不允许Ajax访问端口号、域名、协议的数据接口，浏览器认为这种访问不安全 可以通过动态创建script标签的形式，把script的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的...
Vue中使用JQuery加载js
江黎
10-09 598
mounted: function() { let _this = this; // 加载技术文件 $.getScript('/ace/assets/js/ace.min.js'); } },
vue 项目中的this.$get,this.$post等$的用法
热门推荐
jjw_zyfx的博客
10-29 2万+
vue官网上有这么一句话 结合案例： // 基于axios 封装的http请求插件 const axios = require('axios'); /** * 以下这种方式需要调用Vue.use方法 调用的时候调用 this.$fetch, this.$post, this.$axios, this.$put, this.$del 方法 */ function coverForm...
vue 百度地图的使用
weixin_66496801的博客
08-12 247
vue中使用百度地图
vue-cli中使用mathjax
shi0804yi的博客
12-10 909
解决mathjax动态修改页面和在vue-cli中使用 我在第三方公司返回的数据中发现要用到mathjax，也是第一次碰到，于是百度了它的用法。 第一个遇到的问题是引入cdn后可以渲染初始的页面，但当动态渲染后，修改的页面就不会被mathjax重 新排版，下面是我的解决方案 updated() { $.getScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML",
Vue 进阶实战培训.pdf版
06-06
Vue 进阶实战培训
day01-VUE进阶
10-29
day01-VUE进阶
动态加载script文件的两种方法
12-09
动态加载script到页面大约有俩方法 第一种就是利用ajax方式，把script文件代码从后台加载到前台，然后对加载到的内容通过eval()执行代码。第二种是，动态创建一个script标签，设置其src属性，通过把script标签插入到页面head来加载js，相当于在head中写了一个[removed][removed],只不过这个script标签是用js动态创建的 比如说是我们要动态地加载一个callbakc.js，我们就需要这样一个script标签： 代码如下: [removed][removed]
Vue进阶笔记讲义.docx
08-13
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链...
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
包含vue基础篇、vue进阶篇、Vue模块篇三部分
vue 异步外链解决方案
xuelang532777032的博客
08-07 1035
nuxt，vue交流群 群153181864  前端交流群 ，绝对原创，转载请附上 本微博链接。 场景：  一般外部JS我们都可以直接模块化成.vue  引入到 对应组件的 ，但是也会有那种需要动态获取的  JS   比如 百度地图.js  站长统计.JS这种， 这就尴尬了，好，怎么破，最粗暴的方案就是 直接  index.html 来一刀  引入了，这也是目前最流行的方法，也有比较温柔的方法...
JQuery中的$.getScript()、$.getJson()和$.ajax()方法
热爱思考、活力满满、开朗爱笑的年轻人
09-27 7192
$.getScript()有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，jQuery代码如下：$(document.createElement("script")).attr("src","test.js").appendTo("head");或者$("<script type='tex
vue中通过script的形式使用外部库
kinding的博客
12-05 8564
如：index.html中： &lt;script src="http://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;!--高德地图 --&gt; &lt;script src="//webapi.amap.com/maps?v=1.3&amp;key=e1dedc6bdd765d46693986ff7ff969f4"&gt;&
$.getScript()方法
weixin_30642267的博客
04-20 739
<!DOCTYPE html><meta charset="utf-8"><html><head> <title>1111</title> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script><...
可视化大屏比例
最新发布
梦寻汝的博客
05-08 164
【代码】可视化大屏比例。
根据vue进阶出一个目录
02-27
以下是一个基于 Vue 进阶的目录结构示例： ``` src/ ├── assets/ # 资源文件目录，如图片、字体等 ├── components/ # 公共组件目录，可供多个页面复用 ├── mixins/ # 全局 mixin 目录 ├── plugins/ # Vue 插件目录 ├── router/ # 路由配置目录 ├── store/ # Vuex 状态管理目录 ├── utils/ # 工具函数目录 ├── views/ # 视图目录，存放页面组件 ├── App.vue # 根组件 └── main.js # 入口文件，挂载根组件 ``` 上述目录结构中，各个目录的作用分别是： - assets：存放静态资源文件，如图片、字体等； - components：存放公共组件，可供多个页面复用； - mixins：存放全局 mixin，可以在组件中使用； - plugins：存放 Vue 插件，如 axios、vuex 等； - router：存放路由配置文件； - store：存放 Vuex 状态管理相关的文件； - utils：存放工具函数，可在项目中任意位置使用； - views：存放各个页面组件； - App.vue：根组件，所有的子组件都在它下面挂载； - main.js：入口文件，负责初始化 Vue 实例，并挂载根组件。 这样的目录结构可以帮助你更好地组织代码，使得项目更易于维护和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值