当前位置: 首页 > Web前端 > vue.js

vue基础常用特性

时间:2023-04-01 00:36:11 vue.js

vue常用特性表单基本操作通过v-modelmale女性

获取复选框中的值1.通过v-model2.是一样的如获取单选框中的值3.复选框checkbox结合数据中的爱好时,我们需要将其定义为数组,否则无法实现多选;Hobby:篮球唱歌写代码
```通过v-model获取下拉框和文本框中的值Occupation:请选择职业...老师软件工程师律师
表单修饰符1.number转换为值**注:**1.开始输入非数字字符串时,因为Vue无法将字符串转换为数值2.所以属性值会更新为中的同一个字符串realtime即使后面输入了一个数字,也会被当成String`2.trim自动过滤用户输入的首尾空白字符`**注:**1.只过滤首末字符rs可以去掉但是中间的空格不行`3.lazy将输入事件切换为change事件`**注意:**1.lazy修饰符延迟同步更新属性值的时机。2.将原本绑定input事件的同步逻辑改为绑定change事件(失去焦点后触发)自定义命令1.内置命令不能满足我们的特殊需求2.vue允许我们自定义命令Vue.directiveRegisterglobaldirectives
Vue.directiveregisterglobal带参数的指令自定义指令本地指令1.本地指令需要在指令中定义options的用法与全局用法相同2.局部指令只能在当前组件中使用3.当全局指令与局部指令重名时,以局部指令为准计算属性computed1.将过多的逻辑放在模板中会使模板过重,难以维护使用计算属性可以使模板更简洁2.计算属性根据其响应式依赖进行缓存3.计算更适合处理多个变量或对象并返回一个结果值,也就是一个数字如果其中一个变量发生变化,我们监控的值也会发生变化项数:商品单价:总价:{{totalPrice}}计算属性和方法之间的差异`1.计算属性和方法区别:计算的属性是根据依赖关系(取决于数据)缓存的,而方法不缓存。2.计算属性的方法不改变依赖数据不执行第二次。3.如果计算属性的方法比较耗时,当数据不变时,可以直接取出第一次计算的结果,解决资源监听器watch1。使用watch响应数据变化。2.一般用于异步或开销大的操作。3.watch中的属性必须是data中已经存在的数据。4.当需要监听一个对象的变化时,普通的watch方法无法监听到对象内部属性的变化。只有数据中的数据才能监测到变化。这时候需要deep属性进行深度监控
Name:
姓氏:
{{fullName}}
Filter1.Vue.js允许自定义过滤器,可以用于一些常见的文本格式化2.过滤器可以用在两个地方:双花括号插值和v-bind表达式。3、过滤器要加在JavaScript表达式的末尾,用“管道”符号表示4、支持级联操作5、过滤器不改变真实数据,只改变渲染结果,返回过滤后的版本6.全局注册的时候是一个filter,没有s。本地过滤器是过滤器,
{{msg|上}}
{{msg|upper|lower}}
测试数据在过滤器中传递参数{{消息|filterA('arg1','arg2')}}生命周期`1.事情从生到死的过程开始``2。Vue实例从创建到销毁的过程,会伴随一些函数的自调用。我们将这些函数称为钩子函数`beforeCreate,在实例初始化之后,数据观察和事件配置之前被调用。此时,页面的数据、方法和DOM结构都没有初始化。无能为力。创建实例后立即调用created。此时数据和方法可用,但页面尚未呈现。beforeMount在挂载开始之前被调用。此时页面上看不到真实的数据。它只是一个模板页面。mountel被新创建的vm.$el替换并挂载到实例上去后调用这个钩子。数据实际上已经呈现在页面上。在这个钩子函数中,我们可以使用一些第三方插件beforeUpdate在数据更新时调用,发生在虚拟DOM打补丁之前。页面上的数据还是oldupdate,虚拟DOM因为数据变化重新渲染打补丁,之后会调用这个hook。页面上的数据已替换为最新的beforeDestroy实例。在销毁实例之前,调用被销毁的实例。实例销毁后,调用数组变异方法`1。在Vue中,直接修改对象属性的值是无法触发响应的。当你直接修改对象属性的值时,你会发现只有数据变了,而页面的内容并没有变``2.变异数组的方法是扩展数组方法的功能on在保持数组方法原功能不变的前提下`push()在数组末尾添加一个元素,成功返回当前数组的长度pop()删除数组最后一个元素,成功返回的值被删除元素shift()删除数组第一个元素,成功返回被删除元素的值unshift()向数组前面添加一个元素,成功返回当前数组序号的长度(必填),第三个是删除后要在原来位置替换的值。sort()sort()默认将数组按照字符编码从小到大排序,成功返回排序后的数组。reverse()reverse()将数组倒序,成功返回倒序数组替换数组不会改变原数组,而是始终返回一个新数组filterfilter()方法创建一个新数组,新数组中的元素为通过检查指定数组中满足条件的所有元素来检查。concatconcat()方法用于连接两个或多个数组。此方法不会更改现有数组sliceslice()方法从现有数组中返回选定的元素。该方法不修改数组,而是返回一个子数组动态数组响应数据Vue.set(a,b,c)触发视图再次更新,数据变为动态。a是要改变的数据,b是数据。项数,c为变化的数据