随笔分类 - vue
摘要：1. 文件分析 1. 补充： 什么叫单文件组件？ 一个文件中只有一个组件 vue-cli创建的项目中，.vue的文件都是单文件组件，例如App.vue 2. 进入分析 1. package.json: 项目依赖配置文件： 如图，我们说主要的属性： name: 项目的名称version: 项目版本sc
阅读全文
摘要：1. 安装node 网址：https://nodejs.org/en下载LTS版本表示长期支持版本说明： node是一个基于Chrome V8引擎的javascript运行环境,让JavaScript 运行在服务端的开发平台vuecli创建的项目必须运行在node环境中，npm为node自带包管理工
阅读全文
摘要：1 多文件组件：一个文件中包含多个组件 组件步骤 第一步：定义 const school = Vue.extend({ template:`<div>{{schoolName}}</div>`, data(){ return { schoolName: '美丽的学校' } } }) // exten
阅读全文
摘要：1.0 引入组件 传统方式编写应用 使用组件方式编写应用 1.1 模块 理解：向外提供特定的js程序，一般就是一个js文件为什么：js文件很多很复杂作用：复用js,简化js的编写，提高js运行效率 1.2 组件认识 理解： 用来实现应用中局部（特定）功能代码和资源集合（html/css/js/ima
阅读全文
摘要：抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现 示例： <body> <div id="app"> {{ n }} <button @click="add">执行</button> </div> <script> let vm = new Vue({ el: "#app",
阅读全文
摘要：1. 过滤器 定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理）语法： 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名" 备
阅读全文
摘要：1. 条件渲染 v-if v-if=“表达式”v-else-if = “表达式”v-else = “表达式” 适用于：切换频率较低的场景 特点：不显示dom元素，直接被删除 注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断 v-if和template一起使用, v-sh
阅读全文
摘要：1. 监听(watch): 监听一个属性的变化，又叫监听器，侦听器 监视属性watch: 当监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进入监视监视的两种写法： new Vue时传入watch配置通过vm.$watch()监视 immediate初始化时让handler调
阅读全文
摘要：Vue 1. 事件 v-on @ 基础 使用 v-on:xxx或者@xxx绑定事件，其中xxx是事件名 事件的回调需要配置在methods对象中，最终会在vm上 methods中配置函数，不要用箭头函数，否则this就不是vm了 methods中配置函数，都是被Vue管理的函数，this指向 vm
阅读全文
摘要：1. data中的两种方式 对象式 data:{ } 函数式 data(){ return { } } 示例： <body> <div id="app"> {{ name }} {{ age}} {{$options}} <input type="text" v-model="value"> </d
阅读全文
摘要：Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护，新的项目也可以上手。 后续呢会有react16和react18、node、w
阅读全文
摘要：1.如何查看 很多情况下再chornme浏览器下看不到placeholder的样式，怎么查看? 1.打开控制台，点击设置 2.在Preferences中找到Element选项，勾选Show user agent shadow DOM 3.返回控制台 4.查看input元素 5.控制台对应元素就会显示
阅读全文
摘要：1.表单中内容为 <el-form> <el-form-item :prop="minPrice" :rules="{ required: true, validator: PriceValidator, trigger: 'blur', }" > <el-input type="Number" m
阅读全文
摘要：很多时候el-input设置了type="number"还是能输入字母e,那么如何禁止呢？ 1.例如input框为 <el-input type="number" v-model="" @keydown.native="keyInput" placeholder="请输入数字"></el-input
阅读全文
摘要：默认情况下，el-tabs下划线长度根据标签内容自动调整。那么如何自定义e-tabs的样式呢？ 1.el-tabs标签设置自定义class名 <el-tabs v-model="" class='custom-tabs'> <el-tab-pane v-for="(item, index) in l
阅读全文
浙公网安备 33010602011771号