08 2022 档案
摘要：自定义修饰符 组件 const myComponent = { template: `<input type="text" :value="modelValue" @input="emitValue" />`, props: { modelValue: String, }, emits: ['upd
阅读全文
posted @ 2022-08-23 17:09
~LemonWater
摘要：过滤器 常用于 过滤数据 或者 格式化数据 <div class="main-container"> <div class="datetime-wrapper"> {{ datetime | dateTimeFormatter }} </div> </div> <script> new Vue({
阅读全文
posted @ 2022-08-17 10:45
~LemonWater
摘要：插槽 匿名插槽 子组件设置匿名插槽 <script type="text/x-template" id="custom-comp"> <div class="custom-comp-container"> <h2>{{title}}</h2> <slot></slot> </div> </scrip
阅读全文
posted @ 2022-08-17 10:12
~LemonWater
摘要：### 渲染函数 #### x-template - 引入外面组件文件写法 ```html ``` ```html 自定义标题 ``` - html 页面内组件写法, 属性 id 方便取到组件内容 ```html ``` ```html 自定义标题 ``` - 渲染函数渲染类似组件 ```html
阅读全文
posted @ 2022-08-17 10:05
~LemonWater
摘要：Web Workers API接口 通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。 主线程和 worker 线程相互之间使用 postMessag
阅读全文
posted @ 2022-08-15 11:49
~LemonWater
摘要：监听事件 事件处理方法可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <div id="app"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been
阅读全文
posted @ 2022-08-15 10:28
~LemonWater
摘要：自定义指令 有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 <div id="directive-demo"> <input v-focus /> </div> 全局注册 Vue.directive('focus', { /* 注册一个全局自定义指令 `v-foc
阅读全文
posted @ 2022-08-15 10:04
~LemonWater
摘要：mixin混入 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 组件式混入 // 定义一个混入对象 var myMixin = { created: function () {this.hello()}, methods: { hello: function (
阅读全文
posted @ 2022-08-13 18:18
~LemonWater
摘要：过渡（优化） 可复用的过渡 <transition> 或者 <transition-group>为根的组件 Vue.component('my-special-transition', { template: '<transition name="very-special-transition" m
阅读全文
posted @ 2022-08-13 18:08
~LemonWater
摘要：单元素过渡 appear 初始渲染 通过 appear attribute 设置节点在初始渲染的过渡 appear + css <transition appear appear-class="custom-appear-class"appear-to-class="custom-appear-to
阅读全文
posted @ 2022-08-13 14:40
~LemonWater
摘要：过渡 & 动画 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 CSS 动画库，如 Animate.css 可以配合使用第三方 J
阅读全文
posted @ 2022-08-13 14:03
~LemonWater
摘要：组件（优化） 动态组件 keep-alive 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。 有时我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 <
阅读全文
posted @ 2022-08-13 13:56
~LemonWater
摘要：组件 组件是可复用的 Vue 实例，且带有一个名字。 <div id="components-demo"> <button-counter></button-counter> </div> <script> // 定义一个名为 button-counter 的新组件 Vue.component('b
阅读全文
posted @ 2022-08-13 11:32
~LemonWater
摘要：表单输入绑定 v-model 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据
阅读全文
posted @ 2022-08-13 10:49
~LemonWater
摘要：列表渲染 v-for <!-- v-for="(v,k,i) in arr/obj" --> <ul id="app"> <li v-for="item in items" :key="item.message">{{ item.msg }}</li> </ul> <script> new Vue(
阅读全文
posted @ 2022-08-13 10:36
~LemonWater
摘要：条件渲染 v-if & v-else-if & v-else <div id="app"> <h1 v-if="type == 'VUE'">Vue is awesome!</h1> <h1 v-if="type == 'HTML'">Vue is awesome!</h1> <h1 v-else>
阅读全文
posted @ 2022-08-13 10:28
~LemonWater
摘要：:class & :style :class 键值对 <div id="app" v-bind:class="{ 'active': isActive }"></div> <script> new Vue({ el:'#app', data:{isActive:true} }) </script>
阅读全文
posted @ 2022-08-13 10:21
~LemonWater
摘要：计算属性与监听器 计算属性 当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed mess
阅读全文
posted @ 2022-08-13 10:03
~LemonWater
摘要：基础语法 引入vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="htt
阅读全文
posted @ 2022-08-13 09:46
~LemonWater
摘要：生命周期 | 函数 | 描述 | | | | | beforeCreate | 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 | | created | 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (dat
阅读全文
posted @ 2022-08-13 09:29
~LemonWater
摘要：vue组件通信 页面传值：$route/${prop} 组件传值： 父组件传值给子组件：参数传值 子组件传值给父组件：给父组件传过来函数传参数；通过插槽的v-slot，绑定参数 组件通信一般分为以下几种情况： 父子组件通信 兄弟组件通信 跨多层级组件通信 任意组件 父子通信 父组件通过 props
阅读全文
posted @ 2022-08-12 19:16
~LemonWater
摘要：vue文件时怎样编译运行到浏览器的 http://www.manongjc.com/article/21832.html 通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件 编译模板， 生成可复用的render function code， 这一步在vue实例的整个生命
阅读全文
posted @ 2022-08-12 18:55
~LemonWater
摘要：setTimeout() 超时限制-节流 /* interval()，在setInterval()时间间隔到期后调用。 * timeout()setTimeout()计时器到期后调用。 * run()，在程序启动时调用。 * logline()在间隔和计时器到期时称为，它在出现节流时显示最近的间隔和
阅读全文
posted @ 2022-08-12 16:33
~LemonWater
摘要：PromiseWorker PromiseWorker是一个ChromeWorker，调用而不是postMessage()发送消息，而是调用post()，它返回一个Promise。 PromiseWorker模块由两个JavaScript文件PromiseWorker.jsm和PromiseWork
阅读全文
posted @ 2022-08-12 16:10
~LemonWater
摘要：Web Worker 在专用workers的情况下，DedicatedWorkerGlobalScope 对象代表了worker的上下文（专用workers是指标准worker仅在单一脚本中被使用；共享worker的上下文是SharedWorkerGlobalScope (en-US)对象）。一个专
阅读全文
posted @ 2022-08-12 15:08
~LemonWater
摘要：Promise 一个 Promise 必然处于以下几种状态之一： 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejected）: 意味着操作失败。 如果一个 promise 已经"被兑现（fulfilled）"或"
阅读全文
posted @ 2022-08-12 14:26
~LemonWater
摘要：异步JS setTimeout() 我们希望传递给setTimeout()中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。 function sayHi(who) { alert('Hello ' + who + '!'); } let myGreeting = setTimeout(
阅读全文
posted @ 2022-08-12 13:56
~LemonWater
摘要：async/await 它保证函数的返回值为 promise。 用更少的.then()块来封装代码，同时它看起来很像同步代码 注意：可能会因为大量await的promises相继发生而变慢。 async关键字 使用 async 关键字，把它放在函数声明之前，使其成为 async function。
阅读全文
posted @ 2022-08-12 13:35
~LemonWater
摘要：DOM DOM树 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple DOM example</title> </head> <body> <section> <img src="dinosaur.png" alt="
阅读全文
posted @ 2022-08-12 11:48
~LemonWater
摘要：从服务器获取数据 Ajax 通过使用诸如 XMLHttpRequest 之类的API或者 — 最近以来的 Fetch API 来实现. 这些技术允许网页直接处理对服务器上可用的特定资源的 HTTP 请求，并在显示之前根据需要对结果数据进行格式化。 XHR已经面世非常之久，现在已经有了相当棒的跨浏览器
阅读全文
posted @ 2022-08-12 11:35
~LemonWater
摘要：Compositing 组合 globalCompositeOperation这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。 | 值 | 描述 | 图示 | | | | | | source-over | 默认设置，并在现有画布上下文之上绘制新图形。| | | so
阅读全文
posted @ 2022-08-12 11:04
~LemonWater
摘要：给Canvas上下文设置样式 <canvas class="myCanvas" width="700" height="500"> <p>添加恰当的反馈信息。</p> </canvas> <script> var canvas = document.querySelector('.myCanvas'
阅读全文
posted @ 2022-08-12 10:06
~LemonWater
摘要：web API web-api | 分类 | 链接 | 描述 | | | | | | 操作文档的API | 操作document | dom，html，svg | | 从服务器获取数据的API | XMLHttpRequest |XMLHttpRequest（XHR）对象用于与服务器交互。通过 XM
阅读全文
posted @ 2022-08-12 09:54
~LemonWater
摘要：Canvas Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 canvas <canvas> 标签只有两个属性—— width和height。当没有设置宽度和高度的时
阅读全文
posted @ 2022-08-11 18:34
~LemonWater
摘要：zTree官网 https://treejs.cn/v3/api.php 涉及到zTree的异步获取 这里主要是在setting部分的设置： setting: { ..., async: {enable: true, url: getUrl }, callback: { //回调函数，实现展开功能
阅读全文
posted @ 2022-08-08 11:02
~LemonWater
浙公网安备 33010602011771号