Vue
文章平均质量分 79
初见766
这个作者很懒,什么都没留下…
展开
-
Vue中vuex解决非父子通信的问题
vuex很好的解决非父子通信的问题。1.定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式( 数据、方法 )。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以前是把数据和方法定义在每个对应的页面中。但是现在我们可以很好的利用vuex和模块化把数据和方法放在一个公共的池子中。很好的管理你的数据 。stategettersmutations: commitactions : diptachmodules2.安装原创 2021-12-07 18:08:36 · 680 阅读 · 0 评论 -
Vue中的数据交互axios
数据交互ajax: 原理必须要能说出来流程即可。jquery_ajax。 我们promise要结合它Promise + async函数的前端的主要工作:1. 画页面、2. 请求ajax (后端给你接口和说明书)有node环境和mysql环境。工作中就不需要搭建mysql环境了。0.搭建后端接口项目 环境 node + mysql( phpstudy ) 打开phpstudy启动mysql 使用navicate导入数据库 先创建一个数据库( xi原创 2021-12-07 18:06:43 · 836 阅读 · 0 评论 -
Vue 路由总结
传参1:querystring方式传参/path?key1=value1&key2=value2querystring方式传参在接收页面使用 $route.query 接收传参2:params动态路由,先修改路由配置{ path:'/path/:id'}传了一个id为10的参数。/path/10在接收页面使用 $route.params命名路由{ path:'/path', name:'routename'}$push( {原创 2021-12-07 18:03:46 · 223 阅读 · 0 评论 -
PC端,移动端 组件库 element-ui iview vant
1-1.element-ui网址:Element - The world's most popular Vue UI framework1.定义基于vue2.0的桌面端组件库,一般使用于pc端中后台系统的开发2.安装 npm npm i element-ui -S3.引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI原创 2021-12-07 18:02:57 · 1757 阅读 · 0 评论 -
Vue中的导航守卫
全局守卫: 大门口的保安 router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截 router.afterEach((to,from)=>{}) //所有路由进来之后 : 了解 路由独享守卫:各个楼(每一个公司:前台) 每一个路径就是可以定义一个路由的独享守卫: 角色的判断( A座是网易,B座是360 ) beforeEnter(to,from,next){} //守卫path 组件内部守卫:秘书 beforeRouteEnter(to,fro原创 2021-12-02 10:09:55 · 473 阅读 · 0 评论 -
Vue中路由的基本操作
1)编程导航push() 向历史记录添加一个记录,保存历史记录 router-link跳转就是pushreplace() 目标页面地址把当前地址给替换掉,不保存历史记录 支付、登录成功、注册成功go(-1) 返回经常在做判断的时候要用的。 <button @click="$router.go(-1)">返回</button> <ul> <!-- 点击进入商品详情 --> <li @click...原创 2021-12-02 10:06:38 · 314 阅读 · 0 评论 -
Vue路由
路由一一对应的映射关系 。访问路由返回对应的.vue组件页面。思想就是照搬后端的路由思想 。1.路由介绍2.路由安装npm i vue-router3.基本使用页面级的.vue组件(pages或views),不是公共组件(components)// 项目中肯定要使用路由的。// 渐进式的框架//1. 安装 npm i vue-router//2. 引入vue-router 并实例化import VueRouter from 'vue-router'Vue.use原创 2021-11-30 15:55:57 · 88 阅读 · 0 评论 -
Vue基本语法
v-if与v-show的生命周期影响再深刻认识 v-if和v-show以及组件的生命周期 v-if对组件的生命周期每次都会执行一遍 而v-show只会执行一遍。1. scoped 样式的问题我们需要为一个.vue中的style添加一个scoped属性,以保证样式也是局部的。<style scoped></style> app.vue中的样式是全局的 <style>.box{ margin:20px; ...原创 2021-11-30 15:55:04 · 102 阅读 · 0 评论 -
Vue组件
1.过渡动画(了解)1.一般对元素的添加,修改或者删除时,需要使用过渡动画2.在大型应用中,使用过渡动画一般在导航切换3.在vue中使用过渡动画的地方: v-if(条件判断) v-show(条件展示) 动态组件(component)总结:一般实现过渡动画需要结合CSS样式.1-1 transition组件在vue中系统提供了一个组件为transition,将需要实现过渡动画的元素被transition组件进行包裹即可.语法:原创 2021-11-30 15:53:44 · 186 阅读 · 0 评论 -
Vue生命周期
1.生命周期表示的是一个vue实例对象的一个轮回。人的生命周期。一个月内要办理出生证明以及去派出所办户口、打疫苗从技术上来考虑,这8个生命周期就是8个函数,也叫生命周期钩子函数 。不需要自己手动调用,它是在相应的时机上自动触发的,语法上这8个函数不在methods中。 beforeCreate 创建之前 created 创建完成 : 最早发送ajax的地址在这里 beforeMount 挂载之前 mounted 挂载完成 : 有些项目中,一些开发者也在这原创 2021-11-30 14:09:26 · 205 阅读 · 0 评论 -
Vue指令综合案例及表单
1. 指令综合案例-信息表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2021-11-30 14:08:05 · 220 阅读 · 0 评论 -
回顾及vue初识
第1阶段:html css 。 浮动、定位布局、mdeia(百分比)、响应式、flex、rem布局<tagname key="value"></tagname><tagname key="value" />selector{ key:value;}第2阶段:得保证嵌套标签要合理 ,逻辑思维,编程思维。声明变量、数据类型、运算符(算术、赋值、比较、逻辑、三目)、 声明函数( 参数、this )、分支语句( if,switch ),..原创 2021-11-30 14:05:18 · 165 阅读 · 0 评论