VUE.js
文章平均质量分 50
那是遇知吧
Life is but a walking shadow
展开
-
vue中点击加减按钮,添加或删除一列输入框
<template> <el-form :model="form"> <div v-for="(item,index) in form.addForm" :key="`addForm${index}`"> <el-col :span="7"> <el-form-item label="" :prop="`addForm.${index}.name`"> .原创 2021-10-27 14:24:44 · 1714 阅读 · 0 评论 -
VUE之elementUI组件:输入金额的限制(两位小数、不能0或.开头 只能输入数字和.)
参考了几种金额判断是方法整合了下方法:<el-form :model="form" :rules="rules"> <el-form-item label="金额" required prop="money"> <el-input placeholder="请输入金额" v-model="form.money" /> </el-form-item></el-form>date(){ const原创 2021-10-22 14:28:13 · 4335 阅读 · 0 评论 -
Vue常用问题总结-2class与style
一Class与Style绑定列子1:<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}渲染结果为:<div class="static active"></div> 列子2:<div v-bind:cl...原创 2021-02-01 15:47:27 · 258 阅读 · 0 评论 -
Vue常用问题总结-1
图片引入方式对象图片第一种方式:<div :style="`background-image:url('${BANNER')`"></div>import {BANNER} from '@/const/imgUrl'export default {data() { return {BANNER}}第二种方式:background-image: url('~assets/loading.gif');...原创 2021-02-01 15:18:23 · 182 阅读 · 0 评论 -
每日一练28:移动端页面布局总结
效果图如下:只有中间内容滚动,头部红色定位在顶部,底部绿色背景定位在底部,只有中间内容滚动这个效果用的盒子模型写的,不用定位<template> <div class="app"> <div class="top"> <p>我是top</p> </div> <div class="content"> <原创 2021-01-30 15:17:01 · 232 阅读 · 0 评论 -
每日一练26:vue的选项卡功能编写
参考vue官网:动态组件效果如下:<template> <div class="demo"> <button v-for="tab in tabs" :key="tab.name" :class="['tab-button', { active: currentTab.name === tab.name }]" @click="currentTab = tab" > {{ tab原创 2020-11-19 16:23:27 · 330 阅读 · 2 评论 -
每日一练25:vue的vue-canvas-poster生成海报
本文参考:vue- canvas生成海报图看下效果:点击分享海报后弹出海报,点击X按钮和空白处海报消失的效果安装:yarn addvue-canvas-poster全局importCanvasPosterfrom'vue-canvas-poster'Vue.use(CanvasPoster)局部import {vueCanvasPoster} from 'vue-canvas-poster'components: {vueCanvasPost...原创 2020-11-19 11:54:20 · 2460 阅读 · 0 评论 -
每日一练24:Vue的城市列表tabbar样式
首先说下功能:效果如下功能一:点击右侧的H英文:如下效果功能二:页面滚动时:如下效果会看到英文固定到顶部效果好了,现在开始写页面样式我就不写了,第一个功能大概代码city.vue<template> <div class="city"> <van-cell-group> <van-cell :title="`当前选择城市:${this.name}`" /> <van-cell titl原创 2020-11-13 18:52:41 · 227 阅读 · 0 评论 -
Vue学习日记part7 slot基本用法
slot用法官网:slot简单用法1//HelloWorld页面<template> <div class="HelloWorld"><to-do>我是HelloWorld页面</to-do></div></template><script>import ToDo from '@/components/ToDo'export default { name: 'HelloWorld', c原创 2020-10-26 11:19:54 · 399 阅读 · 0 评论 -
Vue学习日记part6 Vue3新特特性-Setup、生命周期钩子、provide
Setup语法:Setup(props,context){}参数:1:props:是响应式的,当传入新的 prop 时,它将被更新(因为props是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性)export default { props: { title: String }, setup(props) { console.log(props.title) }}需要销毁 prop (可以通过使用setup函数中...原创 2020-10-22 16:56:12 · 1682 阅读 · 1 评论 -
每日一练23:二维码的实现
第一种写法qrcodenpm i qrcode --save<template> <div id="qrCode"> <div id="code"></div> <canvas id="canvas"></canvas> </div></template><script>import QRCode from "qrcode";export defa原创 2020-10-21 18:03:41 · 340 阅读 · 0 评论 -
每日一练22:vue的复制功能实现
vue-clipboard2安装npm install --save vue-clipboard2用法:方式1import Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)<div v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onE原创 2020-10-16 14:54:21 · 131 阅读 · 0 评论 -
Vue学习日记part5 Vuex
Stateimport { mapState } from 'vuex'computed:{ //第一种写法 ...mapState({ count: state => state.count }) //第二种写法(city为store的文件名) ...mapState('city', ['location']), //第三种写法 ...mapState(['location']),}...转载 2020-10-13 18:54:37 · 104 阅读 · 0 评论 -
Vue学习日记part4 生命周期
生命周期:Vue.js 2.x&Vue.js 3.0区别// Vue.js 2.x 定义生命周期钩子函数 export default { created() { // 做一些初始化工作 }, mounted() { // 可以拿到 DOM 节点 }, beforeDestroy() { // 做一些清理操作 } } // Vue.js 3.x 生命周期 API 改写上例 import { onMounted, onB.原创 2020-10-13 17:06:36 · 1211 阅读 · 1 评论 -
Vue学习日记part3 Vue.filter
Vue.filter( id, [definition] )参考:vue 过滤器filter(全面)用法:注册或获取全局过滤器。全局指令Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({ // ...}).原创 2020-09-25 18:37:06 · 156 阅读 · 0 评论 -
Vue学习日记全局 API总结
1:Vue.extend( options )用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特例,需要注意 - 在Vue.extend()中它必须是函数<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="https://unpkg.com/vu...原创 2020-09-25 17:07:43 · 165 阅读 · 0 评论 -
Vue学习日记part2 Vue.set
Vue.set( target, propertyName/index, value )用法:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi')参考:Vue—Vue.set的使用栗子:<div id="app"> <p v-for="(i.原创 2020-09-25 17:06:20 · 97 阅读 · 0 评论 -
Vue学习日记part1 Vue.directive
Vue.directive( id, [definition] )用法:注册或获取全局指令。全局指令// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})局部指令directives: { focus: { // 指令的定义 inserted:.原创 2020-09-25 17:02:32 · 236 阅读 · 0 评论 -
Vue-路由面试总结
1:keep-alive是什么?原理是什么?它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。activated:keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。 deactivated:keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。2:v-for v-if 执行先后顺序v-for 3:data为什么是个函数?因为vue是原创 2020-09-11 11:33:50 · 630 阅读 · 0 评论 -
面试重点 - vue真题演练
v-show和v-if的区别v-show通过CSS display控制显示和隐藏 v-if组件真正的渲染和销毁,而不是显示和隐藏 频繁切换显示状态用v-show,否则用v-if为何在v-for中用key必须用key,且不能时index和random diff算法中通过tag和key来判断,是否是sameNode 减少渲染次数,提升渲染性能描述Vue组件生命周期(父子组件)单组件生命周期图 父子组件生命周期关系* Vue组件如何通讯父子组件props和this.$emit 自原创 2020-09-11 11:35:16 · 177 阅读 · 0 评论 -
面试重点-vue原理
数据驱动视图传统组件,只是静态渲染,更新还要依赖于操作DOM 数据驱动视图-Vue MVVM 数据驱动视图-React setState (暂时按下不表)Vue MVVM(模型视图视图模型)总结:组件化 数据驱动视图 MVVMVUE的响应式组件data的数据一旦变化,立即触发视图的更新 实现数据驱动视图的第一步 考察Vue原理的第一题核心API-Object.defineProperty Object.defineProperty的缺点(vue3.0启用P原创 2020-09-11 11:35:30 · 4518 阅读 · 0 评论 -
VueDay1 基本使用
Vue使用基本使用,组件使用 高级特性 Vuex和Vue-router使用Vue基本使用指令,插值插值 表达式 指令 动态属性 v-html:会有XSS风险,会覆盖子组件computed和watchcomputed有缓存,data不变则不会重新计算 watch如何深度监听?deep:true watch监听引用类型,拿不到oldValclass和style使用动态属性 使用驼峰式写法条件渲染v-if v-else的用法,可使用变原创 2020-09-11 11:36:04 · 151 阅读 · 0 评论 -
Ⅶ期VUE的Day4:组件
一: 组件componentv1.什么是组件?组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码组件是自定义元素(对象)2.定义组件的方式先创建组件构造器,然后由组件构造器创建组件 直接创建组件 <div id="itapp"> <hello></hello> <my-world></my-world&...原创 2020-09-11 11:43:04 · 91 阅读 · 0 评论 -
Ⅶ期VUE的Day3:vue实例的属性和方法
一:vue实例的属性和方法1.属性vm.$el:获取vm关联的元素 vm.$data:获取数据对象data vm.$options:获取自定义 vm.$refs:获取所有添加ref属性的元素2.方法vm.$mount():手动挂载vue实例 vm.$destroy():销毁实例 vm.$nextTick(callback):在dom更新完后再执行回调函数 vm.$set(object,key,value) ...原创 2020-09-11 11:42:31 · 170 阅读 · 0 评论 -
Ⅶ期VUE的Day2:axios发送http请求、vue生命周期
一、发送AJAX请求1.简介vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护参考:GitHub上搜索axios,查看API文档2.使用axios发送AJAX请求2.1安装axios并引入npminstallaxios-S也可直接下载axios.min.js...原创 2020-09-11 11:43:17 · 232 阅读 · 0 评论 -
每日一练12:VUE编写简单的侧边导航栏
https://www.cnblogs.com/snandy/archive/2011/03/13/1981611.htmlHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...原创 2019-11-27 13:50:40 · 617 阅读 · 0 评论 -
每日一练09:VUE编写简易添加商品和删除商品功能
效果如下:说明:利用goods.length获取物品全部数量 利用循环把物品循环出来 this.goods.splice(idx, 1)删除当前商品 用for (var i in this.goods) {if (this.goods[i].name == name) {return;}}去重 为了避免传递进去的name值有空格,我们这里使用name.trim(),...原创 2019-11-21 15:24:17 · 453 阅读 · 0 评论 -
每日一练08:VUE写的简易穿梭框
效果图:代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfil...原创 2019-11-20 16:58:57 · 218 阅读 · 0 评论 -
拼搏30天VUE.js之Vue 實體的生命週期(Part3)
生命週期函式示意圖:注,上图来自于@老马自嘲的《Vue入门系列之Vue实例详解与生命周期》一文。著作权归作者所有。創建一個vue實例的四個過程:注,上图来自于@Airen的博客的《Vue 2.0的学习笔记: Vue实例和生命周期》一文。著作权归作者所有。注:上图来自@浅白的《Vue生命周期》一文。示例也参考此文。著作权归作者所有。beforeCreate: ...转载 2019-03-15 15:22:55 · 178 阅读 · 0 评论 -
拼搏30天VUE.js之 Class 与 Style 绑定(Part4)
数据绑定定義:class 与 style 是 HTML 元素的属性,用于设置元素的样式。因为它们都是属性,我们可以用v-bind处理它们:我们只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind用于class和style时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。來自W3c《Vue.js Class 与 St...转载 2019-03-15 17:26:56 · 297 阅读 · 0 评论 -
拼搏30天VUE.js之 set(Part8)
在 vue 中,建立實體後才加入的屬性因為沒有被給予 getter 及 setter ,所以不會被響應系統察覺,但使用set方法加入的屬性則會被賦予 getter 及 setter ,因此使用set加入的屬性都可以被響應在頁面上。* vue 無法在建立實體後增加屬性只有一開始定義在選項物件上的屬性才會被 vue 當作響應物件,其他未在選項物件上的屬性都無法用直接加入的方式使其成為響...原创 2019-03-20 14:47:31 · 173 阅读 · 0 评论 -
拼搏30天VUE.js之 条件渲染(v-if 和 v-show)(Part5)
PS:在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令。这里所说的指令就是directive,指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。咱们先来看v-if指令。其作用就是根据表达式的值true或false在DOM中生成或者移除一个元素(或多个元素)...原创 2019-03-16 14:10:11 · 210 阅读 · 0 评论 -
拼搏30天VUE.js之v-text和v-html(Part6)
簡單回顧:JavaScript相关知识点在JavaScript中有textContent、innerHTML、innerText、outerText、outerHTML和nodeValue。这些属性都可以用来获取某个元素的内容,也可以将内容或标签插入到某个元素中。看上去和渲染内容有点相关。简单的理解一下这几个属性:innerHTML:获取从对象的起始位置到终止位置的全部内容,包括H...原创 2019-03-16 14:39:28 · 181 阅读 · 0 评论 -
拼搏30天VUE.js之基础语法(Part1)
基本原理Vue.js 是處理 View Layer 的 Library ,使用 Vue.js 時,我們會操作 View Model (也就是 Vue.js 的實體)使其依照從商業邏輯取得的資料做改變,配合在 HTML 中 Vue.js 提供的模板語法來改變配置,重新渲染後使畫面產生變化。下圖是一個 Vue.js 簡單的架構圖:View : 透過 HTML 及模板語法渲染出來的...原创 2019-03-12 13:44:00 · 176 阅读 · 0 评论 -
拼搏30天VUE.js之 Methods(Part9)
今天來學習一下Methods這個方法,根據大漠老師的學習筆記,其實就把這個屬性講的很明白,自己再來總結一下。大家也可以參考大漠老師的筆記看哈。網址在這裡原文:https://www.w3cplus.com/vue/working-with-methods-in-vue.html©w3cplus.com* methods属性可以向Vue实例引入新属性。该属性应该包含一个对象,其中键...原创 2019-03-21 11:56:02 · 206 阅读 · 0 评论 -
拼搏30天VUE.js之v-on(Part11)
今天跟著大漠老師的《Vue 2.0学习笔记:v-on》一文和VUE官網來學習,v-on指令的應用總結。v-on語義:支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。 用在普通元素上时,只能监听原生DOM事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。 在监听原生DOM事件时,方法以事件为唯一的参数。如果使用内联语句,语句...原创 2019-03-25 14:50:17 · 233 阅读 · 0 评论 -
拼搏30天VUE.js之计算属性(Part7)
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符...原创 2019-03-18 21:05:48 · 292 阅读 · 0 评论 -
拼搏30天VUE.js之組件(Part10)
今天跟著大漠老師學習組件通訊的用法或者VUE官網中的props一文Component组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树注册一个全局组件语法格式如下:Vue.component(tagName, o...转载 2019-03-22 17:09:22 · 140 阅读 · 0 评论 -
拼搏30天VUE.js之 v-model(Part12)
v-model方法基础用法你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model会忽略所有表单...原创 2019-03-27 15:31:37 · 202 阅读 · 0 评论 -
拼搏30天VUE.js之V-for(Part2)
今天來複習一波v-for,這個真的是超級好用的屬性。v-for指令基于一个数组渲染一个列表。有以下5種方法:<div v-for="item in items">{{ item }}</div> <div v-for="(item, index) in items">{{ index }} {{ item.age}}</div> ...原创 2019-03-13 23:01:16 · 207 阅读 · 0 评论