Vue学习

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue配置

  • Babel 将ES6转换成浏览器能识别的ES%

  • TypeScript js超集，vue3.0以后使用ts编写

  • Router 路由

  • vuex

  • CSS Pre-processors css解析器

  • Linter / Formatter 文本规范

  • router路由有history与hash模式

    • hash模式：当前浏览器访问都有#

    • history模式：不需要#，但后端需要服务器支持

项目目录结构

  • node-model 放置依赖

  • public 放置入口公共依赖

  • src 开发目录

  • package.json 项目配置文件

    • "scripts": {} vue脚手架启动和打包

    • "dependencies":{} 打包完后依赖的文件

    • "devDependencies":{} 开发环境的依赖，打包后使用的生产环境就不需要了

  • vue.config.js 跨域处理，定义全局变量，按需打包等需求都可在此处配置

    • module.exprots ={ devServer: { port:8080,//端口 host:'localhost',//服务ip地址 open:true//配置浏览器自动访问，启动服务后会自动打开浏览器 proxy: //配置跨域}}

Xxx.vue

  • <template></template> html模板

  • <script> </script> js脚本，

    • export default{} 其中的data(){return {}} 返回json数据给template

    • 承上，created(){axios.get('url',callback)}需配置 向服务器发送ajax异步请求(vue add axios)，把回调函数中收到的数据写入同级的data方法中，data方法将数据返回给template

    • method:{} 函数定义template中的事件，如翻页

  • <style></style> css样式

原理

  • router/index.js ，引入view目录下的视图进行映射，相当于servlet中的web.xml，将view/*下的Xxx.vue映射到App.vue

  • view/*下的所有视图在App.vue上切换

  • App.vue上面是不同的view下的视图，下层是components下的视图。App.vue充当的是localhost:8080 层次

跨域(两种解决方案)

  1. 后端SpringBoot解决

    • 实现WebMvcConfigurer接口，重写addCorsMappings()，进行注册

  2. 前端

插件

  • axios :使用ajax需要配置的插件

nginx

  • 服务

    • 启动服务。./nginx

    • 正常关闭服务。./nginx -s quit

    • 强制关闭服务。./nginx -s stop

    • 重新加载配置文件。./nginx -s reload

Vue 集成 Element UI

Element UI 后台管理系统主要的标签：

  • le-container: 构建整个页面框架

  • el-aside：构建左侧菜单

  • el-menu：左侧菜单内容，常用属性

  • el-main：中间展示数据的区域，内容是view下的自定义的页面

    • default-openeds 默认展开的菜单，通过菜单的 index 值来关联

    • default-active 默认选中的菜单，通过菜单的 index 值来关联

  • el-submenu：可展开的子级菜单，常用属性：

    • index：菜单的下标，文本类型，不能是数值类型

  • template：对应的 el-submenu 的菜单名，两者相辅相成

  • i：设置菜单图标，通过 class 属性设置。

    • el-icon-message

    • el-icon-setting

    • el-icon-menu

  • el-menu-item：菜单的子节点，不可再展开，常用属性：

    • index：菜单的下标，文本类型，不能是数值类型

Vue router 来动态构建左侧菜单

  • 导航1

    • 页面1

    • 页面2

  • 导航2

    • 页面3

    • 页面4

menu 与 router 的绑定

  1. 标签添加 router 属性，才能将每个路由与页面跳转链接绑定

  2. 页面中添加 标签，它是一个容器，动态渲染你选择的 router

  3. 标签的 index 值就是要跳转的 router

实现前后端表单查询展示

  1. table组件 ，及分页组件

  2. 在export default{ method:{}}中定义翻页事件

  3. 在export default{created(){}}方法中向服务器发送异步请求，将回调数据封装至export default{data(){return{}}} 中

  4. 后端对findAll()方法传入 PageRequest 参数，将会返回分页查询数据

  • 新概念

    • Vue 表单 :page-size(每页显示的行数) 与:total(总记录数) 属性结合，自动算出总页数，并实现分页逻辑

    • @click 点击事件，@current-change 翻页事件

实现添加数据功能

  • 前端

    • :module 属性，绑定数据:rules 绑定校验规则

注意

  1. export default{} 中调用函数常会用到this，是个未显示声明的隐示对象，默认指的是当前的Xxx.vue对象实例，但在回调函数中，this指的是包含回调函数的函数方法，注意区分

  2. 重定向

    • router包下路由重定向 redirect:'跳转到的path名'

const routes = [
    {
        path: '/',
        name: '品牌管理',
        component:Index,
        redirect: '/brandManager',
		}]

- 具体页面绑定事件转发。在export default{}中的Method:[]中为事件绑定跳到具体页面 `_this.$router.push('/brandManager')`
- `router` 与`route` ，`router` 是所有Xxx.vue页面的路由调用者，可以用`$router.push()`进行页面跳转(path)，传参(query) 。`route` 是具体Xxx.vue对象，可以用`$route` 获取具体页面的属性，或者接收`$router` 传来的参数，调用this.$route.query.id

以上是 Vue学习 的全部内容， 来源链接： utcz.com/z/376373.html

回到顶部