摘要：
官网： https://fontawesome.com/ 1.安装 `` `powershell npm i --save @fortawesome/fontawesome-svg-core Using Vue 2.x ```powershell $ npm i --save @fortawesom 阅读全文
posted @ 2023-01-11 13:50
~LemonWater
阅读(827)
评论(0)
推荐(0)
摘要：
nvm下载地址 https://github.com/coreybutler/nvm-windows/releases 直接下载 nvm-setup.zip 到任意文件夹下，双击安装 安装过程会提示 选择两个文件夹路径 第一次是选择 nvm 的路径 第二次是选择nodejs环境路径 接下来直接安装即 阅读全文
posted @ 2022-12-18 11:32
~LemonWater
阅读(4011)
评论(0)
推荐(1)
摘要：
多端兼容配置 标签 <!-- 一般标签 --> body ———— page div,ul, li, table,tr,td ———— view span，b,i,font ———— text a ———— navigator img ———— image js对象 APP和小程序无 documen 阅读全文
posted @ 2022-10-08 20:47
~LemonWater
阅读(540)
评论(0)
推荐(0)
摘要：
自定义修饰符 组件 const myComponent = { template: `<input type="text" :value="modelValue" @input="emitValue" />`, props: { modelValue: String, }, emits: ['upd 阅读全文
posted @ 2022-08-23 17:09
~LemonWater
阅读(218)
评论(0)
推荐(0)
摘要：
过滤器 常用于 过滤数据 或者 格式化数据 <div class="main-container"> <div class="datetime-wrapper"> {{ datetime | dateTimeFormatter }} </div> </div> <script> new Vue({ 阅读全文
posted @ 2022-08-17 10:45
~LemonWater
阅读(66)
评论(0)
推荐(0)
摘要：
插槽 匿名插槽 子组件设置匿名插槽 <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
阅读(76)
评论(0)
推荐(0)
摘要：
### 渲染函数 #### x-template - 引入外面组件文件写法 ```html ``` ```html 自定义标题 ``` - html 页面内组件写法, 属性 id 方便取到组件内容 ```html ``` ```html 自定义标题 ``` - 渲染函数渲染类似组件 ```html 阅读全文
posted @ 2022-08-17 10:05
~LemonWater
阅读(221)
评论(0)
推荐(0)
摘要：
Web Workers API接口 通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。 主线程和 worker 线程相互之间使用 postMessag 阅读全文
posted @ 2022-08-15 11:49
~LemonWater
阅读(297)
评论(0)
推荐(0)
摘要：
监听事件 事件处理方法可以用 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
阅读(1163)
评论(0)
推荐(0)
摘要：
自定义指令 有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 <div id="directive-demo"> <input v-focus /> </div> 全局注册 Vue.directive('focus', { /* 注册一个全局自定义指令 `v-foc 阅读全文
posted @ 2022-08-15 10:04
~LemonWater
阅读(70)
评论(0)
推荐(0)
摘要：
mixin混入 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 组件式混入 // 定义一个混入对象 var myMixin = { created: function () {this.hello()}, methods: { hello: function ( 阅读全文
posted @ 2022-08-13 18:18
~LemonWater
阅读(94)
评论(0)
推荐(0)
摘要：
过渡（优化） 可复用的过渡 <transition> 或者 <transition-group>为根的组件 Vue.component('my-special-transition', { template: '<transition name="very-special-transition" m 阅读全文
posted @ 2022-08-13 18:08
~LemonWater
阅读(85)
评论(0)
推荐(0)
摘要：
单元素过渡 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
阅读(98)
评论(0)
推荐(0)
摘要：
过渡 & 动画 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 CSS 动画库，如 Animate.css 可以配合使用第三方 J 阅读全文
posted @ 2022-08-13 14:03
~LemonWater
阅读(118)
评论(0)
推荐(0)
摘要：
组件（优化） 动态组件 keep-alive 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。 有时我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 < 阅读全文
posted @ 2022-08-13 13:56
~LemonWater
阅读(232)
评论(0)
推荐(0)
摘要：
组件 组件是可复用的 Vue 实例，且带有一个名字。 <div id="components-demo"> <button-counter></button-counter> </div> <script> // 定义一个名为 button-counter 的新组件 Vue.component('b 阅读全文
posted @ 2022-08-13 11:32
~LemonWater
阅读(80)
评论(0)
推荐(0)
摘要：
表单输入绑定 v-model 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据 阅读全文
posted @ 2022-08-13 10:49
~LemonWater
阅读(123)
评论(0)
推荐(0)
摘要：
列表渲染 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
阅读(80)
评论(0)
推荐(0)
摘要：
条件渲染 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
阅读(102)
评论(0)
推荐(0)
摘要：
: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
阅读(69)
评论(0)
推荐(0)
浙公网安备 33010602011771号