Vue学习笔记（11）

最新推荐文章于 2023-09-21 16:03:05 发布

jc_caterpillar

最新推荐文章于 2023-09-21 16:03:05 发布

阅读量407

点赞数

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/jc15274630894/article/details/129622104

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章介绍了Vue的两种路由管理方式——hash模式和history模式，以及Element-UI这个基于Vue的UI组件库，包括其特点、使用方法，如通过npm或CDN引入，并强调了学习Vue2所需掌握的关键技术点。

摘要由CSDN通过智能技术生成

11.1 路由管理方式

Vue提供了两种主要的路由管理方式：history模式和hash模式。

hash模式

在Vue的hash模式下，应用程序的URL包含一个＃符号，后面跟着一个路径。在这种模式下，前端路由器使用浏览器的锚点来管理应用程序的URL。当用户在应用程序中导航时，页面会自动更新，但URL路径不会随之改变。这种模式不需要服务器端配置，因为hash符号后面的路径不会发送给服务器端。

history模式

在Vue的history模式下，应用程序的URL看起来像普通的网站链接，不包含＃符号。在这种模式下，前端路由器使用HTML5 History API来管理应用程序的URL。当用户在应用程序中导航时，页面会自动更新，并且URL路径也会随之改变。然而，需要服务器端配置支持，以确保用户可以在浏览器中输入URL直接访问应用程序的页面。

11.2 Element-UI

11.2.1 介绍

Element-UI是一个基于Vue的UI组件库，由饿了么前端团队开发维护，提供了丰富的UI组件和常用的业务组件，包括表单、弹框、菜单、表格、日期选择器等。

Element-UI的特点如下：

易于使用：Element-UI提供了丰富的组件，使用简单明了，同时还提供了详细的文档和示例代码，方便开发者学习和使用。
可定制性：Element-UI的组件样式和主题都可以进行自定义，方便开发者根据实际项目需求进行定制。
兼容性：Element-UI兼容不同版本的Vue.js，同时支持多种浏览器和移动设备，保证了组件的可用性和兼容性。
国际化支持：Element-UI提供了多语言支持，可以轻松实现多语言切换。
开源免费：Element-UI是一款完全开源免费的UI组件库，可以自由使用和修改。

Element-UI还提供了一些常用的业务组件，如表单验证、富文本编辑器、图片上传等，可以方便开发者快速构建实际项目。同时，Element-UI还有完善的社区支持和活跃的维护团队，保证了组件库的稳定性和更新性。

11.2.3 使用

使用Element-UI，需要先安装和引入它的相关文件，引入Element-UI的方式有两种：使用npm安装和引入Element-UI、使用CDN引入Element-UI。

使用`npm`安装和引入`Element-UI`

在命令行中进入项目根目录，使用以下命令安装Element-UI：

npm install element-ui --save

在main.js文件中引入Element-UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在需要使用Element-UI组件的.vue文件中，按需引入需要的组件:

<template>
  <div>
    <el-button type="primary">Element-UI按钮</el-button>
  </div>
</template>

<script>
  import { Button } from 'element-ui'

  export default {
    components: {
      'el-button': Button
    }
  }
</script>

在上面的代码中，通过import语句引入了Button组件，并在components选项中注册了el-button组件，以便在模板中使用。

除了按需引入组件外，也可以在main.js文件中全局引入Element-UI的全部组件，如下所示：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

这样就可以在整个应用程序中使用Element-UI的全部组件了,以上是使用npm安装和引入Element-UI的方法。

使用`CDN`引入`Element-UI`

使用CDN引入Element-UI可以减少本地文件大小和请求次数，提高应用程序的加载速度。

使用CDN引入Element-UI的步骤：

在HTML文件中引入Element-UI的CSS和JS文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>使用CDN引入Element-UI</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="app.js"></script>
  </body>
</html>

在上面的代码中，引入了Element-UI的CSS文件和JS文件。其中，CSS文件来自于unpkg.com，JS文件也可以从unpkg.com引入，也可以从Element-UI官网下载后引入。

在应用程序的JS文件中使用Element-UI组件：

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  template: '<div><el-button type="primary">{{ message }}</el-button></div>'
})

在上面的代码中，使用了Button组件，并在模板中显示了一条消息。

使用CDN引入Element-UI的好处是，不需要安装和配置npm包管理器，也不需要打包和压缩文件，可以直接在浏览器中运行应用程序。但是需要注意，使用CDN引入Element-UI会增加应用程序与外部网络的依赖性，可能会影响应用程序的稳定性和安全性。

11.3 总结

学习Vue2需要掌握以下内容：

Vue2的基本语法和概念，如模板语法、组件、指令、生命周期等。
Vue2的数据绑定，包括单向数据绑定、双向数据绑定、计算属性、侦听器等。
Vue2的事件处理，包括事件绑定、事件修饰符、按键修饰符等。
Vue2的组件化开发，包括组件的定义、组件之间的通信、动态组件等。
Vue2的路由管理，包括路由的定义、路由参数、路由钩子函数等。
Vue2的状态管理，包括Vuex的基本概念、状态、mutations、actions等。
Vue2的构建工具和打包工具，包括Webpack、Vue CLI等。
Vue2的性能优化，包括缓存、异步组件、懒加载等。