vue
该睡觉觉了
这个作者很懒,什么都没留下…
展开
-
input限制两位小数(包含iOS)
<input type="number" inputmode="decimal" class="common-form-text common-form-color" placeholder="请输入房屋面积" v-model="fwmj" @input="fwmj=fwmj.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').repl原创 2021-11-29 13:50:31 · 1578 阅读 · 0 评论 -
插槽slot
插槽slot1.匿名槽口slot槽口中没有name属性为,匿名槽口.<template> <div> <!-- 开了一个槽口 --> <slot></slot> <div class="pink">你的眼睛很美,但是我发现我的眼睛更美,因为我的眼里只有你.</div> </div></template>2.具名槽口slot槽口中有name属性为,具名原创 2021-04-05 19:47:33 · 96 阅读 · 0 评论 -
jquery
jquery1.下载安装cnpm i jquery --save2.引入局部引入<script>// 局部引入jqueryimport $ from 'jquery'export default { mounted(){ $('.show').click(()=>{ $('.orange').slideDown(300) }) $('.hide').click(()=>{ $('.orange').slideU原创 2021-04-05 19:46:56 · 103 阅读 · 0 评论 -
is和ref
is作用:解决标签的固定搭配问题<template> <div> <ul> <li is="v-one"></li> </ul> </div></template><script>import vOne from './one.vue'export default { components:{ vOne, }}</scri原创 2021-04-05 19:46:14 · 88 阅读 · 0 评论 -
非父子通信
非父子通信1.非父子之间通信的方式eventBus A=>B A和B同时存在vuex(状态管理) 缺点:页面刷新之后数据立即消失本地存储: localStorage sessionStorage方式一在main.js// eventBus Vue.prototype.aa = 20,Vue.prototype.event = new Vue();a组件<template> <div class="box"> <h1&g原创 2021-04-05 19:45:32 · 92 阅读 · 0 评论 -
子传父
子传父1.子传父子组件: 通过自定义事件$emit(触发事件源),来传递数据父组件: 通过触发自定义事件来接收参数.2.用法子组件<template> <div class="box"> <h1>子组件</h1> <input type="text" v-model="name" @change="change1"> <div>name的值为:{{name}}</div>原创 2021-04-05 19:45:00 · 147 阅读 · 0 评论 -
父传子
父传子分析:1.父传子,首先找到两个组件之间的关联.1.父传子父组件: 通过自定义属性传递数据子组件: 通过props选型接收传递的数据2.父传子注意事项1.父传子: 父变,子变,子变,父不变.并且报错2.父传子: 父变,子变.子变.父变,需要传递一个对象(因为对象是引入类型,公用一个地址,一个改全部改)3.父传子:父变.子不变.子变.父不变, 在子组件中将接收的数据存入到新的属性中3.props作用接收父组件传递的数据接收父组件传递的数据同时做校验常见的类型:Numbe原创 2021-04-05 19:44:27 · 733 阅读 · 0 评论 -
vue脚手架
脚手架1.安装webpack1.什么是webpack webpack就是一个打包工具2. npm i webpack -g npm i webpack-cli -g3.cli:command-line-interface(命令行接口)4. webpack -v 查看版本2.安装脚手架1.npm i vue-cli -g 全局安装脚手架2.vue -V 查看版本3.通过脚手架创建项目1.vue init webpack 项目名称2.cd 项目名称3.npm i 或者原创 2021-04-01 21:11:06 · 61 阅读 · 0 评论 -
缓存组件的生命周期钩子函数
缓存组件keep-alive 缓存标签组件缓存组件的生命周期钩子函数activated激活时状态deactivated 失活时状态注意:1.使用keep-alive包裹的组件就是缓存组件2.只有在缓存组件才会出现缓存组件的生命周期钩子函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co原创 2021-04-01 21:10:33 · 1164 阅读 · 0 评论 -
动态组件
动态组件component标签组件作用:通过标签组件结合is属性来实现动态组件<component :is="isShow"></component>原创 2021-04-01 21:09:59 · 60 阅读 · 0 评论 -
组件嵌套
组件嵌套<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2021-04-01 21:09:26 · 95 阅读 · 0 评论 -
组件中的data
data * 1.在子组件中:data是一个函数,并且要有返回值 * 2.data为什么是函数: * a.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据 * b.每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e原创 2021-04-01 21:09:02 · 366 阅读 · 0 评论 -
template(标签模板)
template(标签模板)作用:将组件的模板内容通过标签模板的形式展示出来,其目的为了书写简便.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-04-01 21:08:18 · 293 阅读 · 0 评论 -
组件名称
组件名称* 1.不能使用现有标签作为组件的名称,eg:div p span img* 2.不能使用现有标签的大写作为组件的名称.eg:DIV diV dIV* 3.组件名称中使用小驼峰形式进行命名,在调用时,需要将大写转为 -小写* 4.定义组件时,建议使用小驼峰形式进行命名.方便书写* 5.如果组件模板内容非常多时,需要换行,一定要使用反引号.* 6.一个组件的模板只能对应一个根节点<!DOCTYPE html><html lang="en"><head&原创 2021-04-01 21:07:34 · 377 阅读 · 0 评论 -
组件介绍和注册
组件介绍和注册1.定义:组件就是组成完整页面常用的功能模块简言之:组件就是组成页面的零部件组件是可复用的vue实例2.组件的组成部分视图(html页面)样式(css)动画(js)3.作用提高代码的开发效率(提高代码的复用率)提高代码的可维护性4.注册组件全局注册组件书写格式 // 全局注册组件 /** * 参数一:组件的名称 * 参数二:要渲染到视图中的组件对应的内容 * template原创 2021-04-01 21:07:08 · 108 阅读 · 0 评论 -
动画
动画1.定义对元素进行添加,修改或者删除等操作时,需要使用动画2.使用系统提供了6个内置的类名.v-enter 进入之前.v-enter-active 进入过程.v-enter-to 进入结束.v-leave 离开之前.v-leave-active 离开过程.v-leave-to 离开结束需要结合标签transition来使用,如果没有设置name属性,默认.v- 如果设置了name属性,使用类名: .name属性值-3.使用animate.css实现动画官网:原创 2021-03-31 21:16:51 · 58 阅读 · 0 评论 -
过滤器
过滤器1.定义对部分数据进行特殊处理,显示在视图中2.使用全局过滤器 // 全局过滤器 /** * 参数一:过滤器的名称 * 参数二:回调函数,接收一个系统自动注入的参数:e(形参) * 形参e接收的是要过滤的对象 * 过滤器必有return */ Vue.filter('全局过滤器名称',(e)=>{ return 操作原创 2021-03-31 21:16:20 · 54 阅读 · 0 评论 -
计算属性
计算属性1.作用1.当需要处理一些复杂的业务逻辑时,需要用到计算属性.2.一行表达式无法完成的计算时,需要使用计算属性2.使用* 1.计算属性中定义的属性名可以直接显示在视图中* 2.计算属性值必须要有return3.计算属性中属性名不能和data中的属性名重叠书写规范: computed:{ 计算属性名:function(){ return 操作 }, }<!DOCTYPE html><html lang="en">原创 2021-03-31 21:15:44 · 268 阅读 · 1 评论 -
侦听器
侦听器1.定义又名:监听器2.作用当数据发生改变时,及时作出响应3.使用语法 // 实例化vue new Vue({ el:'#app', data:{ name:'赵丽颖' }, // 监听 watch:{ // 监听方法中系统提供了两个参数: /**原创 2021-03-31 21:15:14 · 235 阅读 · 0 评论 -
$set
$set为对象中或者数组对象中添加一个新的属性时,必须让该属性赋予set和get方法,才能成功渲染到页面中为属性赋予set和get方法的方式:this.$set(操作对象,'新属性名','新属性值')Vue.set(操作对象,'新属性名','新属性值')vm.$set(操作对象,'新属性名','新属性值')<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2021-03-31 21:14:41 · 160 阅读 · 0 评论 -
生命周期
生命周期1.定义.从开始到结束(销毁)的过程就是一个生命周期钩子函数:在某事某刻自动被触发的函数称之为钩子函数.2.生命周期钩子函数beforeCreate 创建之前创建之前:什么都是undefined beforeCreate(){ console.group('==创建之前==') console.log(this.$el); console.log(this.$data); console.log(this.name); console.groupEnd() },原创 2021-03-30 20:10:20 · 37 阅读 · 0 评论 -
事件修饰符+键盘事件
事件修饰符once 事件只执行一次 <!-- once: 事件只触发一次 --> <button @click.once="add">添加</button> add(){ console.log('添加刘家起');}prevent 阻止默认事件 <!-- 阻止默认事件 --> <div class="box" @contextmenu.prevent="menu"> </div> menu()原创 2021-03-30 20:09:54 · 150 阅读 · 0 评论 -
事件绑定
事件绑定绑定事件v-on:事件名=“事件函数”@事件名=“事件函数” <!-- v-on:事件名="事件函数" 绑定事件 --><button v-on:click="send">发送</button><!-- @事件名="事件函数" 简写形式 --><button @click="send1">发送1</button>事件传参1.如果没有参数,函数调用时,()可以省略2.如果有参数,函数调用时,(原创 2021-03-30 20:09:07 · 64 阅读 · 0 评论 -
表单修饰符
表单修饰符lazy 输入框中光标失去焦点时,数据做双向绑定 <div>username的值为:{{user.username}}</div> <h1>用户信息提交表</h1><div>用户名: <input type="text" v-model.lazy="user.username"></div>number: 将v-model中绑定数据修改为number类型 <!--原创 2021-03-30 20:08:37 · 255 阅读 · 0 评论 -
表单输入
表单输入1.表单输入1.输入框:v-model来绑定初始数据,同时也可以修改数据 value不起任何作用2.单选框:默认选中:v-model绑定的初始值===value值,表示默认选中没有value值:表单提交传递的数据值为:null有value值:表单提交传递的数据值为对应的value值.3.复选框:默认选中: v-model绑定的初始值===value值,表示默认选中没有value值:表单提交传递的数据值为array,即arr = [null]有value:表单提交传递的数据值为对原创 2021-03-30 20:08:07 · 243 阅读 · 0 评论 -
vue-key
keykey做数组遍历来使用,一般在遍历数组时,需要绑定一个唯一的key,来做虚拟DOM中唯一的中间件进行判断,虚拟DOM和真实DOM的对比.key:number或者string<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-03-30 20:07:31 · 82 阅读 · 0 评论 -
vue-双重for循环
双for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2021-03-30 20:07:05 · 1412 阅读 · 0 评论 -
vue- style行内样式
style行内样式:style=“变量”:style="{color:‘red’,width:‘100px’}":style="[可做三元运算判断]"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-03-30 20:06:24 · 7234 阅读 · 0 评论 -
vue-class动态样式
class动态样式方式一:动态样式绑定 :class=“变量”<h1 :class="classN">蒹葭苍苍</h1><button @click="changePink">变粉</button><button @click="changeYellow">变黄</button> <script> // 3.实例化vue new Vue({ el:'#ap原创 2021-03-30 20:05:56 · 733 阅读 · 1 评论 -
v-once(一次)
v-once(一次) 1.v-once:没有表达式 2.使用了v-once指令所在直接元素以及他下面的所有子元素,页面一旦渲染成功时候,所有数据将不再发生改变.简言之:v-once所在元素称之为静态内容.案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e原创 2021-03-30 20:05:23 · 136 阅读 · 0 评论 -
vue面试题
1.为什么要选vue?与其它框架对比的优势和劣势?2.mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?dom节点多,动画多:jQuery数据多:MVVM3.vue等单页面应用及其优缺点4.说出至少4种vue当中的指令和它的用法?5.v-if 和 v-show 区别...原创 2021-03-29 21:41:57 · 91 阅读 · 0 评论 -
v-for
列表渲染v-for="(i,index) in arr"v-for="(i,index) of arr"遍历数组遍历数值遍历字符串遍历对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2021-03-29 21:21:00 · 63 阅读 · 0 评论 -
v-if和v-show
条件渲染v-ifv-if:条件为真,则显示元素,条件为假,不显示元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2021-03-29 21:20:36 · 167 阅读 · 0 评论 -
v-bind
媒体元素(img)v-bindv-bind:属性名="data数据中的属性名"简写形式::属性名="data数据中的属性名"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co原创 2021-03-29 21:19:51 · 112 阅读 · 0 评论 -
v-model
表单元素(input textarea)v-model通过v-model指令做数据的双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic原创 2021-03-29 21:19:25 · 62 阅读 · 0 评论 -
v-html和
基本指令1.非表单元素(div p span)优点缺点作用{{}}书写方便,简单,快捷不能解析data数据中的标签,会出现闪屏问题做插值表达式v-html可以解析data数据中的标签–做富文本渲染v-text不会出现闪屏问题不能解析data数据中的标签做标签内容展示解决闪屏问题: v-cloak通过v-cloak指令将制定元素设置样式display:none,当vue文件加载成功之后,再将带有v-cloak元素的样式设置为:display:b原创 2021-03-29 21:18:49 · 99 阅读 · 0 评论 -
vue优缺点
vue简介官网:https://cn.vuejs.org/目的:简单.快速开发1.vue优缺点优点易用已经会了 HTML、CSS、JavaScript?灵活1.拥有不断繁荣的生态系统(vue route, vuex,vue服务端渲染)2.可以使用一个库或者一个框架进行开发高效1.运行大小20kB,超快虚拟 DOM浏览器解析页面步骤 : 1.解析HTML,生成HTML树, 2.解析css,生成样式树, 3原创 2021-03-29 21:17:58 · 2107 阅读 · 0 评论