vue
文章平均质量分 65
记录vue的知识点
堵车了
这个作者很懒,什么都没留下…
展开
-
vue组件之间通信方式汇总
如果是非响应式的书写,对于非基本数据类型来说,只是改变对象里面的某个属性是可以的,但是这种修改会很难知道是哪个组件对属性进行了修改,比较难以追踪,需要谨慎。其他的不建议修改,会造成数据不一致。这种方式是获取组件本身的对象,与组件之间引用放置的顺序由很大关联,当改变组件引用的顺序时,需要同时修改获取原组件的下标,使用时需要谨慎考虑。在组件上添加一个ref属性,给与这个组件一个标志,通过该标志去获取组件本身的实例,相比较与方式三需要确定组件的引用顺序,该方式没有该苦恼,但是在给ref值的时候注意值不要重复。原创 2024-03-09 19:49:05 · 989 阅读 · 0 评论 -
6.axios的使用
1.axios的常用的配置参数baseURL:将自动加在url前面,除非url是一个绝对 URLtimeout:请求超时时间headers:请求头method:请求方式url:发送请求的URLparams:发送请求的参数,与get方式一起使用data:发送请求的参数,与post方式一起使用responseType;服务器响应的数据类型,默认为json2.axios发送请求的示例1.axios发送get请求axios({ url, method: 'get', param原创 2021-01-31 17:03:24 · 105 阅读 · 0 评论 -
5-5.vuex的modules
1.modules的作用vuex使用的是单一状态树管理,如果将所有的状态集中在一个对象管理时,当应用复杂时,store对象将会变得很臃肿。modules属性就是让我们能根据需求分割成不同的模块去管理,里面也有state,actions,getters和mutations这些属性2.modules的写法与其他属性的对比2-1.state属性1.不同点要获取模块里面的数据,需要指定是哪个模块里面 的数据。2.代码展示Home.vue页面<template> <div cla原创 2021-01-31 13:45:55 · 178 阅读 · 0 评论 -
5-4.vuex的actions
1.actions的作用当我们修改共享变量的数据时有异步操作(如等待多少秒,调用后端的接口等),我们不该直接在multations里面直接进行,需要在actions里面实现异步操作,再在mutations里面修改数据。2.基本使用1.代码展示vuex的index.jsimport { createStore } from 'vuex'export default createStore({ state: { count: 10 }, getters: { }, mu原创 2021-01-17 14:23:17 · 96 阅读 · 0 评论 -
5-3.vuex的getters
1.getters的作用vuex的getters属性所扮演的角色基本和vue的computed属性相同,都是计算属性,当你需要对原始数据进行过滤或计算时可以使用该属性进行处理。可分为两种方式使用:不需要传参:通过属性访问,结果可以缓存需要传参:通过方法访问,结果不可以缓存2.不传参的使用方式1.代码展示...原创 2021-01-17 13:22:23 · 175 阅读 · 0 评论 -
5-2.vuex的state和mutations
1.单一状态树的含义vuex在使用时应该只创建一个store对象去管理共享的数据,不应该创建多个store对象。2.state和mutations的作用state:用于存储共享变量。mutations: 用于修改共享变量的值3.基本使用1.代码展示vuex的index.jsimport { createStore } from 'vuex'export default createStore({ state: { count: 100 }, mutations: {原创 2021-01-17 12:17:05 · 104 阅读 · 0 评论 -
5-1.vuex的基本概念
1.vuex的作用官方话语:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单的理解就是多个组件共享变量时...原创 2021-01-16 17:18:16 · 90 阅读 · 0 评论 -
4-9.keep-alive和router-view的结合使用
1.keep-alive的作用keep-alive是vue的一个内置的组件,其作用是包裹动态的组件时,当组件不活跃时(就是不展示这个组件时)不再销毁该组件,而是缓存该组件。保留组件的状态避免再次活跃时重新加载。2.效果展示1.代码展示App.vue页面<template> <div id="nav"> <button @click='jumpHome'>home</button> <button @click='jumpAb原创 2021-01-16 14:14:55 · 1193 阅读 · 0 评论 -
4-7.vue-router的嵌套写法
实现方式1.代码展示配置页面import { createRouter, createWebHistory } from 'vue-router'const Home = () => import('../views/Home.vue')const Home1 = () => import('../views/Home1.vue')const Home2 = () => import('../views/Home2.vue')const About = () => i原创 2020-12-26 15:37:22 · 91 阅读 · 0 评论 -
4-6.vue-router的this.$router和this.$route
this.$router的含义官方解释:通过在 Vue 根实例的 router 配置传入 router 实例。this.$router可以看成是一个全局的路由对象,它能够在任何组件中使用。一般是用来做自定义的代码跳转,与router-link具有相同的功能this.$router的使用1.代码展示<template> <div id="nav"> <button @click='jumpHome'>home</button> &l原创 2020-12-26 13:51:17 · 666 阅读 · 0 评论 -
4-5.view-router的懒加载
懒加载的好处官方描述:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。不使用路由懒加载的话,整个项目的组件都会打包到一个.js文件中去,当前端去向服务器请求时,可能出现资源过大导致页面有延迟或空白,当使用懒加载后,会将每个组件打包成一个js中,当前端需要哪个页面时,只需要加载对应的.js文件即可。懒加载的写法(推荐)1.代码展示import { createRouter,原创 2020-12-26 12:29:13 · 272 阅读 · 0 评论 -
4-4.vue-router的router-link和router-view
4-4.vue-router的router-link标签router-link的作用支持用户在具有路由功能的应用中导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的a标签。router-link属性的介绍1.to属性表示跳转的目标地址代码展示在这里插入代码片...原创 2020-12-21 23:37:09 · 1406 阅读 · 0 评论 -
4-2.vue-router的两种模式:hash和history
4-2.vue-router的两种模式:hash和historyvue项目是一个单页面的富应用。就是整个项目只有一个html,通过js来处理相关的事情。在进行页面的交互时,整个页面是不会刷新的。实现该效果就是通过上面的两种方式hash模式hash模式是url里面包含#,改变#后面的hash值不会去向服务器发送请求,也就不会刷新整个页面。通过vue-router这个前端路由绑定该hash值和组件,监听hash值得变化去展示不同的组件内容。测试方式:location.hash = ‘aaa’his原创 2020-12-20 14:42:55 · 591 阅读 · 0 评论 -
3-3.vue的组件component:子组件向父组件传递数据
3-3.vue的组件component:子组件向父组件传递数据子组件向父组件传递数据是通过$emit来实现的,当子组件 触发某个事件后就可以通过$emit来发射一个自定义事件,父组件监听到该事件后获取数据1.代码展示<body> <div id='app'> <p>{{fatherTitle}}</p> <cpn @childgive='fathershow'></cpn> </div>原创 2020-12-20 12:23:38 · 789 阅读 · 0 评论 -
3-2.vue的组件component:父组件向子组件传递数据
3-2.vue的组件component:父组件向子组件传递数据1.代码展示<body> <div id='app'> <cpn :childtitle='title'></cpn> </div> <template id='cpn'> <div> {{childtitle}} </div> </template> <script&g原创 2020-12-20 11:51:31 · 479 阅读 · 0 评论 -
3-1.vue的组件component:组件的基本使用
3-1.vue的组件component:组件的基本使用标题vue组件的作用组件的含义其实就是对一些功能进行封装。vue的项目开发都是以组件化的形式去开发的,一个项目一般都是划分成多个组件,然后拼接而成的。1.代码展示(最原始的实现方式,不建议这样写)<body> <div id='app'> <!-- 3.使用组件 --> <cpn></cpn> </div> <template id='cp原创 2020-12-19 13:57:39 · 2495 阅读 · 0 评论 -
2-3.vue的实例属性:computed和methods
2-3.vue的实例属性:computed和methodsmethods属性的作用methods属性就是在vue实例和组件里面定义方法的,当要进行一些列复杂操作封装成方法时,就是在methods里面去定义。1.代码展示<body> <div id='app'> <p>{{count}}</p> <button @click='increment'>改变数据</button> </div>原创 2020-12-19 13:21:18 · 250 阅读 · 0 评论 -
2-2.vue的实例属性:data
2-2.vue的实例属性:datadata属性的作用data属性的作用是存储vue实例或组件里面的数值。在vue的实例中它是以一个对象的方式(多个键值对),在组件中它是一个函数,通过函数返回一个对象。data在vue的实例里面使用1.代码展示<body> <div id='app'> <P>{{message}}</P> </div> <script> const app = new Vue({原创 2020-12-19 12:42:16 · 3019 阅读 · 0 评论 -
2.1vue实例属性:el和name属性
2.1vue实例属性:el和name属性el属性el被限制使用在创建vue实例时使用,它的主要作用是去挂载一个页面上存在的DOM元素,简单点说就是和页面的一个元素绑定,然后对该元素能够进行操作,和jquery操作元素差不多,只是换了一个形式。1.代码展示<style> .colorStyle { color:red; }</style><body> <div id='app'> <p :class="{color原创 2020-12-13 15:46:37 · 1559 阅读 · 0 评论 -
1-9.vue指令:v-slot指令与插槽
1-9.vue指令:v-slot指令v-slot的作用v-slot又叫做插槽,其主要是用在组件中,起到一个占位的作用。当组件复用时,某些地方对于不同地方组件的使用需要展示不同内容时就使用v-slot,当具体使用后根据自己的需求进行替换即可。v-slot的使用1.代码展示<body> <div id='app'> <cpn1> <!-- 替换成按钮 --> <button>我想替换成按钮展示</bu原创 2020-12-13 15:13:50 · 5061 阅读 · 0 评论 -
1-8.vue指令:v-model指令
1-8.vue指令:v-model指令v-model的作用v-model用在表单元素上面,如最常用的text,select,textarea等标签,其主要是与这些表单元素进行双向绑定。双向绑定的含义是当该表单手动改变值或改变绑定元素的值得任意一方发生改变时,这两个都会发生改变。没理解,可以看下面代码展示。v-model的使用1.代码展示<body> <div id='app'> <label for="text"> <input t原创 2020-12-12 13:30:52 · 387 阅读 · 0 评论 -
1-7.vue指令:v-if和v-show指令
1-7.vue指令:v-if和v-show指令v-if指令的作用v-if指令是根据其表达式里面的值是否为真来展示相应的内容,一般与v-else-if和v-else指令一起使用,最典型的使用场景是不同账号之间登录的切换。v-if指令的使用1.代码展示<body> <div id='app'> <a @click='aClick' href="#">切换登录方式</a> <div> <div v-if="原创 2020-12-12 12:22:00 · 252 阅读 · 0 评论 -
1-6.vue指令:v-on指令
1-6.vue指令:v-on指令v-on的作用v-on是绑定事件监听器。通过触发某个特定事件(如页面点击事件)时,触发相应的行为(打印语句或跳转等等)。v-on就是在绑定特定事件自行处理相关结果。v-on的语法糖为:"@"。v-on的使用1.代码展示<body> <div id='app'> <!-- 语法展示 --> <button v-on:click="btnClick">{{message}}</button>原创 2020-12-06 17:37:33 · 181 阅读 · 0 评论 -
1-5.vue指令:v-text和v-html
1-5.vue指令:v-text和v-html作用这两个指令都是用来渲染一个标签里面的内容的。区别在于v-text的内容当做一个纯文本来处理,v-html是当做一个html的标签插入进来的。使用1.代码展示<body> <div id='app'> <h2 v-text="textContent"></h2> <!-- 等价于mustache语法 --> <h2>{{textContent}}<原创 2020-12-06 16:36:58 · 93 阅读 · 0 评论 -
1-4.vue指令:v-for指令
1-4.vue指令:v-for指令v-for的作用v-for是用来遍历,主要可以遍历我们常用的一下四个数据类型,number/string/array/object,其中使用最多的是遍历array和object。遍历number和string(不常用)1.语法书写<li v-for="item in data">{{item}}</li>2.代码展示<!DOCTYPE html><html lang="en"><head>原创 2020-12-06 16:23:16 · 1139 阅读 · 0 评论 -
1-3.vue指令:v-bind指令
1-3.vue指令:v-bind指令v-bind的作用v-bind的主要作用是用来绑定标签里面的属性值,如标签里面的href的值,class里面需要添加的一些class,style里面要添加的一些样式等v-bind的语法糖语法糖的含义就是对某个内容的简写,v-bind的语法糖为":"。v-bind的基本使用1.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-05 14:12:03 · 429 阅读 · 0 评论 -
1-2.vue指令:mustache语法、v-pre、v-once指令
1-2.vue指令:mustache语法mustache语法的解释mustache语法主要运用于前端的框架中,根据数据的变化动态的展示数据里面的值。通过双花括号({{data}})来实现。vue里面展示数据通过mustache语法来展示v-pre指令的使用1.作用在vue里面使用该标签后,将展示原始的mustache标签,不会动态的展示数据2.代码展示<!DOCTYPE html><html lang="en"><head> <meta cha原创 2020-12-05 13:04:20 · 201 阅读 · 0 评论 -
1-1.vue的基本使用
1-1.vue的基本使用1.使用步骤下载vue.js文件引入vue.js文件创建一个div,给div一个id属性,用于绑定vue实例创建一个vue实例,el属性的值为div的id,将两则绑定添加一个data属性,里面加一个数据在div里面用mustache语法展示数据2.代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=原创 2020-12-05 12:19:01 · 97 阅读 · 0 评论