vue学习总结
澜色海湾
这个作者很懒,什么都没留下…
展开
-
15.0、vue-路由钩子和404
15.0、vue-路由钩子和404404也就时请求的页面找不到,那该如何只用前端来完成这项功能呢?首先创建一个Notfound.vue组件如下:<template> <h1>404您访问的页面走丢了</h1></template><script>export default { name: 'Notfound'}</script><style scoped></style&g原创 2022-03-01 21:35:57 · 151 阅读 · 0 评论 -
14.0、vue-参数传递及重定向
14.0、vue-参数传递及重定向Main.vue文件中传递数据id:1<template><el-row class="tac"> <el-col :span="6"> <h5>默认颜色</h5> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @clo原创 2022-03-01 21:30:58 · 1070 阅读 · 0 评论 -
13.0、veu-路由嵌套
13.0、veu-路由嵌套在components文件夹下创建一个user文件夹在该文件夹下创建一个usermanager.vue用户信息管理组件。usermanager.vue文件如下<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="1原创 2022-03-01 21:22:50 · 70 阅读 · 0 评论 -
12.0、vue+elementUI的学习与使用
12.0、vue+elementUI第一步:首先创建一个项目hello-vue,执行vue init webpack hello-vue安装依赖,我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件#首先创建一个项目hello-vuevue init webpack hello-vue# 进入工程目录cd hello-vue#安装 vue-routernpm install vue-router --save-dev#.原创 2022-03-01 21:18:40 · 174 阅读 · 0 评论 -
11.0、vue-router路由
11.0、vue-router路由第一步:安装vuerouter,要在当前项目下的控制台执行这段命令行用npm install vue-router --save-dev第二步:导入vue-routerimport VueRouter from 'vue-router'//显示声明使用VueRouterVue.use(VueRouter);由于这里npm-router安装后一直报错无法运行,好像是版本的问题。所以我直接重新创建了一个新项目,并且在创建项..原创 2022-03-01 21:13:27 · 469 阅读 · 0 评论 -
10.0、vue-webpack安装学习与使用
10.0、webpack安装学习与使用第一步:安装webpackwebPack是一款模块加载器兼打包工具,它能把各种资源,如JS/JSX/ES6/SASS/LES/图片等都作为模块来处理和使用。安装:npm install webpack -gnpm install webpack-cli -g测试安装成功:·webpack -v·webpack-cli -v第二步:创建一个项目webpack-study第三步:用IDEA打开这个项..原创 2022-03-01 21:04:47 · 501 阅读 · 0 评论 -
9.0、vue-cli环境配置超详细教程
9.0、vue-cli环境配置超详细教程第一步:进入http://nodejs.cn/download/ 官网下载第二步:安装,无脑点击下一步即可,安装的位置可以自行选择第三步:以管理员身份打开命令提示符窗口,输入以下代码查看版本、以及是否安装成功node -vnpm -v第四步:安装Node.js淘宝镜像加速器(cnpm)这样子的话,下载会快很多!# -g就是全局安装npm install cnpm -g#或使用...原创 2022-02-27 16:24:12 · 1150 阅读 · 0 评论 -
8.0、vue自定义事件内容分发
8.0、vue自定义事件内容分发如果想要删除数据就必须要操作vm对象里的data属性,但是在component里定义的函数并不能直接的访问vm对象里的data数据,所以我们得利用view视图层来获取vm对象里的data数据。首先我们知道Vue是双向绑定:视图层可以访问component层,component也能访问视图层。视图层能访问vm层,vm层也能访问view视图层。所以我们可以这么做,删除按钮绑定component层methods中remove()函数,然后用this.$emi原创 2022-02-27 16:04:37 · 83 阅读 · 0 评论 -
7.0、vue-插槽slot
7.0、插槽slotvue-slot插槽使用方法代码如下:<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>vuetest7</title> <script src="https://cdn.jsdelivr.net/原创 2022-02-27 16:01:34 · 225 阅读 · 0 评论 -
6.0、vue的计算属性
6.0、vue的计算属性前端vuetest6.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vuetest6</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></sc原创 2022-02-27 15:58:17 · 79 阅读 · 0 评论 -
5.0、Vue-Axios异步通信
5.0、Vue-Axios异步通信由于我们的Vue专注于前端视图层,所以通信层交给Axiox、Ajax去实现就好首先创建一个data.json文件{ "name": "java", "url": "https://www.baidu.com/", "page": 1, "isNoProfit": true, "address": { "street":"临安", "city": "中国", "country": "杭州" }, "link原创 2022-02-27 15:56:13 · 131 阅读 · 0 评论 -
4.0、Vue组件讲解
4.0、Vue组件讲解<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>vuetest4</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vu原创 2022-02-27 15:53:20 · 387 阅读 · 0 评论 -
3.0 、Vue双向绑定
3.0、Vue双向绑定用v-model来双向绑定<!DOCTYPE html><html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:msg="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>vuetest3</title> <.原创 2022-02-27 15:51:48 · 334 阅读 · 0 评论 -
2.0、Vue的基本语法
2.0、Vue的基本语法本节内容主要介绍一下if、for、还有事件的绑定if和else if和else语法的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vuetest2</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/原创 2022-02-27 15:50:25 · 102 阅读 · 0 评论 -
1.0、初识Vue
1.0、初识Vueauetest1.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>auetest1</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>原创 2022-02-27 15:44:15 · 67 阅读 · 0 评论