vue教程【二】-vue用法及生命周期

Vue教程 admin 暂无评论


Vue.js的用法

Vue.js的用法

  1. 创建Vue

    • 通过script标签的src属性引入vue.js文件

    • 创建一个vue的实例，设置根元素el，设置数据存储对象data，设置函数存储对象methods。

    • 在DOM添加vue的根元素，在其中就可以使用vue.js的方法啦~

  2. 向写好的msg中添加数据，有两种方法

    • 通过vm.msg将数据重写，这个方法消耗性能，并且需要将原来就存在的数据重新写入。

    • 通过vm.$set(vm.msg,key,value)的方法，将键值对写入msg中。

对事件的修饰

  • 键盘事件修饰符，当设置键盘修饰符后，必须按下那个键位才能执行，两个修饰符的话就得同时按下两个键位

  • .stop  e.stopPropagation ||e.cancelBubble = true 阻止事件传播

  • .prevent  e.preventDefault || e.returnValue = false  阻止默认事件

  • .capture  将当前元素变为捕获，其余元素按照默认的冒泡传播

  • .self  事件源是自己的时才会被触发

  • .once 只能触发一次

Vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。

1.钩子函数

  1. beforeCreate：在初始化之前执行，基本不会使用，因为在这个阶段，数据和方法都没有渲染

  2. created：初始化完成时执行。此阶段能获取到数据和方法，通常在这个阶段发起ajax请求，获取数据，然而，挂载阶段还没开始，$el 属性目前不可见。

  3. beforeMount：挂载前执行，即在DOM渲染实例之前执行，没有什么实际意义。

  4. mounted：挂载后执行，即文档渲染后执行，可以获取DOM元素，这个方法可以实现根元素的创建，vm = new Vue();vm.mounted="#app"，这个语句和在el:"#app"是一样的

    • this.$nextTick：这个属性是在DOM元素更新结束后再去操作什么事情，这个是一个异步的过程，将回调延迟到下次 DOM 更新循环之后执行。如果在mounted阶段改变dom，然后想要获取改变后的结果，因为dom渲染是异步的，所以需要放在这个方法内进行，否则会发生获取的长度和获取的元素不一的bug。只有Vue的dom渲染是异步的

    • this.$data：vm上的数据

    • this.$watch：监控

    • this.$el：当前el元素

    • this.$set：后加的属性，实现响应式变化

    • this.$options：vm上的所有属性

    • this.$refs：一个对象，持有已注册过ref的所有子组件。

  5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

  6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。这两个方法，一般用watch替代。

  7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。可以清楚定时器，或者清除事件绑定，并且在这个阶段，监听器被销毁，更改数据，页面无法监控到，不会发生改变

  8. destroy：Vue 实例销毁后调用。

PS：

1.通过Object属性实现数据双向绑定

let obj = {};
    let temp = {};
    Object.defineProperty(
    obj,'name',{get(){
     // 取obj的name属性会触发
     return temp["name"];},
     set(val){ 
     // 给obj赋值会触发get方法
     temp["name"] = val; 
     // 改变temp的结果，不能直接用
     obj["name"]=val，
     会陷入死循环
     input.value = val; // 将值赋予输入框}});
     input.value = obj.name; // 页面一加载时 会调用get方法
     input.addEventListener('input',function () { 
     // 等待输入框的变化obj.name = this.value; 
     // 当值变化时会调用set方法});
     /*Object.defineProperty(obj,'name',{
     configurable:false,
     // 是否可删除writable:false, 
     // 是否可重新赋值enumerable:false,
      // 是否可枚举value:1})
      */

2.transition组件

  1. transition标签是一个内置的组件，写入其中的标签通过可以设置过渡动画，可以通过name属性给当前动画效果明明，否则以v开头。

  2. 在style中写入动画过程

.v-enter{opacity: 0;}.v-enter-active{transition: 1s linear;}.v-leave-active{opacity: 0;transition: 1s linear}

  1. 在行内写入动画效果

我爱你

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【二】-vue用法及生命周期

喜欢 ()or分享