前端学习之Vue项目使用

目录

  • 一、Vue项目介绍
  • 二、组件相关知识点
  • 三、路由相关知识点
    • 路由配置

上一篇我们说了Vue项目平台搭建以及Vue项目目录说明,这篇我们说一下如何使用Vue项目进行前端项目开发

一、Vue项目介绍

  • Vue是一个单页面页用,我们用到的html在public文件夹下

  • 入口文件

  • 根组件

  • 页面组件

  • 路由配置文件

二、组件相关知识点

'''
1、vue项目的请求生命周期:main.js完成环境的加载与根组件的渲染;router的index.js完成路由映射
2、<router-view />标签作为路由映射的页面组件占位符
3、组件的生命周期钩子:
     一个组件,会在页面中渲染,也会销毁存放到内存(不渲染) => 加载组件到销毁组件
     从加载一个组件到销毁该组件,整个生命周期中存在很多特殊的时间节点(组件要创建了,创建成功了,要加载了,加载成功了,
     要更新数据了,数据更新完毕了,要销毁了,销毁成功了),这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成在这些时间
     节点需要完成的业务逻辑

     生命周期钩子函数书写的位置:钩子直接作为vue实例的成员

     重点:1、书写位置  2、每个钩子节点时的特性
'''

VUE生命周期状态图

三、路由相关知识点

'''
1、<router-link></router-link>来完成路由的跳转(可以带参数可以不带参数, 需要在路由中配置)
    eg: <router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>
    eg: <router-link :to="{name: 'book-detail', params: {pk: book.id}}">-->
            {{ book.title }}-->
        </router-link>-->

2、this.$router来完成路由的跳转:push() | go()  (可以带参数可以不带参数, 需要在路由中配置)
    eg: this.$router.push(`/book/detail/${id}`);
    eg: this.$router.push({
            name: 'book_detail',
            params: {pk : id},
            });
    eg: this.$router.go(-1); // go的参数是正负整数,代表历史记录前进或后退几步

3、this.$route来完成路由的传参
    eg: let pk = this.$route.params.pk; // 拿到路由传递的参数

'''

路由配置

router-> index.js

// 路由规则表:注册页面组件,与url路径形成映射关系
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/index',
        redirect: '/'   // 重定向
    },
    {
        // 路由传参  有名分组 :pk代表是参数
        path: '/book/detail/:pk',
        name: 'book_detail',    // 用-表示连接
        component: BookDetail
    },
]

原文地址:https://www.cnblogs.com/XuChengNotes/p/11863258.html

时间: 2024-10-29 19:08:45

前端学习之Vue项目使用的相关文章

前端学习之Vue

目录 一.Vue框架 为什么学习vue 二.Vue指令 2.1 挂载点 2.2 vue变量 2.3 vue事件 2.4 js的对象 2.5 vue文本指令 2.6 vue过滤器 2.7 vue事件指令 2.8 vue属性指令 2.9 vue表单指令 2.10 vue斗篷指令(了解) 2.11 vue条件指令 vue条件指令案例(重点) 2.12 vue循环指令 vue循环指令案例 三.实例成员 1.el:实例 2.data:数据 3.methods:方法 4.computed:计算 5.watc

【前端学习笔记】项目经验积累(不定期更新)

样式重置-------------------------– /* reset */ body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; } em { font-style:normal; } li { list-style:none; } a { text-decoration:none; } img { border:none; vertical-align:top

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化

强烈推荐 GitHub 上值得前端学习的开源实战项目

强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2.0 管理系统模板 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用 基于 vue + element-ui 的后台管理系统 基于Vue.js + Element UI 的后台管理系统解决方案 基于 Vue(2.5) + vuex + vue-router + vue-axi

团队开发前端VUE项目代码规范

团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二.开发SRC目录: 1.Vuex目录 (状态树配置) 2.Router目录(路由配置) 3.Pages目录 (放置主路由组件 注意命名规范) 4.Common目录 (放置静态文件) 5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息) 6.Api目录 ( 相关全局请求调用配置.

vue学习(1) vue-cli 项目搭建

vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 下载完成后点击安装包安装到自己指定的文件夹 windows + r 打开cmd,在命令行中输入node -v,如果安装成功就可以看到当前node的版本 输入npm -v,可以看到相应的npm的版本 3. 安装vue-cli npm install -g cli 4. 创建cli项目 首先cd进入到你

vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到页面中,初始化效果无意义,无法获取元素. 因此,若需要操作页面中的元素,需在mounted()钩子函数中,此时DOM元素是最新的. 滑动效果成功后,底部的tabbar按钮的样式mui-tab-item需重新命名,因mui中的js代码与组件发生冲突 原文地址:https://www.cnblogs.c

vue学习一:新建或打开vue项目

1.前期准备: node.js环境,安装node npm或者cnpm(npm的淘宝镜像,在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org.由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以需要npm的国内镜像---cnpm) vue-cli 脚手架构建工具,构建项目(在命令行中运行命令 cnpm install -g vue-cli) 2.用vue-cli构建项目

基于vue项目前端报错监控

最近要做一个vue项目的监控,来实时监听正式环境的异常,并且快速响应进行bug修改,其实vue项目报错主要从下面三个方法进行错误收集 1. window.addEventListener('unhandledrejection', event => { event.promise.catch((e) => { utils.errorCatch(e, 3) }) }) 2. window.onerror = function (errorMessage, scriptURI, lineNo, c