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

认识vue——总结

时间：2023-04-01 12:55:45 vue.js

Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。Vue特点：简单、易学、轻量Vue常用指令v-model::双向数据绑定，一般用于表单元素v-for：对数组或对象进行循环操作v-on：用于绑定事件，用法:v-on:event="function"v-show:用于显示或隐藏元素，本质是实现v-if...event1事件缩写v-on:event，缩写为：@eventname2事件对象中的事件对象vue使用事件；这个事件包含了事件相关的信息，比如事件来源，事件类型，偏移量等等...例如：点击按钮，返回对应按钮的文本给我

属性1属性绑定及缩写v-bind用于属性绑定，格式v-bind：attribute=""，可缩写为：attribute=""2类和样式属性如：

模板介绍Vue使用基于HTML的模板语法将DOM绑定到Vue实例中的数据模板是{{}}，用于数据绑定并显示在页面上，这个{{}}（与Angular相同）。数据绑定方式1双向绑定：v-model2单项绑定：使用{{}}。其他说明v-once数据只绑定一次v-pre直接显示过滤器原样用法同Angular{{message|大写}}

Vue1.0中内置了很多过滤器，例如：capitalizeuppercaseuppercasealluppercaselowercasealllowercasecurrencyoutputmoneyanddecimalpointpluralizebecomespluralize...所有内置的过滤器在Vue2.0中都被移除了。解决方法：（1）使用第三方工具库：如loadash、date-fns日期格式化、会计货币格式化；(2)使用自定义过滤器；lifecyclehook生命周期钩子描述Vue2.0beforeCreate实例初始化完成。Created在实例化完成后调用。数据观察、属性方法计算、watch/event事件回调已经完成，还没有开始挂载。$el属性在Mount开始挂载之前还没有被调用。相关render函数第一次被调用。此时的DOM是数据挂载前的DOM。数据尚未挂载。挂载数据挂载后调用初始化的el替换为vm.$el，挂载到实例后的hookbeforeUpdate更新数据时调用，发生在虚拟DOM重新渲染和打补丁之前.updated在虚拟DOM重新渲染并在数据驱动器下打补丁后调用。这个时候组件DOM已经更新了。activatedkeep-alive在组件被激活时被调用。如果使用keep-alive做缓存，想在每次组件切换时更新数据，那么更新数据的请求方法就要写在钩子函数deactivatedkeep-alive中，当组件去激活时，调用beforeDestroy之前实例被销毁，实例也可以使用被销毁的实例销毁后调用，实例所指示的一切都将被解除绑定，所有事件监听器将被移除，所有子实例也将被销毁官方生命周期图示例varvue=newVue({el:"#app",beforeCreate:function(){//创建前console.log('beforeCreate');},created:function(){//创建后console.log('created');},beforeMount:function(){//加载之前{//console.log('beforeUpdate');},updated:function(){//console.log('updated');},beforeDestroy:function(){//销毁前的console.log('beforeDestroy');},destroyed:function(){//销毁后console.log('destroyed');}});总结官方demo不是很友好，多学点总是好的！！--对自己

上一篇：影响了几代前端人的20个里程碑式顶级开源项目！哪个项目将成为2021年的里程碑？

下一篇：vue编辑组件

认识vue——总结相关文章

最新推荐

猜你喜欢