vue使用总结（一）

1. vue中操作DOM

操作当前时间元素的第二个子元素的style；

默认事件形参: event  ==>>  @绑定的事件没有传参数，默认会有一个参数event，即当前绑定时间的DOM的使用信息（一般使用event.target比较多）

隐含属性对象: $event ==>>  @绑定的事件会传参数，那么可以传递一个参数$event（在事件绑定的地方当着一个普通参数传入），即当前绑定时间的DOM的使用信息（一般使用event.target比较多）

 

 2. JavaScript中的mouseover与mouseout，mouseenter和mouseleave（两对）的区别

2.1 mouseover与mouseenter（移入事件）

      mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

      mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2.2 mouseout与mouseleave（移出事件）

     mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

     mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

 

3. v-for 大于v-if 的情况

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级！即当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

参考：https://cn.vuejs.org/v2/guide/conditional.html#v-if-%E4%B8%8E-v-for-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8

4. vue中的常用属性和方法

• data     ==> 在组件化编程里面必须写成函数，即 data () { return {} }
• props   ==> props 可以是数组或对象，用于接收来自父组件的数据

                  

• propsData   ==> 创建实例时传递 props。主要作用是方便测试。实际项目中用的比较少
• computed   ==> 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

                  

• methods   ==> methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

                  

• watch   ==> 监听数据的变化

                 

注意，不应该使用箭头函数来定义 watcher 函数

 

5. vue对象的生命周期钩子函数

1). 初始化显示

  beforeCreate()

  created()

  beforeMount()

  mounted()

2). 更新状态

  beforeUpdate()

  updated()

3). 销毁vue实例: vm.$destory()

  beforeDestory()

  destoryed()

4). 常用的生命周期方法

created()/mounted(): 发送ajax请求, 启动定时器等异步任务

beforeDestory(): 做收尾工作, 如: 清除定时器

5). activated() 和 deactivated()

activated()：在使用keep-alive的情况下，组件激活时调用（重复调用）

deactivated()：在使用keep-alive的情况下，组件移除时调用（重复调用）

6). 和vue1.0的对比

 

6. 路由守卫

路由守卫主要是用于在路由跳转前做一些验证操作（比如验证是否已经登录等），具体用法可以参照官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E8%A7%A3%E6%9E%90%E5%AE%88%E5%8D%AB

全局前置路由守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

 

7. 路由监听

路由监听主要是监听路由的变化，从而做一些页面的操作或数据请求。

 

8. 获取元素的宽高（元素是动态改变的，使用了flex）

方法：getBoundingClientRect()

注意：需要用的元素上，即event.target.getBoundingClientRect() 或  this.$refs.showMore.getBoundingClientRect()

输出的结果：

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！