Vue
文章平均质量分 86
Vue -- 狂神
CodeJiao
今之视昔,亦如后世视今。
展开
-
Vue -- 自定义404页面 、 路由钩子、路由钩子与异步请求
1. Vue--404和路由钩子项目结构路由模式有两种hash:路径带 # 符号,如 http://localhost/#/loginhistory:路径不带 # 符号,如 http://localhost/login1.1 使用hash路由模式(推荐)修改路由配置,代码如下:export default new Router({ mode: 'history', routes: [ ]});1.2 自定义置404页面1.2.1 创建一个NotFound.v原创 2021-05-22 23:32:20 · 2333 阅读 · 39 评论 -
Vue -- 参数传递及重定向
1. Vue--参数传递及重定向这里演示如果请求带有参数该怎么传递1.1 第一种取值方式 {{$route.params.key}}用的还是路由嵌套例子的代码 修改一些代码 这里不放重复的代码了路由嵌套代码1.1.1 修改路由配置,主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符 { path: '/user/profile/:id', // name 属性是给路由起名 待会路由跳转 可以直接用原创 2021-05-22 16:06:14 · 2428 阅读 · 5 评论 -
Vue -- 路由嵌套
1. Vue--路由嵌套嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。搭建环境同上(只是把Login组件删除了)1.1 新建Profile子组件(个人信息)Profile.Vue<template> <h1>个人信息</h1></template><script> export default { name: "UserProfile" }</script><style原创 2021-05-22 11:56:49 · 605 阅读 · 2 评论 -
Vue -- vue+elementUI开发示例
1. Vue--vue+elementUI开发示例elementUI官网1.1 创建工程1、创建一个名为 vue-ele-ui 的工程 vue init webpack vue-ele-ui2、安装依赖, 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件 #进入工程目录cd vue-ele-ui#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i原创 2021-05-22 10:56:32 · 2411 阅读 · 7 评论 -
Vue: vue-router路由
1. Vue: vue-router路由原创 2021-05-21 15:17:07 · 151 阅读 · 3 评论 -
Vue -- webpack使用
1. Vue--webpack使用本质上, webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle.Webpack是当下最热门的前端资源模块化管理和打包工具, 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到原创 2021-05-21 13:59:22 · 775 阅读 · 2 评论 -
Vue -- 第一个vue-cli程序
1. Vue--第一个vue-cli程序Vue的开发都是要基于NodeJS,实际开发采用Vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目~~ElementUIICE1.1 什么是vue-clivue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就原创 2021-05-21 00:37:39 · 1499 阅读 · 19 评论 -
Vue -- 自定义事件
1. Vue--自定义事件据项在Vue的实例中, 但删除操作要在组件中完成, 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了, Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题; 使用this.$emit(‘自定义事件名’, 参数) , 操作过程如下:1.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-05-20 16:41:06 · 182 阅读 · 1 评论 -
Vue -- 插槽slot
1. Vue--插槽slot在Vue.js中我们使用<slot>元素作为承载分发内容的出口,作者称其为插槽,可以应用在组合组件的场景中;1.1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--view层,模板--原创 2021-05-20 10:17:13 · 298 阅读 · 5 评论 -
Vue -- 计算属性
1. Vue--计算属性计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数:简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!1.1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti原创 2021-05-20 09:47:50 · 121 阅读 · 4 评论 -
Vue -- Axios异步通信 、v-cloak解决闪烁问题、生命周期
1. Vue--Axios异步通信Axios是一个开源的可以用在浏览器端和node.JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下:从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API[JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF(跨站请求伪造)Axios中文文档1.1 为什么要使用Axios由于Vue.js是一个视图层框架并且作者(尤雨溪)原创 2021-05-20 01:04:44 · 446 阅读 · 3 评论 -
Vue -- 组件
1. Vue--组件组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板1.1 第一个Vue组件注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建,vue模板文件的方式开发,以下方法只是为了让大家理解什么是组件。1.1.1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</原创 2021-05-18 13:57:42 · 114 阅读 · 1 评论 -
Vue -- 双向数据绑定
1. Vue--双向数据绑定Vue.js是一个MVVM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化。这也算是Vue.js的精髓之处了。1.1 在表单中使用双向数据绑定你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇, 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-model会忽略所有表单元素原创 2021-05-18 12:32:54 · 3104 阅读 · 24 评论 -
Vue:v-on监听事件
1. Vue--v-on监听事件v-on监听事件事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件, 可以绑定到Vue中的methods中的方法事件!1.1 代码示例<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Tit原创 2021-05-18 09:53:36 · 256 阅读 · 3 评论 -
Vue -- 基础语法指令(v-bind,v-if,v-else,v-else-if,v-for)
1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for,v-on)我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似, 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联, 所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!1.1 v-bind...原创 2021-05-17 01:06:20 · 555 阅读 · 6 评论 -
Vue -- 第一个Vue程序
1. Vue--第一个Vue程序【说明】IDEA可以安装Vue的插件!注意:Vue不支持IE 8及以下版本, 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。1.1 Vue下载地址开发版本包含完整的警告和调试模式:https://yuejs.org/js/vue.js删除了警告, 30.96KB min+gzip:https://vuejs.org/js/vue.min.jsCDN<script src=“htt原创 2021-05-17 00:01:58 · 268 阅读 · 10 评论 -
Vue -- Vue入门、前端知识体系、MVVM
1. Vue入门1.1 Vue概述Vue 是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合。SOC原则:关注点分离原则1.2 前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中“大前端”是绕不开的一门必修课。Java后台程序员认识前端、了原创 2021-05-16 21:34:14 · 474 阅读 · 1 评论