08 2022 档案
摘要：使用<template> import { defineStore } from 'pinia' // 用到其他store的信息 import useCounter from './counter' const useUser = defineStore('user',{ state:()=>({
阅读全文
摘要：使用 : <template> <div class="id"> <h3>姓名: {{ userStore.name }}</h3> <h3>年龄: {{ userStore.age }}</h3> <h3>等级: {{ userStore.level }}</h3> <h3>简化版姓名: {{ n
阅读全文
摘要：固定不变的 : stores/index.js import { createPinia } from "pinia" const pinia = createPinia() export default pinia main.js import { createApp } from 'vue' i
阅读全文
摘要：store/modules/home.js export default { state: { // 服务器数据 banners: [], recommends: [] }, mutations: { changeBanners(state, banners) { state.banners = b
阅读全文
摘要：<template> <div class="app"> <h3>Home Page</h3> <ul> <template v-for="item in $store.state.banners" :key="item.acm"> <li>{{ item.title }}</li> </templ
阅读全文
摘要：<template> <div class="app"> 姓名:{{$store.state.nameVuex}} <button @click="btn">基本方法 : 修改名字</button> <br/> <button @click="btn1">传递值 : 修改名字</button> <h
阅读全文
摘要：<template> <div class="app"> 姓名:{{$store.state.nameVuex}} <button @click="btn">基本方法 : 修改名字</button> <br/> <button @click="btn1">传递值 : 修改名字</button> <h
阅读全文
摘要：<template> <div class="app"> 姓名:{{$store.state.nameVuex}} <button @click="btn">基本方法 : 修改名字</button> <br/> <button @click="btn1">传递值 : 修改名字</button> <h
阅读全文
摘要：<template> <div class="app"> 姓名:{{$store.state.nameVuex}} <button @click="btn">基本方法 : 修改名字</button> <br/> <button @click="btn1">传递值 : 修改名字</button> <h
阅读全文
摘要：app.vue <template> <div class="app"> <h3>在模板中直接使用(vue2-3都可用)</h3> 计算 : {{ $store.getters.counterGetter }} <br/> 年龄 : {{ $store.getters.usersAgesGetter
阅读全文
摘要：import { createStore } from 'vuex' export default createStore({ state: { nameVuex:'yjx', levelVuex:100, avtarURLVuex:'http', counterVuex:100, friends:
阅读全文
摘要：<template> <div class="app"> <h3> 在模板中直接使用(vue2-3都可用) </h3> 姓名 : {{ $store.state.nameVuex }} 等级 : {{ $store.state.levelVuex }} 头像 : {{ $store.state.av
阅读全文
摘要：app.vue <template> <div class="app"> <h3> 在模板中直接使用 </h3> 姓名 : {{ $store.state.nameVuex }} 等级 : {{ $store.state.levelVuex }} 头像 : {{ $store.state.avtar
阅读全文
摘要：// 对实例配置拦截器 // 请求拦截器 - 参数1:成功(一般参数叫config) 参数2:失败 axios.interceptors.request.use((config) => { console.log("请求成功的拦截") // 1.开始loading的动画 // 2.对原来的配置进行一
阅读全文
摘要：// axios默认库提供给我们的实例对象 axios.get("http://123.207.32.32:9001/lyric?id=500665346") // 创建其他的实例发送网络请求 create 返回 一个新的实例 const instance1 = axios.create({ bas
阅读全文
摘要：// 2.axios发送多个请求 // Promise.all axios.all([ axios.get("http://123.207.32.32:8000/home/multidata"), axios.get("http://123.207.32.32:9001/lyric?id=50066
阅读全文
摘要：// 1.发送get请求 axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => { console.log("res:", res.data.lrc) }) axios.get("http://123.207.32
阅读全文
摘要：1.特点 ： 1.在浏览器中发送 XMLHttpRequest 请求 2.在node.js 中发送 http 请求 3.支持Promise API 4.拦截请求和响应 2.支持多种请求方式: axios(config) axios.request(config) axios.get(url[, co
阅读全文
摘要：import { useRouter } from 'vue-router' const router = useRouter() router.push({ path: "/about", query: { name: "why", age: 18 } }) 如何得到query呢 ？ 模板中 ：
阅读全文
摘要：在路由配置里面，路径后面加 /：值 ，那么路径就会有了参数 例子 ： { name:'home', path:'/home/:abc', component:Home } <router-link to="/home/875">Home</router-link> <router-link to="
阅读全文
摘要：1.路由里面的 redirect 重定向 redirect 重定向 : 把 '/' 直接定到 '/home' 去 {path:'/',redirect:'/home'}, // redirect 重定向 : 把 '/' 直接定到 '/home' 去 {path:'/',redirect:'/home
阅读全文
摘要：<template> <div>AppContent: {{ message }}</div> <button @click="changeMessage">修改message</button> <showInfo name="why" :age="18" @info-btn-click="info
阅读全文
摘要：<template> <div> <h2>当前计数: {{ counter }}</h2> <button @click="counter++">+1</button> <button @click="name = 'kobe'">修改name</button> </div> </template>
阅读全文
摘要：<template> <div> 本人 : {{reactiveWatch.name}} - {{reactiveWatch.age}} 朋友 : {{reactiveWatch.firend.name}} 同桌 : {{reactiveWatch.firend.hang.name1}} - {{r
阅读全文
摘要：<template> <div> 本人 : {{refWatch.name}} - {{refWatch.age}} 朋友 : {{refWatch.firend.name}} 同桌 : {{refWatch.firend.hang.name1}} - {{refWatch.firend.hang.
阅读全文
摘要：<template> <div> {{refWatch}} <button @click="refWatch++">ref的变化</button> </div> </template> <script> import {ref,reactive,watch} from 'vue' export de
阅读全文
摘要：父组件 : <template> <div>AppContent: {{ name }}</div> <button @click="name = 'kobe'">app btn</button> <show-info></show-info> </template> <script> import
阅读全文
摘要：父组件 : <template> <div> <div class="name" ref="oneRef"> ref第一个 </div> <div class="name" ref="twoRef"> ref第2个 </div> <hello ref="ziRef"></hello> </div>
阅读全文
摘要：<template> <div> <input type="number" v-model="num1"> + <input type="number" v-model="num2"> 答案 : {{total}} <hr> <input type="text" v-model="name1"> <
阅读全文
摘要：<template> <div> 默认 : {{data.name}} - {{data.age}} - {{data.hight}} <br> 解构 : {{name}} - {{age}} - {{hight}} <br> <button @click="age++,hight++">改变</b
阅读全文
摘要：父组件 : <template> <div> 父组件 : {{data.name}} - {{data.age}} - {{data.hight}} <hr> <Hello :data="data" :readonlyData="readonlyData" @readonlyChange="read
阅读全文
摘要：父组件 : <template> <div> 父组件 : {{data.name}} - {{data.age}} - {{data.hight}} <hr> <Hello :data="data"></Hello> </div> </template> <script> import Hello
阅读全文
摘要：<template> <div> <h1>浅层解包</h1> {{ageobj.age.value}} {{ageobj.age}} <button @click="ageobj.age.value++ ">修改浅层解包的年龄</button> </div> </template> <script>
阅读全文
摘要：<template> <div> <h1>vue3</h1> <span>{{name}} - {{age}}</span> <button @click="refname">函数修改name</button> <button @click="name = '刚'">直接修改name</button
阅读全文
摘要：<template> <div> <h1>vue3</h1> <span>{{info.name}} - {{info.age}}</span> <button @click="infobtn">修改info</button> </div> </template> <script> import {
阅读全文
摘要：父组件 : <template> <div class="app"> <!-- 1.组件的v-model: 默认modelValue --> <counter v-model="appCounter"></counter> <!-- 上面的相当于下面的 --> <counter :modelValu
阅读全文
摘要：父组件 : <template> <div class="app"> <div class="view"> <!-- include: 组件的名称来自于组件定义时name选项 --> <keep-alive include="home,about"> <component :is="currentT
阅读全文
摘要：父组件 : <template> <div class="app"> <!-- 动态组件 component --> <!-- is中的组件需要来自两个地方: 1.全局注册的组件 2.局部注册的组件 --> <!-- <component :is="tabs[currentIndex]"></com
阅读全文
摘要：<template> <div class="app"> <h2 ref="title" class="title" :style="{ color: titleColor }">{{ message }}</h2> <button ref="btn" @click="changeTitle">修改
阅读全文
摘要：1.引入库 在 src/until/event-bus.js import { HYEventBus } from 'hy-event-store' const eventBus = new HYEventBus() export default eventBus 2. 使用 1.发送 <templ
阅读全文
摘要：祖先 : <template> <div class="app"> <home></home> <h2>App: {{ message }}</h2> <button @click="message = 'hello world'">修改message</button> </div> </templ
阅读全文
摘要：父组件 : <template> <div class="app"> <tab-control :titles="['衣服', '鞋子', '裤子']" @tab-item-click="tabItemClick"> <template v-slot="props"> <button>{{ prop
阅读全文
摘要：父组件 : <template> <!-- nav-bar只给一个插槽动态传入数据 --> <nav-bar> <template v-slot:[position]> <a href="#">注册</a> </template> </nav-bar> <button @click=" positi
阅读全文
摘要：父组件 : <template> <nav-bar> <template #left> <button>{{ leftText }}</button> </template> <template #center> <span>内容</span> </template> <template v-slo
阅读全文
摘要：父组件 : <template> <div class="app"> <!-- 1.内容是button --> <show-message title="哈哈哈"> <button>我是按钮元素</button> </show-message> <!-- 2.内容是超链接 --> <show-mes
阅读全文
摘要：父组件 : <template> <div class="app"> <h2>当前计数: {{ counter }}</h2> <!-- 1.自定义add-counter, 并且监听内部的add事件 --> <add-counter @add="addBtnClick"></add-counter>
阅读全文
摘要：父组件 : <template> <div class="app"> <h2>当前计数: {{ counter }}</h2> <!-- 并且监听内部的sub事件 --> <sub-counter @sub="subBtnClick"></sub-counter> </div> </template
阅读全文
摘要：父组件 : <template> <!-- 如果当前的属性是一个非prop的attribute, 那么该属性会默认添加到子组件的根元素上 --> <show-info name="why" :age="18" :height="1.88" address="广州市" abc="cba" class=
阅读全文
摘要：父组件 : <template> <!-- 1.展示why的个人信息 --> <show-info name="why" :age="18" :height="1.88" /> </template> <script> import ShowInfo from './ShowInfo.vue' ex
阅读全文
摘要：父组件 : <template> <!-- 1.展示why的个人信息 --> <show-info name="why" :age="18" :height="1.88" address="广州市" abc="cba" class="active" /> </template> <script> i
阅读全文
摘要：<body> <div id="app"> <home-nav></home-nav> <product-item></product-item> <product-item></product-item> <product-item></product-item> </div> <template
阅读全文
摘要：<body> <div id="app"> <!-- <home-nav></home-nav> --> <HomeNav></HomeNav> <home-nav></home-nav> <product-item></product-item> <product-item></product-i
阅读全文
摘要：<body> <div id="app"> <!-- select的单选 --> <select v-model="fruit"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="
阅读全文
摘要：<body> <div id="app"> <div class="gender"> <label for="male"> <input id="male" type="radio" v-model="gender" value="male"> 男 </label> <label for="fema
阅读全文
摘要：<body> <div id="app"> <!-- 1.checkbox单选框: 绑定到属性中的值是一个Boolean --> <label for="agree"> <input id="agree" type="checkbox" v-model="isAgree"> 同意协议 </label
阅读全文
摘要：created() { this.$watch("message", (newValue, oldValue) => { console.log("message数据变化:", newValue, oldValue) }, { deep: true }) }
阅读全文
摘要：watch: { // 默认watch监听不会进行深度监听 -- 简写模式 info(newValue, oldValue) { console.log("侦听到info改变:", newValue, oldValue) }, // 进行深度监听 -- 原始模式 info: { handler(ne
阅读全文
摘要：// 完整的写法: fullname: { get: function() { return this.firstname + " " + this.lastname }, set: function(value) { const names = value.split(" ") this.firs
阅读全文
摘要：<body> <div id="app"> <!-- 1.普通的html写法 --> <h2 style="color: red; font-size: 30px;">哈哈哈哈</h2> <!-- 2.style中的某些值, 来自data中 --> <!-- 2.1.动态绑定style, 在后面跟上
阅读全文
摘要：<body> <div id="app"> <!-- 1.基本绑定class --> <h2 :class="classes">Hello World</h2> <!-- 2.动态class可以写对象语法 --> <button :class=" isActive ? 'active': '' "
阅读全文
摘要：<body> <div id="app"> <div v-memo="[name, age]"> <h2>姓名: {{ name }}</h2> <h2>年龄: {{ age }}</h2> <h2>身高: {{ height }}</h2> </div> <button @click="updat
阅读全文
摘要：一.邂逅版本控制工具 二.集中式和分布式的区别 三.Git的环境安装搭建 四.Git初始化本地仓库 五.GIt记录更新变化过程 六.Git远程仓库和验证 七.Git的标签tag用法 八.Git分支的使用过程 九.工作中的Git Flow 十.Git远程分支的管理 十一.Git rebase的使用 十
阅读全文
摘要：webpack中，有一些地方要用绝对路径的：地址 一.认识webpack工具 事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了： 比如开发过程中我们需要通过模块化的方式来开发； 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，
阅读全文
摘要：package配置文件（package.json） 如何生存 package.json ? npm init 就会问你 【怕麻烦就： npm init -y】 包的名字 ：name 【必填属性】 版本号 ： version 【必填属性】 描述 ： descripttion 【必填属性】 配置入口 ：
阅读全文
摘要：Node是什么? node是一个基于V8(JavaScript引擎) 的 JavaScript运行时环境 也就是说Node.js基于V8引擎来执行JavaScript的代码，但是不仅仅只有V8引擎： 前面我们知道V8可以嵌入到任何C ++应用程序中，无论是Chrome还是Node.js，事实上都是嵌
阅读全文
摘要：JS模块化开发 1.认识模块化开发 事实上模块化开发最终的目的是将程序划分成一个个小的结构； 这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构； 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；[导出] 也可以通过某种方式，导入另外结构中的变量、函
阅读全文
