![](https://img-blog.csdnimg.cn/20210812221502574.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue学习笔记
vue学习笔记
妙先森
这个作者很懒,什么都没留下…
展开
-
vue-admin-template修改登录功能
找到src/store/modules/user.js找到login方法。注解掉login方法里的代码添加假数据。 const data = { "token": "admin" } commit('SET_TOKEN', data.token) setToken(data.token)找到获取登录用户信息的方法。同样注解掉方法体加上如下代码。 const data = { 'role': 'admin', 'name': 'admin', 'avatar': 'http原创 2021-05-11 20:18:22 · 1936 阅读 · 0 评论 -
vue路由钩子函数(进入和离开钩子函数)
beforeRouteEnter:(to, from, next) => { console.log("准备进入这个路由"); next( console.log("进入路由后要调用的函数") ); }, beforeRouteLeave:(to, from, next) => { console.log("准备离开这个路由"); next( cons.原创 2021-05-04 16:51:12 · 1913 阅读 · 0 评论 -
vue中的传参的两种方式
设置参数: { // 路由路径 path: '/ProductList/:id', // 路由名称 name: 'ProductList', // 跳转的组件 component: ProductList },接收参数方式一:原创 2021-05-04 16:42:55 · 172 阅读 · 0 评论 -
vue中的嵌套路由
嵌套路由(子路由)嵌套路由就是子路由,就是在一个路由里面套一个路由。嵌套路由的实现首先在路由表里通过import将组件引入,然后再将组建注册到路由表上。注册时是在你要嵌套的目标路由里面通过children:[{子路由1},{子路由2},{子路由3}...]进行注册.import Vue from 'vue'import Router from 'vue-router'import Login from '../views/Login'import Home from '../views/H原创 2021-05-04 16:16:22 · 694 阅读 · 0 评论 -
vue中的组件重定向
现在路由表中进行配置 { // 退出登录,路由重定向到登录页 path: '/LoginOut', redirect: '/Login' }// 配置路由export default new Router({ routes: [ { // 路由路径 path: '/Login', // 路由名称原创 2021-05-04 16:15:53 · 702 阅读 · 0 评论 -
vue路由的跳转
1、router-link (声明式路由)1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 <router-link :to="{name:'home', params: {id:1}}转载 2021-05-03 21:38:59 · 141 阅读 · 0 评论 -
webpack入门+路由配置
webpack安装vue init webpack 项目名安装路由npm install vue-router --save-dev安装elementuinpm i element-ui -S原创 2021-05-03 14:17:24 · 705 阅读 · 0 评论 -
vue中的静态资源打包
打包命令,执行打包命令成功后会有生成一个dist目录。npm run build在开发环境下,要想使用静态资源,应该在打包静态资源后将静态资源放入dist文件下然后通过dist文件夹取即可。原创 2021-05-03 11:33:43 · 1108 阅读 · 0 评论 -
vue中的路由
在vue中的路由能够实现其他组件的相互切换,实现路由的步骤分为安装,设置路由组件,创建路由表,注册路由表。路由之间的切换可以使用<router-link to="/去哪个路由">首页</router-link>切换<router-view></router-view>路由视图显示的内容。具体如下:vue路由官方文档:https://router.vuejs.org/zh/安装路由模块npm install vue-router安装完成后在入口mai原创 2021-05-03 00:04:44 · 4203 阅读 · 1 评论 -
vue-axios的使用
vue-axios中文网:http://www.axios-js.com/zh-cn/docs/vue-axios.html安装npm install --save axios vue-axios将下面代码加入入口文件import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)发送axios请求get请求 this.axios({原创 2021-05-02 22:09:01 · 100 阅读 · 0 评论 -
vue组件之间的参数传递
vue组件之间的参数传递:父传子。先在子组件中通过props:[参数]设参,然后在父组件中通过<组件标签 :参数名=“要赋予的值”></组件标签>传参,最后在子组件中接参。props是表示组件的参数部分,那么props有两种写法:props:[“参数列表”]比如:props:[‘prop01’,‘pro02’,‘pro03’,…]props:{参数名1:{type:参数类型,required:是否是必须的参数true或者false,default:默认值},参数名2:{原创 2021-05-02 17:58:58 · 5830 阅读 · 0 评论 -
使用vue -cli脚手架构建项目组件的全局注册与本地注册
全局注册首先创建组件,然后在main.js下通过import导入你写好的vue组件,用Vue.component(“注册组件名”,导入组件的对象)最终的main.js代码import Vue from 'vue'import App from './App.vue'import Header from './components/Header.vue' //导入组件import Content from './components/Conten.vue'import Botton f原创 2021-05-02 00:15:09 · 600 阅读 · 0 评论 -
vue文件的三大组成部分
原创 2021-05-01 23:33:58 · 2416 阅读 · 0 评论 -
vue-cli入门
vue-cli介绍官方介绍:https://cli.vuejs.org/zh/guide/通俗来说就是相当于javaee中的maven,可以帮助我们快速构建一个vue项目。vue-cli的安装vue-cli官网:https://cli.vuejs.org/zh/guide/installation.html安装vue-cli的前提是安装好了node.js。node.js入门(更换淘宝镜像)npm install -g @vue/clinpm:指明使用node.js的命令install:安原创 2021-05-01 22:45:53 · 240 阅读 · 2 评论 -
Node.js入门
一、简介1、什么是Node.js简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。2、Node.js有什么用如果你是一个前端程序员,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择。Node.js 是运行在服务端的 JavaScript,如果你熟悉Javascr原创 2021-01-28 20:42:46 · 140 阅读 · 0 评论 -
vue中的组件 (全局注册和本地注册组件)
Vue的一大特征就是组件化。也就是可以将vue对象作为一个组件反复利用。而想要实现组件化,需要在页面中注册组件:组件注册方法分为全局注册和本地注册。1. 全局注册组件Vue.component(“组件名”,{vue 对象})组件使用的前提是在被绑定了的html元素中才能使用。如果一个div没有被vue绑定,那么div中不能使用之前注册的组件。<body> <div id="app"> <model1></model1>原创 2021-04-30 23:18:01 · 728 阅读 · 1 评论 -
vue对象中的实例属性
Vue的实例属性直接通过vue对象.属性,访问的是来自data或computed的属性。但在vue对象中el、data等等这些键也称为属性,这些属性就是vue的实例属性。ref的使用在vue里,往往使用ref来代替id的使用。可快速通过ref的值来获得页面中的某个元素。<body> <div id="app1"> </div> <div id="app2"> <button type原创 2021-04-30 22:28:37 · 1150 阅读 · 1 评论 -
vue中的循环语句
vue中的循环指令是v-for普通的遍历数组<li v-for="v in arr">{{v}}</li>显示下标遍历数组<li v-for="(v,i) in arr">{{i}},{{v}}</li>v是值,i是下标。遍历json对象数据user数据结构<li v-for="(v,k,i) in user">下标:{{i}} ,键:{{k}} ,值:{{v}}</li>user:{ name原创 2021-04-30 17:08:06 · 4941 阅读 · 1 评论 -
v-if与v-show
vue中的分支语句1. v-if<div v-if="flag"> 看到我了吗!!!</div>当flag的值为true显示div,否则不显示div。2.v-else必须配合v-if使用,和java中的if else一样必须有if才能跟else<div v-if="flag"> 看到我了吗!!!</div><div v-else="flag"> 看到他了吗!!!</div>3.原创 2021-04-30 15:30:53 · 94 阅读 · 1 评论 -
vue中的虚拟dom和diff算法
vue为什么高效如果直接通过js来改变页面上的内容会通过dom树上修改对应的节点,所以效率是比较低的因为要从dom树中去查找这个节点再修改然后再在页面上将改好的dom树重新还原成html页面。而在vue中设置一个虚拟dom,再修改页面内容时他会直接在页面上修改虚拟dom,通过diff算法计算出虚拟dom和原来虚拟dom的区别,然后在原来的虚拟dom基础上对虚拟dom进行修改。这样就没有直接去操作dom树,大大提高了效率。...原创 2021-04-30 14:23:23 · 73 阅读 · 0 评论 -
vue改变样式
通过给html元素的class属性绑定vue中的属性值,得到样式的动态绑定。传统的class=“样式”,通过v-bind:class="{样式:布尔值}"(布尔值=true显示反,false不显示),再通过将布尔值设置成vue中的属性值就可以实现动态绑定了。例子如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2021-04-29 23:46:33 · 1296 阅读 · 0 评论 -
vue中的watch监听
顾敏思义就是起着监听作用的,监控的对象是属性,通过watch给属性绑定函数,当属性的值发生变化时绑定的函数就会执行。调用时有两个参数,第一个newValue是新的值,oldValue是老的值。<script> var vue = new Vue({ el: "#app", data: { message: '123456' }, watch:{ messa原创 2021-04-29 17:58:33 · 155 阅读 · 0 评论 -
vue中的计算属性computed
举一个例子,有一个要将当前时间显示到页面上的需求,我们通常会想到用一个函数返回结果到页面上显示。然后每次要获取的时候就得重新调获取日期的方法,假如要调成千上万个方法,每次都得去重新去重新加载和调用函数,这样效率会很慢,而计算属性可以将调用过一次的函数加载到页面缓存中,这样再次用到这个函数的时候就直接从缓存中获取执行,和redis的缓存机制相似。较为官方的解释:计算属性突出在属性两个字上,他是一个具有计算(函数)功能的属性,简单来说就是一个能够将计算结果缓存起来的属性。<!DOCTYPE html原创 2021-04-29 17:01:57 · 234 阅读 · 0 评论 -
属性绑定v-bind指令
差值表达式是不能写在html标签属性内的,那么如果一定要用vue中的属性作为html标签属性的值可以通过v-bind这个指令实现。比如设置超链接a标签的href的值,可以用v-bind,格式是:v-bind:href=“vue中的属性值”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2021-04-29 14:15:19 · 412 阅读 · 0 评论 -
vue中的事件绑定v-on指令
v-on指令用于事件绑定,v-on:事件名=“函数名(形参)”,可以简写成@事件名=“函数名(形参)”例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-04-29 13:59:57 · 186 阅读 · 0 评论 -
vue差(插)值表达式
插值表达式插值表达式是用在html中被绑定的元素中。目的是用来通过差值表达式来获取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=dev原创 2021-04-28 00:00:01 · 376 阅读 · 0 评论 -
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"> <title>Doc原创 2021-04-27 23:23:37 · 142 阅读 · 0 评论 -
vue学习-MVVM的实现原理
什么是MVVMM(model):model数据层V(view):视图层VM(ViewModel):连接视图和数据的中间件,vue.js就是MVVM中的ViewModel层的实现者。在MVVM结构中是不允许视图和数据直接通信的只能通过View来通信,而VM就定义了一个观察者来实现。DOM Listeners:是监听View的数据发生改变就通知Model的数据改变。Data Bindings:是观察数据的变化,并通知视图对应的内容发生改变。ViewModel能够观察到数据的变原创 2021-04-27 00:06:44 · 619 阅读 · 0 评论 -
使用vue脚手架进行模块化开发
全局安装webpack和vue脚手架npm install webpack -gnpm install -g @vue/clivue脚手架使用webpack模板初始化一个项目npm install vue-cli -gvue init webpack vue-demo初始化成功后如下图运行初始化好了的项目在项目根目录运行两个命令:npm run dev访问http://localhost:8080,结果如下。vue-demo项目,内容介绍build:打包工具webp原创 2021-03-27 23:23:54 · 91 阅读 · 0 评论 -
vue快速入门总结
第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue基础</title></head><body> <div原创 2020-12-21 21:11:37 · 135 阅读 · 0 评论 -
Vue基础应用-实现计数器
计数器效果图实现主要用到的指令有v-text、v-on。基本框架显示框架是左右两个button,中间一个span标签。逻辑就是写两个函数add,min分别设置为右左两个btn的单击事件。事件绑定用到v-on:click的简写@click。实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2020-12-13 17:08:17 · 359 阅读 · 0 评论