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 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
javascript中indexOf技术详解
May 07 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
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
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php微信开发之关注事件
2018/06/14 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python 错误和异常小结
2013/10/09 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Python partial函数原理及用法解析
2019/12/11 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python中格式化字符串的四种实现
2020/05/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
Collection和Collections的区别
2016/05/02 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
公司董事长职责
2013/12/12 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
教务处干事工作总结
2015/08/14 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
文书工作总结(范文)
2019/07/11 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Elasticsearch 数据类型及管理
2022/04/19 Python