vue
关注
分享
扫一扫
文章平均质量分 77
喵_美
这个作者很懒，什么都没留下…
展开
-
uniapp
项目目录及文件介绍一个uni-app项目，默认包含如下目录及文件：┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，uniCloud详见https://uniapp.dcloud.io/uniCloud ）│─components 符合vue组件规范的uni-app组件目录│ └─wqq-banner │ └─wqq-banne.vue 可复用的a组件，若目录名和.vue文件名一致，不需要import也可以直接在页面中直接使用`<wqq-bann原创 2021-04-08 17:00:27 · 688 阅读 · 0 评论 -
TypeScript
TypeScript特点类型注解let var1: string; // 类型注解var1 = "哈哈"; // 正确var1 = 4; // 错误// 编译器类型推断可省略这个语法let var2 = true;注：常见原始类型: string,number,boolean,undefined,null,symbol类型基础// 类型数组let arr: string[];arr = ['Tom']; // 或Array<string>// 任意类型any原创 2021-03-25 14:17:38 · 285 阅读 · 0 评论 -
vue中CSS
使用预处理器如果创建项目时没有选择需要的预处理器（Sass/Less/Stylus），则需手动安装相应loader```# Sassnpm install -D sass-loader node-sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylus```例：```<style scoped lang="scss"> $color: #42b983;原创 2021-03-19 16:55:50 · 786 阅读 · 0 评论 -
VUE中处理资源路径
处理资源路径相对路径：当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将被webpack处理。<img alt="Vue logo" src="./assets/logo.png">绝对路径:如果 URL 是一个绝对路径，它会去当前服务器的静态路径(public)下去找，public文件webpack不会做任何处理，用来放静态资源<img alt="Vue logo" src="/assets原创 2021-03-19 16:12:25 · 1879 阅读 · 0 评论 -
组件通信详解
组件通信的常用方式组件通信常用方式propseventbusvuex自定义事件List item边界情况$parent$children$root$refsprovide/inject非prop特性$attrs$listeners父组件向子组件传值之props子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法，方法如下：组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据<script>原创 2020-11-13 15:56:54 · 701 阅读 · 0 评论 -
Vue中数据响应式的解决方案（相关API）
Vue.set由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。造成在data上的数据无法响应式变化，无法响应式变化有以下3钟情况：动态地为对象增加或移除属性 <template> <div> <input v-model.number="age"> <button @click="test">更新</button><br> {{ courses.name }} -- {{courses.se原创 2020-10-30 16:20:41 · 1138 阅读 · 0 评论 -
深入理解vue中的修饰符
表单修饰符.lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：<input v-mo原创 2020-10-27 16:32:32 · 911 阅读 · 2 评论 -
vue—插槽
概念插槽是一种传递复杂内容的方式，就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽的使用在子组件中放一个占位符 <slot></slot><template> <div> <h1>今天天气状况：</h1> <slot></slot> &l原创 2020-08-05 22:37:51 · 274 阅读 · 0 评论 -
VUEX的使用
概念vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据；即Vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库。使用步骤安装包cnpm i vuex -S导入包import Vuex from 'vuex'，前提是要导入VUE包import Vue from 'vue'将vuex注册到vue中Vue.use(Vuex)new Vuex.Store() 实例，得到一个数据仓储对原创 2020-08-03 23:59:13 · 886 阅读 · 0 评论 -
mint-ui 日期选择器，得到年历、年月历
思路：mint-ui 只提供年月日日历选择，如果我们只想要选择年、或者选择月份，我们可以通过获取年元素、月元素、日元素，在日历元素生成时将其隐藏或删除，因为该日历组成是打开的时候才生成，所以操作元素的动作要在日历打开时进行。步骤mint-ui 是基于vue的基础上构造的，已经可以通过$refs获取元素（1）创建日历容器和日历按钮点击按钮调用open()<mt-datetime-p...原创 2020-03-02 20:45:19 · 1784 阅读 · 0 评论 -
webpack
用npm装插件在终端上输出指令生成的默认的package.json：npm init -y在终端上输出指令用npm i来直接安装模块：如安装jquery命令为，npm i jquery -S，安装的包放在node_modules扩展：-D后，安装包会在package中的 devDependencies对象中。简称dev。dev是在开发环境中要用到的。-S后，安装包会在package中...原创 2019-06-25 00:29:15 · 403 阅读 · 0 评论 -
npm常用命令、 npm init初始化项目、nrm的安装使用
npm init 创建 package.json步骤：在 桌面新建node作为项目目录，在该目录下打开cmd。使用 npm init 指令创建项目描述文件 package.json。命令行里会以交互的形式让你填一些项目的介绍信息，依次介绍如下：（不知道怎么填的直接回车、回车…）name 项目名称version 项目的版本号description 项目的描述信息entry po...原创 2019-09-27 16:00:25 · 9804 阅读 · 2 评论 -
vue-router路由
定义前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端...原创 2019-06-20 16:48:29 · 446 阅读 · 0 评论 -
VUE组件
定义Vue组件什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式使用...原创 2019-06-19 21:36:21 · 255 阅读 · 0 评论 -
使用vue-resource发送异步请求(包含get、post和 jsonp请求)
vue-resource的作用实现 get, post, jsonp请求在页面中，通过script标签，引入 vue-resource 的脚本文件；发送get请求：getInfo() { //发起get请求 this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => { // 当发起get请求之后， 通过...原创 2019-06-19 17:27:56 · 1356 阅读 · 0 评论 -
vue基础
vue实例对象的参数el：表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域data：存放的是 el 中要用到的数据methods：定义了当前Vue实例所有可用的方法注意：在 VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名来进行访问，这里的this，就表示 我们 new 出来的...原创 2019-06-17 12:21:03 · 880 阅读 · 0 评论 -
VUE动画
vue动画的声明周期步骤使用 transition 元素，把需要被动画控制的元素，包裹起来；自定义两组样式，来控制 transition 内部的元素实现动画。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...原创 2019-06-19 17:23:28 · 1276 阅读 · 0 评论