酒馆不打烊

Vuex是实现各个组件之间的互相通讯的状态管理模式 Vuex五个核心概念 state：存储vue的基本数据 mutations：唯一能改变state中数据并触发视图更新 actions：异步操作，并提交到mutations中 getters：Vuex中的计算属性 modules： 模块，可以把Vuex按照功能拆分成不同的模块 state 存在vuex的数据，全局都能调用，避免了组件之间频繁导入，注意：刷新页面时，state中的数据会回复到初始值，需要做好相关默认数据逻辑。 在页面中可以使用 $store.s

vue2、vue3二次封装element全局图片预览功能

vue element select下拉加载vue2.x和vue3.0

Pinia介绍 去除掉Vuex中的Mutations，只有state，getters和actions，体积小，写法简单方便，更好的支持TypeScript语法，便捷的devTools操作。 pinia安装，可以使用npm或者yarn yarn add pinia npm install pinia 在main.ts中注册 import { createApp } from "vue"; import App from "./App.vue"; import { createPinia } from "pi

#插槽(slot) 作用：使得组件能够嵌套其他标签 用法一：直接在组件的模板里面插入一个插槽标签就可以了 用法二： 当模板里面有很多子元素的时候，我想将标签插入其中一个元素里面 那么可以在该元素里面插入一个插槽，并给该插槽添加一个名字 使用的时候只要在插入的标签里面添加slot="name"就可以了 <div class="app" v-cloak> <test

在项目的根目录下新建一个vue.config.js文件，配置如下，这样就不需要在页面引入公共的scss文件了，全局都能访问的到 module.exports={ css: { loaderOptions: { sass: { // 旧版本 data:`@import "@/style/mixin.scss";` // 新版本

通过npm进行安装fastclick来解决延迟， npm install fastclick --save 并在main.js中引入

使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 ...

父级组件 <template> <div> <div class="content"> <!-- 通过:list绑定传递给给子组件的属性进行传值--> <list :list="list"></list> </div> </div> </template...

父子组件之间的传值通过props和$emit

新建一个loading文件件，新增loading.vue跟loading.js两个文件 loaing.vue loading弹窗组件 <template> <div v-if="show" class="loading-content"> <div class="loading-animate"></div> &lt...

在component下面新建一个toast文件夹，创建toast.vue和toast.js文件 toast.vue <template> <div class="toast" :class="type? `toast--${type}`:''"> <p>{{content}}</p> </div> <...

如果按照官网引入会报错 然后在main.js中引入 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //引入组件名 import { Button} from 'element-ui'; import 'element-ui/li...

取出本地购物车商品的数据 清空本地购物车数据 // localStorage.removeItem('cartInfo'); let cartInfo=localStorage.cartInfo?JSON.parse(localStorage.cartInfo):[]; // find,查找 let isHav...

在需要用到的页面引入外部filter 可以在html页面用管道符来使用{{item.price| moneyFilter}}，这样可以很方便地显示金额时保留两位小数。 &lt;div&gt;￥{{item.price | moneyFilter}}&lt;/div&gt; filters:{ moneyFilter(money){ return toMoney(money) } }, ...

#1、通过 脚手架搭建vue项目： a、 全局安装 npm install -g @vue/cli b、创建项目 vue create projectName #2、组件的应用 a、创建一个组件文件(后缀名为.vue)文件 b、通过import引入 c、通过components注册组件 d、用上一个步骤创建的组件名引入到页面(组件名当标签用) #3、ajax请求 a、通过插件axios进行异步请求...

&amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; .test{ width: 200px; height: 200px; background: skyblue; } .test1{ width: 200px; height: 200px; background: pink; } &amp;amp;lt;/sty

#路由的使用 &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;!--使用router-link 组件来导航--&amp;amp;gt; &amp;amp;lt;router-link to=&amp;quot;/test1&amp;quot;&am

&amp;amp;lt;div class=&amp;quot;app&amp;quot; v-cloak&amp;amp;gt; &amp;amp;lt;input type=&amp;quot;text&amp;quot; v-model=&amp;quot;inpVal&amp;quot; /&amp;amp;gt; &amp;amp;lt;button @click=&amp;quot;a

箭头函数会绑定this的指向，是绑定触发该函数的对象 所以在vue中少用箭头函数 beforeCreate: 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created: 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而...

&amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;ul&amp;amp;gt; &amp;amp;lt;li v-for=&amp;quot;item in sortitems&amp;quot;&amp;amp;gt; {{item}} &amp

&amp;amp;lt;div class=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;button v-for=&amp;quot;(item,inde) in list&amp;quot; @click=&amp;quot;changeBtn(inde)&amp;quot;&amp;amp;gt;{{item}}&amp;amp;lt;/button&am

#选项卡 &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; * { padding: 0; margin: 0; list-style: none; } .web{ width: 600px; height: 300px; margin: auto; border: 1px solid #000000; ...

&amp;amp;lt;div class=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;input type=&amp;quot;text&amp;quot; v-model=&amp;quot;inpVal&amp;quot; /&amp;amp;gt; &amp;amp;lt;button @click=&amp;quot;add&a

&amp;amp;lt;div class=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;p v-fontcolor=&amp;quot;'skyblue'&amp;quot;&amp;amp;gt;今天天气真好&amp;amp;lt;/p&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; 自定义指令 可以通过vue

&amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; html,body,.app{ height: 100%; } .app{ overflow-y: scroll; } .sc{ height: 1000px; } &amp;amp;lt;/style&amp;amp;gt; &amp;amp;lt;d

父组件传递给子组件时绑定的属性必须一致比如父组件绑定floorData，子组件接受时也是以相同的属性接受floorData &lt;floorComponent :floorData="floor1" :floorTitle="floorName.floor1"&gt;&lt;/floorComponent&gt; &lt;floorComponent :floorData="floor2" :f...

&amp;lt;style type=&quot;text/css&quot;&amp;gt; .test{ color: skyblue; background: red; width: 200px; height: 200px; text-align: center; line-height: 200px; overflow: hidden; transi...