Vue
关注
分享
扫一扫
文章平均质量分 55
xixihaha_coder
坚持就是胜利！
展开
-
32_elementUI组件库
32_Vue UI组件库elementUI网址 https://element.eleme.cn/#/zh-CN安装 npm i element-ui快速上手main.jsimport Vue from "vue";import App from "./App.vue";//完整版引入 占的内存相较而言较大import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue原创 2022-03-07 21:33:29 · 470 阅读 · 0 评论 -
31_路由器的两种工作模式
31_路由器的两种工作模式# 地址栏的 /#/问题# 写在路由的配置文件中mode:'history' # 去掉/#mode:'hash' # 默认 保留/#原创 2022-03-07 21:32:37 · 211 阅读 · 0 评论 -
30_路由守卫
30_路由守卫01_前置路由守卫//该文件专门用于创建整个应用的路由器import VueRouter from "vue-router";//引入组件import About from "../components/About";import Home from "../components/Home";import News from "../pages/News";import Message from "../pages/Message";import Detail from ".原创 2022-03-07 21:30:52 · 150 阅读 · 0 评论 -
29_编程式路由导航
29_编程式路由导航< router-link >实际上是< a >链接 这个可以用来处理 < button >跳转代码演示Message.vue<template> <div> <ul> <li v-for="m in messageList" :key="m.id"> <button @click="pushSho原创 2022-03-07 21:30:07 · 221 阅读 · 0 评论 -
28_路由
28_路由npm i vue-router@301_基本路由效果实现1.创建文件夹router 创建文件 index.js//该文件专门用于创建整个应用的路由器import VueRouter from "vue-router";//引入组件import About from '../components/About'import Home from '../components/Home'//创建并暴露一个路由器export default new VueRouter({原创 2022-03-07 21:28:58 · 452 阅读 · 0 评论 -
27_Vuex
文章目录27_Vuex01_简介02__求和案例_纯Vue版03_vuex工作原理04_搭建vuex环境05__求和案例_vuex版06_getters配置项07_mapState和mapGetters使用08_mapAction和mapMutation使用09_模块化+命名空间27_Vuex01_简介什么时候使用Vuex1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同一状态一个词: 共享02__求和案例_纯Vue版<template> <div>原创 2022-03-07 21:26:38 · 331 阅读 · 0 评论 -
26_插槽
26_插槽01_默认插槽App.vue<template> <div class="container"> <Category title="美食" > <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /> </Category> <Category title="游戏" > <ul>原创 2022-03-06 14:30:28 · 227 阅读 · 0 评论 -
25_配置代理
25_配置代理第一种 （有瑕疵）npm i axiosApp.vue<template> <div> <button @click="getStudents">获取学生信息</button> </div></template><script>import axios from "axios";export default { name: "App", methods: {原创 2022-03-06 14:29:33 · 294 阅读 · 0 评论 -
24_过渡与动画
24_过渡与动画动画效果<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition :appear="true"> <!-- 让他一出来就出现动画 --> <h1 v-show="isShow" >你好啊</h1> </transition>原创 2022-03-06 14:28:37 · 89 阅读 · 0 评论 -
23_全局事件总线&消息订阅与发布
23_全局事件总线任意组件间通信main.jsnew Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus=this //安装全局事件总线 }}).$mount('#app')School.vue<template> <div class="demo"> <h2>学校名称:{{schoolName}}</h2>原创 2022-03-06 14:27:49 · 368 阅读 · 0 评论 -
22_组件自定义事件
22_组件自定义事件App.vue<template> <div> <img src="./assets/logo.png" alt="logo" /> <School></School> <!-- 第一种写法 once 就生效一次 子给父传递数据--> <Student v-on:atguigu.once="getStudentName"></Student>原创 2022-03-06 14:25:57 · 151 阅读 · 0 评论 -
21_webStorage
21_webStoragetodoList本地存储<template> <div id="root"> <div class="todo-container"> <div class="todo-warp"> <MyHeader :addTodo="addTodo" /> <List :todos="todos" :checkTodo="checkTodo" :deleteTo原创 2022-03-06 14:24:14 · 107 阅读 · 0 评论 -
20_TodoList案例
20_TodoList案例组件化编码流程（通用）1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据: 2.1.数据的类型、名称是什么? 2.2.数据保存在哪个组件?3.交互——从绑定事件监听开始图示代码演示App.vue<template> <div id="root"> <div class="todo-container"> <div class="todo-warp">原创 2022-03-06 14:23:32 · 1354 阅读 · 0 评论 -
19_Vue脚手架
19_Vue脚手架vue-cli初始化脚手架第一步（仅第一次执行）: 全局安装@vue/cli npm install -g @vue/cli第二步 切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx第三步 启动项目 npm run sreve备注如出现下载缓慢请配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org关于不同版本的Vue:1.vue.js 与vu原创 2022-02-28 10:06:04 · 950 阅读 · 2 评论 -
18_组件
18_组件组件的定义非单文件组件 （不推荐）一个文件中包含有n个组件。<!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-原创 2022-02-28 10:04:12 · 258 阅读 · 0 评论 -
17_生命周期
17_生命周期引出生命周期<!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" /&g原创 2022-02-28 10:02:39 · 118 阅读 · 0 评论 -
16_自定义指令
16_自定义指令自定义指令_函数式<!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.原创 2022-02-28 10:01:10 · 75 阅读 · 0 评论 -
15_内置指令
15_内置指令v-text指令<!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" /原创 2022-02-28 10:00:09 · 69 阅读 · 0 评论 -
14_过滤器
14_过滤器<!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" /> &原创 2022-02-28 09:58:31 · 79 阅读 · 0 评论 -
13_收集表单数据
13_收集表单数据<!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" />原创 2022-02-28 09:58:02 · 117 阅读 · 0 评论 -
12_列表渲染
12_列表渲染v-for<!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" /&原创 2022-02-28 09:56:55 · 362 阅读 · 0 评论 -
11_条件渲染
11_条件渲染<!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" />原创 2022-02-28 09:56:16 · 75 阅读 · 0 评论 -
10_绑定样式
10_绑定样式<!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"> <tit原创 2022-02-27 17:56:35 · 78 阅读 · 0 评论 -
09_监视属性
09_监视属性天气案例<!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">原创 2022-02-27 17:55:50 · 105 阅读 · 0 评论 -
08_计算属性
08_计算属性姓名案例1 methods实现<!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.原创 2022-02-27 17:55:06 · 79 阅读 · 0 评论 -
07_事件处理
07_事件处理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">原创 2022-02-27 17:54:35 · 106 阅读 · 0 评论 -
06_数据代理
06_数据代理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">原创 2022-02-27 17:53:48 · 83 阅读 · 0 评论 -
05_理解mvvm
05_理解mvvm<!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"> <原创 2022-02-27 17:52:57 · 81 阅读 · 0 评论 -
04_el与data的两种写法
04_el与data的两种写法<!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">原创 2022-02-27 17:52:07 · 85 阅读 · 0 评论 -
03_数据绑定
03_数据绑定<!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"> <tit原创 2022-02-27 17:51:24 · 82 阅读 · 0 评论 -
02_Vue模板语法
02_Vue模板语法<!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"> <原创 2022-02-27 17:50:55 · 74 阅读 · 0 评论 -
01_hello小案例
Vue是简介是一套用于构建用户界面的渐进式JavaScript框架谁开发的 尤雨溪Vue的特点1.采用组件化模式，提高代码复用率、且让代码更好维护。2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。01_hello小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2022-02-27 17:50:12 · 519 阅读 · 0 评论 -
浅识Vue
Vue本笔记由 b站狂神说java 视频获取Angular: Google 收购的前端框架，由一群Java程序员开发，其特点是将后台的 MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念**【虚拟DOM】**用于减少真原创 2021-10-23 22:10:00 · 190 阅读 · 0 评论