【VUE.js】
主要描述vue的学习过程
月疯
得到你最想要的东西,最保险的办法,那就是你能配得上你最想要的东西。机会是留给有准备的人,运气是留给有天赋的努力者。
展开
-
VUE模板ref引用子组件或者子组件的方法
模板Refs通过ref()函数还可以引用页面上的元素或组件使用步骤:1、在setup()中创建一个ref对象并返回它2、在页面上为元素添加ref属性,并设置属性值与创建的ref对象的名称相同3、当页面渲染完成后,可以通过该ref独享获取到页面中对应的DOM元素refs.vue(父组件)<template> <div> <h3 ref='love'>VUE</h3> <comp-vie ref='pk'><..原创 2021-08-26 21:44:18 · 7190 阅读 · 0 评论 -
VUE组合api的钩子函数生命周期
选项API生命周期选项和Composition API之间的映射beforeCreate------>使用setup()created------>使用setup()beforeMount--------->onBeforeMountmounted-------->onMountedbeforeUpdate------------>onBeforeUpdateupdated---------->onUpdatedbeforeUnmout----------.原创 2021-08-26 21:20:21 · 324 阅读 · 0 评论 -
VUE响应工具集
1、isRef检查一个值是否为一个ref对象2、isReactive检查一个对象是否由reactive创建的响应式代理3、isReadonly检查一个对象是否由readonly创建的只读代理4、isProxy检查一个对象是否由reactive还是readonly方法创建的代理5、unref如果参数是一个ref则返回它的value,否则返回参数本身。它是val=isRef(val)?val.value:val的语法糖6、toReftoRef()函数用来将reactive对象的一个属性创.原创 2021-08-26 21:19:05 · 137 阅读 · 0 评论 -
VUE(setup响应式函数系统API)
Vue3.0提供的一组具有响应式特性的杉树式API,以函数的形式提供1、reactivereactive()函数接收一个普通对象,返回该普通对象的响应式代理对象2、refref()函数接收一个参数值,返回一个响应式的数据对象。该对象只包含一个指向内部值的.value属性3、computedcomputed()函数用来创建计算属性,函数的返回值是一个ref的实例4、readonlyreadonly()函数接收一个对象(普通或者响应式),返回一个原始对象只读代理对象5、watchwatc.原创 2021-08-26 19:59:00 · 802 阅读 · 0 评论 -
Vue(setup函数介绍)
Composition Apisetup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。调用时机:setup函数会在beforeCreate钩子之前被调用返回值如果setup返回一个对象,则对象的属性可以在组件模板中被访问参数接收俩个参数setup.vue<template> <div> setup </div></template><script> export defa.原创 2021-08-26 17:53:26 · 1384 阅读 · 0 评论 -
error Mixed spaces and tabs no-mixed-spaces-and-tabs
"extends": "eslint:recommended"配置文件中的属性启用此规则。大多数代码惯例要求使用制表符或空格来缩进。因此,如果单行代码与制表符和空格缩进,通常会出现错误。此规则不允许使用混合空格和制表符进行缩进。此规则的错误代码示例:/*eslint no-mixed-spaces-and-tabs: "error"*/function add(x, y) {// --->..return x + y; return x + y;}...原创 2021-08-26 17:35:51 · 592 阅读 · 0 评论 -
VUE路由Router导航、模式
路由守卫也称为导航守卫,用来对路由导航进行守卫,控制导航的跳转,可以进行权限的控制,分为:1、全局前置守卫:使用router.beforeEach2、全局解析守卫:使用router.beforeResolve3、全局后置钩子:使用router.afterEach//当一个导航出发时,全局前置守卫将被调用router.beforeEach((to,from,next) =>{//to 即将要访问的目标路由对象//from 来源于哪个路由对象//next是一个函数,表示下一步咋么做,.原创 2021-08-23 23:30:04 · 905 阅读 · 1 评论 -
VUE路由传参数
字符串传参数:通过<router-link>的to顺序传递参数俩种方式:1、查询字符串2、Rest风格传参数字符串形式:语法:to="路径?参数名=参数值&参数名=参数值"对向形式:语法: :to="{path:"组件的url路径",query:{key:value,key:value}}"或:to="{name:"组件的路由名称",query:{key:value,key:value}"使用路由对象vm.$route.query获取参数信息路由对原创 2021-08-23 22:56:54 · 6205 阅读 · 3 评论 -
VUE Router路由
使用Vue Router可以在不同的组件间切换,根据不同的url地址,路由跳转到不同的组件提供了俩个路由组件<router-link>:用来定义导航,默认会创建<a>标签,根据指定的url路径跳转到组件<router-view> :用来渲染url路径对应的组件,将组件显示到当前定义的位置写一个路由:index.jsimport { createRouter, createWebHistory } from 'vue-rout...原创 2021-08-23 01:26:56 · 1016 阅读 · 0 评论 -
VUe @cli(axios)跨域访问
CompC的代码:<template> <div> <button @click="sendAjax">发送ajax请求</button> //如果user有值就展示,没值就不展示,因为初次进来user没有值 <div v-if="user"> <p>姓名:{{user.name}}</p> <p>介绍:{{user.bio}}</p> <p>头像:&原创 2021-08-22 23:42:06 · 334 阅读 · 2 评论 -
VUE@/cli数据交互(axios)
数据交互:axios是一个基于Promise的HTTP请求的客户端,用来发送AJAX请求使用axios的步骤:执行npm install axios -S 安装模块通过import axios from 'axios' 导入模块使用axios对象提供的方法发送异步请求全局引入axios并添加到VUE原型中,简化使用在main.js中导入axios模块使用app.comfig.globalProperties添加一个全局属性$http,指向axiosvue3重新打开项..原创 2021-08-22 22:53:28 · 346 阅读 · 0 评论 -
VUE3@clli组件样式、全局组件、配置打包
组件样式:<style scoped lang="less">注册全局组件import {createApp} from 'vue'const app = createApp({})app.componet(组件名,选项定义)<template> <div> <h2>自定义组件</h2> <p>{{ name }}</p> <button @click="chang...原创 2021-08-22 03:01:54 · 488 阅读 · 0 评论 -
Vue3@cli项目结构
单文件组件 :1、以.vue结尾的文件,是vue.js自定义的一种文件格式,称为单文件组件2、一个.vue文件就是一个单独的组件,在文件内封装了该组件相关的html、css和js,实现了对一个组件的封装。3、.vue文件由三部分组成<tenplate><!--html,组件的页面结构--></template><script>//js,组件的功能配置</script><style>/*css...原创 2021-08-22 01:49:01 · 634 阅读 · 0 评论 -
vue3 @/cli脚手架搭建项目
创建一个工作目录:按住shift键,右键此工作目录打开powershell窗口 (s)输入:start cmd就进入到cmd下面输入命令:vue create 项目名称然后按回车!进入预设,按方向键向下选择,最后按回车Vue CLI v4.5.13? Please pick a preset: (Use arrow keys)> Default ([Vue 2] babel, eslint) //这个是vue2.x Defaul...原创 2021-08-22 01:07:18 · 300 阅读 · 1 评论 -
Vue3脚手架安装vue @/cli
@vue/cli是一个Vue脚手架,用来快速构建模块化项目结构系统环境:-node环境:node -v-npm环境:npm -v-nrm环境: nrm ls安装node.js网址:https://nodejs.org/zh-cn/download/这里选择windows64位.msi格式安装包.msi和.zip格式区别:.msi是Windows installer开发出来的程序安装文件,它可以让你安装,修改,卸载你所安装的程序。说白了.msi就是Windows ins.原创 2021-08-21 01:27:53 · 384 阅读 · 0 评论 -
Vue3动态组件、缓存组件、分发组件
1、动态组件Vue提供了全局的内置组件,这些组件主要完成的都是功能封装动态组件、缓存组件、分发组件多个组件使用同一个挂载点,然后动态地在他们之间切换,称为动态组件用法:<component :is=""></component>使用js属性动态绑定组件,决定那个组件被渲染<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...原创 2021-08-19 20:26:37 · 1525 阅读 · 1 评论 -
VUe3组件传值
1、组件间的数据传递默认情况下,每个组件实例都是独立的,组件间无法直接访问数据因此需要组件间的数据传递,也称为组件间的通讯分类:父组件向子组件的数据传递子组件向父组件的数据传递a、父向子组件传递数据父向子传递数据步骤:1、父组件在调用子组件时,以属性绑定的方式将要传递的数据绑定在子组件标签上2、在子组件对象中,使用props选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据<!DOCTYPE html><html>...原创 2021-08-19 19:25:46 · 732 阅读 · 0 评论 -
Vue3组件化
Component组件是可复用的Vue实例,且带有一个名字,可以把组件作为自定义元素来使用可以将项目中重复出现的页面结构定义为Vuew的组件实例,或将特殊功能封装成组件:组件分为:全局组件和局部组件全局组件,在所有Vue实例中都可以使用通过应用程序实例app的component()方法来定义语法:app.component(组件名,选项对象)1、全局组件:<!DOCTYPE html><html> <head> <meta ch.原创 2021-08-19 19:02:37 · 475 阅读 · 0 评论 -
VUE3搞一下数据录入
环境搭建:Vue3、bootstrap4.js、bootstrap4.css、jquery.min.js工具:google chrome、Hbuilder项目结构:index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../boo...原创 2021-08-18 19:38:42 · 660 阅读 · 0 评论 -
Vue3实例属性、实例方法
//通过Vue实例对象可以直接访问的属性,称为实例属性 实例属性都以$开头 vm.$el:当前Vue实例使用的根dom元素 vm.$data:当前Vue实例观察的数据对象 vm.$options:当前Vue实例的初始化选项 vm.$refs:当前Vue实例容器中定义了ref属性的所有DOM元素<!DOCTYPE html><html> <head> <meta c...原创 2021-08-18 15:05:24 · 1663 阅读 · 0 评论 -
Vue3(监视器watch)
监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:第一种: 再Vue实例内部通过watch选项 Vue.createApp({ watch:{ 变量:function(newValue,oldValue){},//监控方法 变量:{ handler:function(n...原创 2021-08-17 20:27:49 · 1021 阅读 · 0 评论 -
Vue3计算属性computed
计算属性computed是用来存储属性数据的对数据进行逻辑处理操作,实现数据包装计算属性通常依赖于当前vue对象中的普通属性当依赖的依赖的普通属性发生变化的时候,计算属性也会发生变化计算属性俩部分构成:get用来获取计算属性set用来设置计算属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <.原创 2021-08-17 19:59:03 · 1316 阅读 · 0 评论 -
VUE3(template使用)
模板template就是定义vue时指定页面的结构构成默认使用mount('选择器')指定挂在元素的内容来构建页面模板可以使用template独立的来定义页面模板,此时挂在元素的内容将被忽略<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"><...原创 2021-08-17 18:18:15 · 5197 阅读 · 2 评论 -
Vue3生命周期
Vue从创建到销毁称为生命周期,总共8个方法:beforeCreate:实例刚创建,初始化环境事件和生命周期钩子函数created:实例已经创建完成数据注入和监测beforeMount:挂在之前,此时模板已经编译,但没有关联到页面上mounted:挂在完成,此时已经关联到页面上beforeUpdate:dom更新之前updated:dom更新完成(//$nextTick()执行的时机)beforeUnmount:实例卸载之前Unmount:实例卸载在生命周期的各个阶段..原创 2021-08-17 18:04:04 · 898 阅读 · 0 评论 -
VUE3封装axios网络请求
在vue项目中,与API接口交互时,通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等功能当项目中API接口过多时,方便开发以及接口变更时修改请求地址,推荐将接口进行封装,整齐的api就像电路板一样,即使再复杂也能很清晰整个线路。request.jsimport axios from 'axios'import router from "@/router";..原创 2021-08-16 11:54:22 · 5690 阅读 · 2 评论 -
VUE3.x(v-model)数据双向绑定指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <!-- v-model双向绑定 --> <div id="app"> <p>...原创 2021-08-15 13:39:09 · 264 阅读 · 0 评论 -
Vue3.x(v-bind)属性绑定指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> <style type="text/css"> .aa{ color: red; } .bb{ background: #ccc;...原创 2021-08-15 13:37:55 · 1209 阅读 · 0 评论 -
VUE3.x(v-for)循环遍历指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> ,<div id="app"> <ul> <!-- 循环数组 -->...原创 2021-08-15 13:36:38 · 3277 阅读 · 0 评论 -
VUE3.x(v-on)常用事件绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> #myp{ width: 200px; height...原创 2021-08-15 12:39:36 · 755 阅读 · 0 评论 -
VUE3.X常用指令
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <p>{{msg...原创 2021-08-15 12:37:29 · 150 阅读 · 0 评论 -
VUE3.x的基本使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 1、获取数据仓库 --> &l...原创 2021-08-14 20:19:44 · 245 阅读 · 0 评论 -
VUE的导入(HelloWord)
Vue的官网:https://v3.cn.vuejs.org/主要学习3.x导入VUE.js<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../js/vue.js"></script> <!-- <.原创 2021-08-14 20:16:20 · 1787 阅读 · 0 评论 -
node.js的下载和安装
问题还有由一个bug引起的:接着就是下面的。我主要是为了下载npm的安装包,因为下载了node.js,安装之后默认里面就有npm的安装包,npm在微信小程序里面可以构建项目和安装所有的第三方的包。官网地址:https://nodejs.org/en/download/解决问题:...原创 2019-06-03 00:23:08 · 159 阅读 · 0 评论