vue
初郁
愿你前程灿烂,愿你得偿所愿
展开
-
vue3 reactive,ref, toRefs
ref() 函数用来根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串、数字、boolean 等,返回值是一个对象,这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加.valueimport { ref } from 'vue'export function message() { const list = ref<any[]>([]) const loading = ref(false) const noMore = ref原创 2021-11-17 11:48:42 · 921 阅读 · 0 评论 -
vue 输入框失焦时做本地存储
<van-field v-model="phone" name="phone" type="digit" maxlength="13" input-align="right" placeholder="请输入11位数字" label="手机号" @blur="setLocalStorage" />created () { let data = window.localStorage.getItem('financialData') if (data) {原创 2021-11-10 18:27:30 · 1109 阅读 · 0 评论 -
vue filters 处理 -将1234转换为ABCD
<div v-for='(item, i) in data' :key="i">{{item.answerId | transNumber}}</div> filters: { transNumber (i) { const dist = { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E' } return dist[i]原创 2021-11-10 18:14:55 · 1512 阅读 · 0 评论 -
vue input输入时清空默认value=0,取消焦点时恢复0
场景:input框中默认存在value=0,输入时将0清空,当value=’ '时,恢复value=0<van-field v-model="arr[0].value" name="stockInvest" type="digit"maxlength="13" :formatter="zeroFormatter"input-align="right"label-width="50%"@blur="onBlur(0)" /> methods: { zeroForma原创 2021-11-09 18:56:37 · 3487 阅读 · 0 评论 -
vue项目总结-stylus封装主题色
下载styluscnpm install stylus stylus-loader --save在css目录下新建一个bgColor.styl的文件$bgColor = red$textColor = #fff在vue文件中写上<style scoped lang='stylus'>@import '../../../assets/css/bgColor.styl'.header{ background:$bgColor; color:$textColor;}..原创 2021-05-16 11:23:17 · 220 阅读 · 0 评论 -
常用的vue属性,方法,指令(787记忆法)
Vue的7种属性el绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符data用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中methods放置页面中的业务逻辑,js方法一般都放置在methods中computed定义计算属性的方法template用来设置模板,会替换页面元素,包括占位符watchwatch:function(new,old){ … }监听data中数据的变化,两个参数,一个返回新值,一个返回旧值ren原创 2021-05-01 11:42:43 · 475 阅读 · 0 评论 -
对vue的理解
vue 是一套用于构建用户界面的 自底向上增量开发的 渐进式的 基于MVVM的 框架。核心是关注视图层,解决数据绑定的问题。核心思想数据驱动:视图内容根据数据的改变而改变组件化:增加代码复用性,可维护性,可测试性,提高开发效率,方便重复使用,体现了高内聚,低耦合。个人理解由于vue是基于MVVM思想的双向绑定,让我们可以减少对dom元素的频繁操作,直接在数据层和视图层建立一种联系,方便使用。并且它通过组件化的方式,增加了代码的可复用性,可维护性,提高了开发效率。...原创 2021-05-01 10:54:03 · 1647 阅读 · 0 评论 -
vue基础
v-text设置标签的文本值◆v-text指令的作用是:设置标签的内容(textContent)◆默认写法会替换全部内容使用差值表达式{}可以替换指定内容◆内部支持表达式<div id="app"><h2 v-text="message"></h2> //程序员<h2 v-text="message+'!'"></h2> //程序员!<h2>{{ message+"!!!" }}你好呀</h2> //程序员!原创 2021-03-21 10:02:35 · 312 阅读 · 1 评论 -
Vue 的双向数据绑定
Model 如何改变View从Model 到View 的映射(Data Binding),这样可以大量节省你人肉来update View的代码View 又是如何改变Model 的从View 到 Model 的事件监听(DOM Listeners),这样你的Model 会随着View触发事件而改变数据双向绑定即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单原创 2021-03-11 16:20:25 · 106 阅读 · 0 评论 -
vue实现 计数器
data中定义数据:比如nummethods中添加两个方法:比如add(递增),sub(递减)使用v-text将num设置给span标签使用v-on将add,sub分别绑定给+,按钮累加的逻辑:小于10累加,否则提示递减的逻辑:大于0递减,否则提示知识点创建Vue示例时:el(挂载点),data(数据),methods(方法)v-on指令的作用是绑定事件,简写为@方法中通过this,关键字获取data中的数据v-text指令的作用是:设置元素的文本值,简写为{}<!DOCTYP.原创 2021-03-08 18:51:11 · 350 阅读 · 0 评论