随笔分类 - vue
摘要：官网： 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
摘要：安装依赖 npm i/install packageName 安装依赖；i是install的缩写，两者功能是一样的 npm i packageName@0.0.1 安装依赖的指定版本 npm i packageName --save 安装并保存至package.json文件的dependencies
阅读全文
posted @ 2023-01-09 17:22
~LemonWater
摘要：yarn的使用 安装 安装 npm install --global yarn 查看是否安装完成 yarn --version 使用命令 初始化项目 yarn init 添加依赖 yarn add [package] yarn add [package]@[version] yarn add [pa
阅读全文
posted @ 2023-01-09 09:44
~LemonWater
摘要：nvm下载地址 https://github.com/coreybutler/nvm-windows/releases 直接下载 nvm-setup.zip 到任意文件夹下，双击安装 安装过程会提示 选择两个文件夹路径 第一次是选择 nvm 的路径 第二次是选择nodejs环境路径 接下来直接安装即
阅读全文
摘要：多端兼容配置 标签 <!-- 一般标签 --> 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
摘要：自定义修饰符 组件 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
摘要：监听事件 事件处理方法可以用 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
浙公网安备 33010602011771号