资讯专栏INFORMATION COLUMN

vue学习笔记(二)

ideaa / 1147人阅读

摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。

一、vue生命周期

vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。

这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。

beforeCreate(){  //组件实例刚刚创建,还未进行数据观测和事件配置
                
},
created(){  //实例已经创建完成,并且已经进行数据观测和事件配置
                
},
beforeMount(){//模板编译之前,还没挂载
                
},
mounted(){ //模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示
                    
},
beforeUpdate(){//组件更新之前
                
},
updated(){//组件更新之后
                
},
beforeDestroy(){//组件销毁之前
                
},
destroyed(){  //组件销毁之后
                    
}

这几个钩子中,最常用的是created()mounted()

二、计算属性

计算属性也是用来存储数据,但具有以下几个特点:

数据可以进行逻辑处理操作

对计算属性中的数据进行监视

1、基本用法
{{addZero}}
new Vue({ el: "#app", data: { num: 8 }, computed: { //这是计算属性的get方法,用于取值 addZero() { return this.num > 10 ? this.num : "0" + this.num; } } })

这里的addZeronum一样,都是属性。不过addZero是依赖于num、进行计算后的值。一旦num的值发生变化,addZero的值也会随之变化。

 
{{num}}----{{addZero}}
new Vue({ el: "#app", data: { num: 8 }, methods: { change: () => { this.num++; } }, computed: { addZero:() => { return this.num > 10 ? this.num : "0" + this.num; } } })

一旦我们点击按钮改变num的值,那么因为计算属性实时监测依赖项,addZero也会跟着发生变化。

2、计算属性 vs 方法

将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别?

区别一:计算属性是基于它的依赖进行实时更新的,方法则是调用才更新

区别二:计算属性是有缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。操作一个没有依赖项的值也是如此。

官方文档给出了下面这个例子:

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性存在缓存,这里的now值不会发生变化。

3. get和set

计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。

        
{{num}}----{{addZero}}
new Vue({ el: "#app", data: { num: 8 }, methods: { change(newNumber) { this.addZero = newNumber; } }, computed: { addZero: { get() { return this.num > 10 ? this.num : "0" + this.num; }, set(newNum) { this.num = newNum } } } })

我们再change方法中改变addZero属性的值的时候会自动调用它的set方法。

三、实例属性和方法

vue中给实例和属性提供了若干属性和方法。

1、属性

获取属性的语法:实例名.属性名
以下是常用的属性:

vm.$el: 获取vue实例关联的元素DOM,进而可以对其进行操作

vm.$data: 获取数据对象data

vm.$options:获取选项,自定义的选项也可以在这里获取。

vm.$refs:获取所有添加ref属性的元素dom对象,进而可以对其进行操作

2、方法 vm.$mount()

手动挂载vue实例

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
vm.$destroy()

销毁实例

vm.$destroy();  //销毁实例所占的内存空间
vm.$nextTick(callback)

在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
 
 //修改数据
 vm.msg="foo";
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$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}}
var vm = new Vue({ data: { msg: "Hello vue.js", user: { name: "hedawei", gender: "man" } }, methods: { addAge() { /* this.user.age = 22; */ this.$set(this.user, "age", 22); } } }).$mount("#app");

方法中使用原始的添加属性方法的话不会在模板中显示。使用$set方法会实时监控数据,然后添加。

vm.$watch(监听的属性,callback)

监控vue实例的变化

 vm.$watch("msg", (newValue, oldValue) => {
    console.log("msg被修改啦,原值:" + oldValue + ",新值:" + newValue);
 });

如果需要监控深度数据变化(例如监控一个对象中的某个属性),则需要在选项中添加{deep:true}

四、自定义指令

自定义指令分为自定义全局指令和自定义局部指令。

1、自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)。注:使用指令时必须在指名名称前加前缀v-,即v-指令名称

简单示例:

Vue.directive("hello",{
    bind(){ //常用!!
        alert("指令第一次绑定到元素上时调用,只调用一次,可执行初始化操作");
    },
    inserted(){
        alert("被绑定元素插入到DOM中时调用");
    },
    update(){
        alert("被绑定元素所在模板更新时调用");
    },
    componentUpdated(){
        alert("被绑定元素所在模板完成一次更新周期时调用");
    },
    unbind(){
        alert("指令与元素解绑时调用,只调用一次");
    }
 });

这里定义了一个名为hello的指令,指令定义函数提供了几个钩子函数,分别在不同的时期生效。我们像下面这样使用这个指令:

hello vue.js

大多数情况下,我们只需要使用bindupdate钩子函数。vue里提供了函数的简写形式:

Vue.directive("hello", function () {
    alert("hello vue.js");
})  

钩子函数有两个常用的参数elbindingel是绑定的DOM对象,binding是一个对象,包含若干属性。

拿到DOM对象,我们就可以对DOM进行一些操作。

hello vue.js

Vue.directive("hello", function (el,binding) { el.style.color = "red"; //属性name是指令的名字(不带v-) console.log(binding.name); //hello //属性value是传递给指令的值 console.log(binding.value); //alice //属性expression是指令值的字符串形式(个人感觉就是类似变量名) console.log(binding.expression); //msg //属性arg是传递给指令的参数(和传值写在一起容易令初学者困惑,下面分开写 //合在一起写的写法是

hello vue.js

) //

hello vue.js

console.log(binding.arg); //123 //属性modifiers是一个包含修饰符的对象。 //与传参传值合在一起的写法是

hedawei

//

hello vue.js

console.log(binding.modifiers); //{bar:true} }) var vm = new Vue({ el: "#app", data: { msg: "alice" } })
2、局部自定义指令

局部自定义指令写在实例的directives选项中。

  var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法与全局自定义指令一致。

五、过度(动画)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画:transition、animation属性。

1、基本用法

使用transition组件,将要执行动画的元素包含在该组件内:

    
        运动的元素
   

我们需要为其定义一个name属性,以便后面为其添加css样式。

动画有6个CSS类名,下面结合例子说明:


    
    

2、钩子函数

vue中给过渡的不同时期提供了不同的钩子函数。


        

new Vue({ ... 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的自定义过渡类名结合第三方动画库实现自定义动画效果。这六个自定义类名和vue内置的类名类似:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class
示例:

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 

未完待续。。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51380.html

相关文章

  • Vue.js学习系列 —— vuex学习实践笔记(附DEMO)

    摘要:有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱,之后会进行整理优化。 上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本...

    DobbyKim 评论0 收藏0
  • vue.js学习笔记 - 组件(

    摘要:当组件给其他人使用时这很有用,因为这些验证要求构成了组件的,确保其他人正确地使用组件。有特性的称为命名。例如,假定我们有一个组件,它的模板为父组件模板渲染结果为 一、注册 // 定义 var MyComponent = Vue.extend({ template: A custom component! }); // 注册 Vue.component(my-component, ...

    Betta 评论0 收藏0
  • vue学习笔记

    摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

    klivitamJ 评论0 收藏0
  • vue学习笔记

    摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

    Pines_Cheng 评论0 收藏0
  • vue学习笔记(三)

    摘要:直接创建组件使用标签名组件模板,根据组件构造器来创建组件。相应的,实例也被称为父组件。而且不允许子组件直接修改父组件中的数据,强制修改会报错。 一、组件 (一)什么是组件 组件(Component)是 Vue.js最强大的功能之一。组件可以扩展 HTML元素,封装可重用的代码组件是自定义元素(对象)。 (二)创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词,例如:。 1、使用...

    fsmStudy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<