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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
围观tangram js库
Dec 28 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
JAVA/JSP学习系列之六
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php接口隔离原则实例分析
2019/11/11 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
python读写文件操作示例程序
2013/12/02 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python数据分析:关键字提取方式
2020/02/24 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python dict如何定义
2020/09/02 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
SQL Server笔试题
2012/01/10 面试题
最新教师自我评价分享
2013/11/12 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
期终自我鉴定
2014/02/17 职场文书
建筑管理专业求职信
2014/07/28 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
男人帮观后感
2015/06/18 职场文书
小学班级口号大全
2015/12/25 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python