vue事件总线
摘要：//事件总线: 类似于单独对于一个功能的处理。组件间通信的方式；适用于任意组件间通信 // export default{ // //监控事件 // $on(eventName,handler){ // if(!listeners[eventName]){ // listeners[eventNam
阅读全文
posted @ 2023-06-14 09:04
随笔分类 - VUE
vue实现子父组件之间通信
摘要：<template> <div> <button @click="handleClick" :disabled="isLoading"> {{ isLoading ? "loading" : "submit" }} </button> <div class="err">{{ error }}</di
阅读全文
posted @ 2023-06-14 08:57
vuex基础语法
摘要：// import Vuex from "vuex"; // import Vue from "vue"; // Vue.use(Vuex); // /* // vuex作用：数据共享 // 用法：在store新建一个js文件；new Vuex.Store // 方法： // state：初始状态数
阅读全文
posted @ 2023-06-14 08:56
listeners和v-model
摘要：<template> <div id="app"> <LoadingButton @click="handlesClick"></LoadingButton> <ceShi2></ceShi2> </div> </template> <script> import LoadingButton fro
阅读全文
posted @ 2023-06-12 09:45
插件使用
摘要：app.vue <template> <div> <Student/> <School></School> </div> </template> <!-- 1.插件，增强vue 本质：包含install的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的 定义插件（在p
阅读全文
posted @ 2023-02-16 21:12
main(调用一个公共组件)
摘要：app.vue <template> <div> <Student/> <School></School> </div> </template> <!-- 1.作用（mixin）：将多个组件内相同的方法提取到一个混合对象 2.如何使用： 全局使用：在main.js中进行使用： import {混合变
阅读全文
posted @ 2023-02-16 21:09
传递数据(props)
摘要：student.vue <template> <div> <h3>{{msg}}</h3> <h3>姓名:{{name}}</h3> <h3>年龄:{{myage}}</h3> <h3>性别:{{sex}}</h3> <button @click="add">点击我，年龄++</button> </
阅读全文
posted @ 2023-02-16 21:05
ref(代替id)
摘要：App.vue <template> <div> <Student ref="str"/> <h3 v-text="age" ref="age"></h3> <button @click="show()">点击button，输出年龄</button> </div> </template> <!--
阅读全文
posted @ 2023-02-16 21:02
Scoped方法（防止样式名称冲突）
摘要：App.vue <template> <div> <Student/> <School></School> </div> </template> <!-- 1.解决标签名称一样，引起样式冲突问题 写法：1.<style scoped></style> <style lang='css'></styl
阅读全文
posted @ 2023-02-16 21:00
全局事件
摘要：main.js文件： import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false //1.全局事件：多个组件调用一个地方（如：X），由这么一个地方在返回各个组件想要的数据 //如何让多个组件调用
阅读全文
posted @ 2023-02-15 23:18
存储机制（Window.sessionStorage 和 Window.locaStorage）
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>web Storage</title> <!-- 1.存储内容大小一般支持5MB左右（不同浏览器可能不一样） 2.浏览器通过Window.sessionStorage 和 Windo
阅读全文
posted @ 2022-12-29 18:24
创建脚手架遇到代理问题和npm无法识别问题
摘要：1.如果安装脚手架过程时，提示没有配置代理相关词语。那么你的node.js没有安装在C盘，导致权限不够高（安装的时候不要选择路径，直接进行安装，记得使用管理员的cmd去安装脚手架） 解决方法：找到node.js文件夹，右键属性，点击安全，点击高级（在然后就可以开始你的操作了） 2.如果您遇到在终端运
阅读全文
posted @ 2022-12-23 08:50
创建脚手架详细步骤(以及过程中遇到问题)
摘要：1.进入cmd 2.输入：npm config set registry=https://regitry.npm.taobao.org(出现下载比较慢所以先使用该命令) 3.输入： npm install -g @vue/cli --registry=http://registry.npmmirro
阅读全文
posted @ 2022-12-15 22:02
v-for 渲染列表
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style></style> <!-- v-for 用于列表展示数据 语法：v-for="(item,index) in xxx" :key='xxx' 可遍历
阅读全文
posted @ 2022-12-14 21:28
组件的嵌套
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 1.组件的嵌套（school中包含student标签） 2.在app组件中使用其他组件 --> <script src="vue.js"></scrip
阅读全文
posted @ 2022-12-14 21:26
创建非单文件组件
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 创建非单文件组件 1.创建组件 const 变量名 = Vue.extend({里面写内容}) 注意:不能写箭头函数，data使用函数data() ,不
阅读全文
posted @ 2022-12-14 21:25
内置指令
摘要：<!DOCTYPE html> <html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js"></script> </head> <body> <!-- v-bi
阅读全文
posted @ 2022-12-14 21:25
VueComponent理解以及重要的内置关系
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 关于VueComponent： 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
阅读全文
posted @ 2022-12-12 20:36
绑定样式（class）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.js"></script> <style> .class1 { width: 10
阅读全文
posted @ 2022-12-07 20:47
总结数据监视
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- Vue监视数据原理 1.vue会监视data中所有层次的数据 2.如何监视对象中数据 通过setter实现监视，切要在new Vue时就传入要检测的数据
阅读全文
posted @ 2022-12-07 20:45
