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中getJSON在asp.net中的使用说明
Mar 10 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
jstree的简单实例
Dec 01 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 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运算符的知识大全
2011/11/03 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解微信UnionID作用
2019/05/15 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python 数据加密代码
2008/12/24 Python
python实现给字典添加条目的方法
2014/09/25 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
家长评语和期望
2014/02/10 职场文书
校企合作协议书
2014/04/16 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server