随笔分类 - Vue.js
1
摘要：1.介绍 Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，用来代替vuex 与vuex区别：vuex只有一个store，所有的数据都挂载在其上面，而Pinia是一个管理库，既然是库就可以定义多个store，每个store可单独引入 2.安装Pinia 引入pinia 实例化：
阅读全文
摘要：1.入口 创建实例时，配置setup方法，然后其内部书写组合式API代码，通过组合式API生产的数据和返回，需要暴漏出去才能给HTML使用 <script> //组合式(解构赋值) const {createApp,ref} = Vue var app = Vue.createApp({ //所有的
阅读全文
摘要：1.标签内容绑定 双括号语法：使用 {{}} 将变量包裹起来，vue会将变量的值解析为普通文本，而非 HTML 代码 <div>{{msg}}</div> <div>{{html}}</div> data() { return { msg:"good day", html:"<h2>我是h2</h2
阅读全文
摘要：###1.前言 本节讲述组件之间如何进行数据交互 ###2.props属性与非 prop 的属性 父组件通过属性绑定的形式传值给子组件，这种传值分2种 | 类别 | 含义 | 说明 | | | | | | props | 子组件本身已经通过props定义过，有明确的用途 | 传递的数据如何渲染取决于
阅读全文
摘要：###1.前言 - 本节讲述组件和2.x版本和3.x版本的注册方式 ###2.全局注册 - 2.x版本直接调用Vue.component()方法进行全局注册，所有Vue实例都能使用，包括其组件 ``` //组件代码省略 var someComponent = {} Vue.component('so
阅读全文
摘要：1.前言 本节讲述vue组件的基本格式以及实际开发的应用场景，本节内容兼容Vue2.x与Vue3.x 2.组件基础 组件的本质其实就是一个对象，这个对象包含多个属性，常见的属性有：template/data/methods/props/生命周期等 var some_component = { 'te
阅读全文
摘要：1.滚动条 vuescroll 引入插件 - 官网 <script src="https://unpkg.com/vuescroll"></script> 常用配置项 var ops = { vuescroll: { }, scrollPanel: { scrollingX: true,//横向滚动
阅读全文
摘要：1.框架的基本结构 mvvm：入口函数,负责数据代理，并调用其他模块 observer：负责数据劫持，为数据节点挂载dep，将watcher添加到dep中 compile：负责编译模版，遇到有数据绑定的Dom节点则创建watcher watcher：包含更Dom的方法，以及关联dep的信息 2.运行
阅读全文
摘要：1.大括号表达式 (1)在MVVM()中接收并保存配置对象 (2)调用Compile编译函数，将el和vm传入 function MVVM (option) { this.$option = option || {} this._data = option.data // 调用编译函数 new Co
阅读全文
摘要：###1.前言 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它解决了vue中不同组件之间状态共享的问题。 通俗的说，它就是一个带响应式的全局变量管理，它数据的改变会触发相关页面/组件的更新，这是普通全局变量做不到的 ###2.vuex的安装及配置 npm安装vuex npm in
阅读全文
摘要：###1.前言 vue的插件其实通过操作Vue这个对象，为其扩展新的功能。例如： // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive
阅读全文
摘要：###1.基本含义 计算属性被设计用来承载复杂的运算，他本质上是一个function，需要将其值绑定到HTML中才能具有响应式特性 计算属性内的依赖数据发生变动时，会重新执行运行，并更新对应的Dom元素 通过配置computed属性来定义计算属性 计算属性除了能绑定到Dom元素中，还能在实例中直接已
阅读全文
摘要：###1.基本用法 用途：对某个数据进行监听并执行对应的回调，可以是data中的数据，还可以是计算属性 语法：在watch对象下添加字段，字段名为要监听的数据，字段值一般是fucntion，也可以是对象 回调函数有2个参数：数据发生改变后的值，数据发生改变前的值 <script> var vm =
阅读全文
摘要：1.生命周期钩子 函数名 说明 beforeCreate 数据观测和内部事件初始化之前被调用，此时无法通过this访问data中的数据，也无法访问methods中的方法 created 在这一步，数据观测和内部事件初始化已完成，可以访问通过this访问data中的数据和methods中的方法 bef
阅读全文
摘要：###1.前言 Vue动画/过渡的本质： 在通过v-if/v-show指令插入/移除/显示/隐藏某个标签元素时，在这个标签上包裹一个transition标签，Vue会为这个标签动态添加css类名，为这些类名设置css样式，来达到过渡或动画效果 语法格式： <transition> <div v-if
阅读全文
摘要：1.事件监听 v-on:eventName可以简写成@eventName 事件对象：在HTML中，事件参数为$event，但是即使不传递，在回调函数中也可以直接使用event读取 <div id="app"> <button v-on:click="test">点我</button> <button
阅读全文
摘要：1.过滤器的特点 过滤器可以用来对HTML中的数据进行格式化 过滤器本质上是一个函数，接收一个或多个参数，最终需要返回一个数据（简单类型，一般是字符串） 过滤器在vue3.x中被废弃，因为他的功能完全可以使用methods来代替 过滤器中不能访问当前实例 2.过滤器注册 过滤器注册分为全局注册和局部
阅读全文
摘要：1.插槽的基本用法 组件的插槽允许用户将其他组件或者html片段插入到组件当中 // App.vue <template> <div id="app"> <Child> <!-- 在子组件中插入标签 --> <h2>我是插入的h2</h2> </Child> </div> </template> 子
阅读全文
摘要：1.安装与引入 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，官方文档 在HTML文件中引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 在脚手架中使用 //安装
阅读全文
摘要：1.前言 Vue Router官网 在此之前需要了解单页应用single page web application，SPA）和多页面（Multiple page application，MPA）的差别 对比项目 多页面MPA 单页应用SPA 应用构成 多个完整页面构成 一个外壳页面和多个页面片段构成
阅读全文
1
