Vue 构造选项 - 进阶使用说明


Posted in Javascript onAugust 14, 2020

Directive指令:减少DOM操作的重复

Vue实例/组件用于数据绑定、事件监听、DOM更新

Vue指令主要目的就是原生DOM操作

减少重复

自定义指令

两种声明方式

方法一:声明一个全局指令

Vue.directive('x', directiveOptions)

方法二:声明一个局部指令

在options里写,只能被那个Vue实例/组件使用

new Vue({
  ...,
  directives:{
    "x":directiveOptions
  }
})

关于directiveOptions

directiveOptions是个对象,里面有五个函数属性

bind(el, info, vnode, oldVnode)★

类似created,只调用一次,指令第一次绑定到元素时调用。

参数都是vue给我们的

el绑定指令的那个元素

info是个对象,我们想要的信息基本都在里面

vnode虚拟节点

oldVnode之前的虚拟节点

inserted(参数同上)★

类似mounted,被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update(参数同上)

类似 updated

componentUpdated(参数同上)

用得不多,见文档

unbind(参数同上)★

类似destroyed,当元素要消亡时调用。

bind示例

Mixins混入:复制

Mixins示例

减少重复

directives的作用是减少DOM操作的重复

mixins的作用是减少data、methods、钩子的重复

options里的构造选项都可以先放到一个js文件,之后哪个实例/组件需要就导入并且用mixins使用就行。

写在了共同东西里的东西被组件引用了之后,组件还可以覆盖他们,Vue会智能合并

全局的mixins:不推荐

Extends 继承、扩展

extends是比mixins更抽象一点的封装

如果你嫌写五次mixins麻烦,可以考虑extends一次

不过实际工作中用得很少

你可以使用Vue.extend或options.extends

provide & inject:提供&注入

祖先提供东西,后代注入东西

作用是大范围、隔N代共享信息(data、methods等)

示例

总结

directive指令

全局用Vue.directive('x', {...})

局部用options.directives

作用是减少DOM操作相关重复代码

mixins混入

全局用Vue.mixin({..})

局部用options.mixins: [mixin1, mixin2]

作用是减少options里的重复

extends继承/扩展

全局用Vue.extend({.})

局部用options.extends: {...}

作用跟mixins差不多,只是形式不同

provide | inject提供和注入

祖先提供东西,后代注入东西

作用是大范围、隔N代共享信息

补充知识:表单和 v-model

思维导图

Vue 构造选项 - 进阶使用说明

form 做表单一定要用 form+button组合

<template>
  <div id="app">
    登录
    <form @submit.prevent="onSubmit">  //.prevent阻止默认动作
      <label>
        <span>用户名</span>
        <input type="text" v-model="user.username"/>
      </label>
      <label>
        <span>密码</span>
        <input type="password" v-model="user.password"/>
      </label>
      <button type="submit">
        登录
      </button>
    </form>

  </div>
</template>

<script>
 export default {
  name: 'App',
  data() {
   return {
    user: {
     username: '',
     password: ''
    },
    x: ''
   }
  },
  methods: {
   onSubmit() {
    console.log(this.user)
   }
  },
  components: {}
 }
</script>

Vue 构造选项 - 进阶使用说明

v-model

<label>
        <span>用户名</span>
        <input type="text" v-model="user.username"/>
</label>

上面的v-model等价于

<label>
        <span>用户名</span>
        <input type="text" :value="user.username"
        @input = "user.username = $event.target.value"/>
</label>

自己封装一个

<template>
  <div class="red wrapper">
    <input :value="value" @input="$emit('input',$event.target.value)"/>
  </div>
</template>

<script>

 export default {
  name: 'MyInput',
  props: {
   value: {
    type: String
   }
  },
 }
</script>

<style scoped>
  .red {
    background: red;
  }
  .wrapper{
    display: inline-block;
  }
</style>

以上这篇Vue 构造选项 - 进阶使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
jQuery事件详解
Feb 23 Javascript
js实现div色块拖动录制
Jan 16 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue 扩展现有组件的操作
Aug 14 #Javascript
如何HttpServletRequest文件对象并储存
Aug 14 #Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 #Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 #Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 #Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 #Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 #Javascript
You might like
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php实现删除空目录的方法
2015/03/16 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
音乐专业自荐信
2014/02/07 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
消防验收申请报告
2015/05/15 职场文书
关于分班的感言
2015/08/04 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
导游词之青岛崂山
2019/12/27 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
python可视化大屏库big_screen示例详解
2021/11/23 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android