当前位置： 首页 > Web前端 > HTML

Vue学习笔记(二)

时间：2023-04-02 22:34:41 HTML

1.Vue生命周期一个Vue实例从创建到销毁的过程称为生命周期，一共有八个阶段。这八个阶段中的每一个都有一个称为挂钩函数的实例选项。供用户在相应的阶段进行操作。beforeCreate(){//刚刚创建了组件实例，还没有进行数据观察和事件配置},created(){//已经创建了实例，还进行了数据观察和事件配置},beforeMount(){//模板编译前，还没有挂载},mounted(){//模板编译完成后，已经挂载，此时会渲染页面，让数据上页面可以显示},beforeUpdate(){//组件更新前},updated(){//组件更新后},beforeDestroy(){//组件销毁前},destroyed(){//afterthecomponentisdestroyed}在这些钩子中，最常用的是created()和mounted()。2.计算属性计算属性也用于存储数据，但具有以下特点：可以对数据进行逻辑处理，以监控计算属性中的数据1.基本用法{{addZero}}

newVue({el:'#app',data:{num:8},computed:{//这个是computed属性的get方法，用来取值addZero(){returnthis.num>10?this.num:'0'+this.num;}}})在这里，addZero与num相同，是一个属性。但是，addZero取决于num和计算值。一旦num的值发生变化，addZero的值也会随之变化。{{num}}----{{addZero}}
点击更改num
newVue({el:'#app',data:{num:8},methods:{change:()=>{this.num++;}},computed:{addZero:()=>{returnthis.num>10?this.num:'0'+this.num;}}})一旦我们点击按钮改变num的值，addZero也会改变，因为计算属性实时监控依赖关系。2.Computedpropertyvsmethod将计算属性的get函数定义为方法，也可以实现与计算属性类似的功能。那么两者有什么区别呢？区别一：计算属性是根据依赖关系实时更新的，方法是调用时才更新。差异2：计算属性被缓存。只要相关依赖没有变化，多次访问计算属性得到的值就是之前缓存的计算。因此，它不会被执行多次。操作没有依赖关系的值也是如此。官方文档给出了如下例子：computed:{now:function(){returnDate.now()}}computed属性有缓存，这里的now值不会改变。3.get和set计算属性由get和set两部分组成，分别用于获取计算属性和设置计算属性。默认情况下，只有get。如果需要设置，需要自己添加。{{num}}----{{addZero}}
点击更改num
newVue({el:'#app',data:{num:8},methods:{change(newNumber){this.addZero=newNumber;}},computed:{addZero:{get(){returnthis.num>10?this.num:'0'+this.num;},set(newNum){this.num=newNum}}}})将在我们更改addZero属性的值时自动调用改变方法它的设置方法。3.实例属性和方法Vue为实例和属性提供了几种属性和方法。1.Attributes获取属性的语法：实例名。属性名下面是常用的属性：vm.$el：获取与vue实例关联的元素DOM，然后可以对其进行操作vm.$data：获取数据对象datavm.$options：获取选项，自定义选项也可以在这里获得。vm.$refs：获取所有添加了ref属性的elementdom对象，然后可以对其进行操作2.方法vm.$mount()手动挂载vue实例varvm=newVue({data:{msg:'Hellovue.js'}}).$mount('#app');vm.$destroy()销毁实例vm.$destroy();//销毁实例占用的内存空间vm.$nextTick(callback)在DOM更新完成后执行回调函数，一般在修改数据后使用该方法获取更新的DOMvarvm=newVue({data:{msg:'Hellovue.js'}}).$mount('#app');//修改数据vm.msg='foo';console.log(vm.$refs.title.textContent);//你好vue.jsvm.$nextTick(function(){console.log(vm.$refs.title.textContent);//foo});DOM尚未更新。Vue实现的响应式，并不是说数据改变后DOM马上改变。它需要按照一定的策略更新DOM，这需要时间！使用$nextTick方法等待DOM更新后再获取数据。vm.$set(target,key,value)通过vue实例的$set方法给对象添加属性，可以实时监控。{{user.name}}
{{user.age}}
添加属性
varvm=newVue({data:{msg:'Hellovue.js',user:{name:'hedawei',gender:'man'}},methods:{addAge(){/*this.user.age=22;*/this.$set(this.user,'age',22);}}}).$mount('#app');如果使用原来在方法中添加属性的方法，是不会在模板中显示的。使用$set方法会实时监控数据，然后添加。vm.$watch(monitoringproperty,callback)监听vue实例的变化vm.$watch('msg',(newValue,oldValue)=>{console.log('msg已修改，原值：'+旧值+',新值:'+newValue);});如果需要监控深度数据变化（比如监控对象中的某个属性），需要在选项中加上{deep:true}。4.自定义指令自定义指令分为自定义全局指令和自定义局部指令。1.自定义全局指令，使用全局方法Vue.directive(directiveID,definitionobject)。注意：使用命令时，必须在指定名称前加上前缀v-，即v-命令的名称。简单例子：Vue.directive('hello',{bind(){//常用!!alert('指令第一次绑定元素时调用，只调用一次，初始化操作即可执行');},inserted(){alert('绑定元素插入DOM时调用');},update(){alert('绑定元素所在模板更新时调用');},componentUpdated(){alert('当绑定元素所在的模板完成一个更新周期时调用');},unbind(){alert('当指令与元素解除绑定时调用，只调用一次');}});这里定义了一个名为hello的指令，指令定义函数提供了几个钩子函数，分别在不同的时间生效。我们这样使用这个指令：hellovue.js

在大多数情况下，我们只需要使用bind和update钩子函数。Vue提供了函数的简写形式：Vue.directive('hello',function(){alert("hellovue.js");})hook函数有两个常用的参数el和binding。el是绑定的DOM对象，binding是一个包含多个属性的对象。拿到DOM对象后，我们就可以对DOM进行一些操作了。hellovue.js

Vue.directive('hello',function(el,binding){el.style.color="red";//属性名是指令名(withoutv-)console.log(binding.name);//hello//属性值是传递给命令的值console.log(binding.value);//alice//属性表达式是命令的字符valueString形式（个人感觉类似于一个变量名）console.log(binding.expression);//msg//属性arg是传递给command的参数（和passed一起写容易让初学者混淆值，下面单独写//一起写的是hellovue.js

)//hellovue.js

console.log(binding.arg);//123//属性修饰符是一个包含修饰符的对象。//传递参数和传递值的组合是hedawei

//hellovue.js

console.log(binding.modifiers);//{bar:true}})varvm=newVue({el:'#app',data:{msg:'alice'}})2.本地自定义指令本地自定义指令写在实例的指令选项中。varvm=newVue({el:'#app',data:{msg:'alice'},methods:{},directives:{word:function(el,binding){console.log(binding.name);}}})其他用法与全局自定义指令一致。五、过渡（动画）Vue提供了多种不同的方式在插入、更新或移除DOM时应用过渡效果。本质上还是使用了CSS3动画：transition和animation属性。1.基本用法使用transition组件，在组件中包含要动画的元素：elementinmotion我们需要为它定义一个name属性，这样我们就可以添加css样式了以后再说吧。动画的CSS类名有6个，下面举例说明：点击

2.hook函数中的transition与vue不同不同时期提供钩子函数@after-leave="afterLeave">

newVue({...methods:{beforeEnter(el){alert('动画进入前');},enter(el){alert('动画进入');},afterEnter(el){alert('动画进入后');},beforeLeave(el){alert('动画离开前');},leave(el){alert('动画离开');},afterLeave(el){alert('动画离开后');}}});在这几个不同的时期，我们可以得到过渡元素对象的DOM对其进行操作。3.以上用于多元素过渡的标签只适用于单元素过渡。过渡多个元素，需要使用标签，绑定key属性设置不同的值。点击

4.结合第三方库（animate.css）我们可以使用vue的自定义转场类Name结合第三方动画库来实现自定义动画效果。这六个自定义类名类似于Vue内置的类名：enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class例子：p{width:300px;高度：300px；背景颜色：红色；保证金：0自动；}点击

待续。..

Vue学习笔记(二)相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。