08 2023 档案
摘要：1.Person.vue <template> <div> <h1>人员列表</h1> <h1 style="color: red;">Count 组件的求和为{{ sum }}</h1> <input type="text" placeholder="请输入名字" v-model="name"><
阅读全文
摘要：1. Count.vue <template> <div> <h1>当前求和位{{ sum}}</h1> <h1>当前求和放大10倍后是{{ bigSum }}</h1> <h1>我在{{school }},学习{{ subject }}</h1> <select v-model.number="n
阅读全文
摘要：1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。 2. 在```store.js```中追加```getters```配置 ```js ...... const getters = { bigSum(state){ return state.sum * 10 }
阅读全文
摘要：1. 初始化数据、配置```actions```、配置```mutations```，操作文件```store.js``` ```js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use
阅读全文
摘要：1.store/index.js //改文件用于创建vuex 最为核心的 store import Vue from 'vue' //引入vuex import Vuex from 'vuex' Vue.use(Vuex) // 准备actions 用于响应组件中的动作 const actions=
阅读全文
摘要：1. npm i vuex@3 2. Vue.use(Vuex) 3. store 4. vc==>store 5. vue2 中 只能使用 vuex 的 3 版本 vue3 中 只能使用 vuex 的 4 版本 6. store/index.js //改文件用于创建vuex 最为核心的 store
阅读全文
摘要：1. vuex 是什么 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。 2. 什么时候使用 Vuex 1. 多个组件依赖于同一状态 2. 来自不同组件的行为
阅读全文
摘要：## 插槽 1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 > 子组件</strong> 。 2. 分类：默认插槽、具名插槽、作用域插槽 3. 使用方式： 1. 默认插槽： ```vue 父组件中
阅读全文
摘要：1. App.vue <template> <div class="container"> <Category title="游戏" > <template scope="atgui"> <ul > <li v-for="(g,index) in atgui.games" :key="index">
阅读全文
摘要：1.App.vue <template> <div class="container"> <Category title="美食" > <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> <a slot
阅读全文
摘要：1. App.vue <template> <div class="container"> <Category title="美食" > <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> </Category> <Categor
阅读全文
摘要：安装 npm install vue-resource //main.js 使用 import VueResource from "vue-resource" Vue.use(VueResource)安装好 Vue-resource 之后，在 Vue 组件中，我们就可以通过 this.$http 或
阅读全文
摘要：1.main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), beforeCreate(){ Vue.protot
阅读全文
摘要：前端发送 ajax 请求的方式 1. xhr new XMLHttpRequest xhr.open() xhr.send() 基本不用 2. jquery(封装的 xhr) $get $post 3. axios(封装的 xhr) 和 jquery 比较 promise 风格的，支持请求拦截器和响
阅读全文
摘要：1. MyItem.vue <template> <transition name="todo" appear> <li> <label> <input type="checkbox" :checked="todo.done" @click="handlerCheck(todo.id)"/> <sp
阅读全文
摘要：1. 加载 第三方动画 npm install aninate.css 2. App.vue <template> <div> <button @click="isShow=!isShow"> 显示/隐藏 </button> <transition-group appear name="animat
阅读全文
摘要：1.App.vue <template> <div> <Test></Test> <Test2></Test2> </div> </template> <script> import Test from './components/Test.vue'; import Test2 from './co
阅读全文
摘要：1.App.vue <template> <div> <Test></Test> <Test2></Test2> </div> </template> <script> import Test from './components/Test.vue'; import Test2 from './co
阅读全文
摘要：1. Test.vue <template> <div> <button @click="isShow=!isShow"> 显示/隐藏 </button> <h1 v-show="isShow" class="come">你好呀</h1> </div> </template> <script> ex
阅读全文
摘要：1. 语法 this.$nextTick(回调函数) 2. 作用 在下一次DOM 更新结束后执行其指定的回调 3. 什么时间用 当改变数据后，要基于更新后新的DOM进行某些操作时，要在nextTick 所指定的回调函数中执行。 1. App.vue <template> <div id="root"
阅读全文
摘要：1.App.vue <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <!-- @addTodo 事件名 addTodo 回调名--> <MyHeader @addTodo="addTodo
阅读全文
摘要：1. 安装组件。npm i pubsub-js 2.main.js /** * 该文件是整个项目的入口文件 */ //引入Vue import Vue from 'vue' // 引入App 组件 他是所有组件的父组件 import App from './App.vue' //关闭vue 的生产提
阅读全文
摘要：1.mainjs /** * 该文件是整个项目的入口文件 */ //引入Vue import Vue from 'vue' // 引入App 组件 他是所有组件的父组件 import App from './App.vue' //关闭vue 的生产提示 Vue.config.productionTi
阅读全文
摘要：1.main.js /** * 该文件是整个项目的入口文件 */ //引入Vue import Vue from 'vue' // 引入App 组件 他是所有组件的父组件 import App from './App.vue' //关闭vue 的生产提示 Vue.config.productionT
阅读全文
摘要：1.MyHeader.vue <template> <div class="todo-header"> <!--v-model:="title" 是实时绑定的 --> <input type="text" placeholder="请输入你的任务名称，回车键确认" v-model="title" @
阅读全文
