Vue 相关指令、方法

作者: GA_ | 来源:发表于2019-03-18 16:27 被阅读0次

Vue 相关指令、方法
VUE-2：自定义指令、事件
新建一个vue3+ts项目
Vue的相关指令
Vue之自定义指令
Vue基础（五）--自定义指令与过渡
Vue 学习笔记（一）
vue3.2 setup 之局部自定义指令
vue入门6---vue基本指令、自定义指令、插件
Vue 自定义指令

标签中指令

v-text

展示data中定义字段的内容
<p v-text="data中定义的字段"></p>
<div v-text="data中定义的字段"></div>

@click

给标签加点击事件
<button @click="setData1">clicked setData</button>
<div @click="setData1">clicked setData</div>

v-if v-else v-for

        <ul v-if="models.length">
            <li v-for="model in models">{{ model.name }}</li>
        </ul>
        <p v-else>v-else</p>

全局方法

Vue.set

官方： 34EACC3E-E17A-42F6-B7AA-D7F78E1D1DF7.png

官方深入响应式原理链接
注意target 是一个数组
更新列表处使用

1、data()中定义参数setData

setData: ["setData", "2", "3”]

2、更改setData的方法中使用如下

// 001
Vue.set(this.setData,0,'seted Data’)
// 002
this.$set

Vue.delete

Vue.set是设置新值，delete是删除值

Vue.delete(this.setData, 0)

Vue.extend

详见另一篇 Vue全局组件和局部组件

Vue.nextTick

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
自己理解：更新UI完成之后，异步知道UI更新完了
            // 001写法
            updateMessage: function() {
                this.message = '更新完成'
                console.log(this.$el.textContent) // => '没有更新'
                // 局部 闭包写法
                this.$nextTick(function() {
                    // 控件更新完成 进行异步回调
                    console.log(this.$el.textContent) // => '更新完成'
                })
            },
            // 002写法
            updateMessage: asyncfunction() {
                this.message = '更新完成'
                console.log(this.$el.textContent) // => '没有更新'
                // 局部 新写法
                await this.$nextTick()
                console.log(this.$el.textContent) // => '已更新'
            }

Vue.directive

自定义全局指令、自定义局部指令
[官网自定义指令链接](https://cn.vuejs.org/v2/guide/custom-directive.html)
<input type="text" v-focus>
focus是自定义的指令名称
    directives: {
            focus: {
                // 钩子函数bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                bind: function(el, binding, vnode, oldVnode) {
                    console.log("focus-bind");
                    console.log(el);
                    console.log(binding);
                    console.log(vnode);
                    console.log(oldVnode);
                    console.log(el.focus());
                    // el.autofocus();
                    el.focus();
                },
                // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
                update: function(el) {
                    console.log("focus-update");
                    console.log(el);
                    console.log(el.focus());
                    // el.autofocus();
                    el.focus();
                },
                // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
                inserted: function(el) {
                    console.log("focus-inserted");
                    console.log(el);
                    console.log(el.focus());
                    // el.autofocus();
                    el.focus();
                },
                // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
                componentUpdated: function(el) {
                    console.log("focus-inserted");
                    console.log(el);
                    console.log(el.focus());
                    // el.autofocus();
                    el.focus();
                },
                // 只调用一次，指令与元素解绑时调用。
                unbind: function(el) {
                    console.log("focus-inserted");
                    console.log(el);
                    console.log(el.focus());
                    // el.autofocus();
                   el.focus();
                }
            }
        }

全局自定义指令

        Vue.directive('focus', {
            inserted: function(el) {
                el.focus()
            }
        })

Vue.filter

过滤器

全局过滤器

    Vue.filter('globalFilter', function(value) {
        return value + "!!!"
    })
    Vue.filter('filterLowWords', function(value) {
        return value.toString().toLowerCase()
    })

局部过滤器

        filters: {
            filterUpWords: function(value) {
                return value.toString().toUpperCase()
            }
        }

使用：

<div>{{ message | globalFilter| filterLowWordsa | filterUpWords}}</div>

Vue.Component

1、查看Vue全局组件和局部组件

2、Vue 父组件和子组件之间那点儿破事儿

Vue.Use()

Vue.use(VueRouter)
var VueTouch = require('vue-touch')
Vue.use(VueTouch)

Vue.mixin

官方描述：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

1、mixin.js文件

export const mixin = {
    created: function () {
            console.log('我是mixin中created方法')
    },
    methods: {
        star(){
            console.log('我是mixin中 star');
        },
        config(){
            console.log('我是mixin中 config');
        }
    }
}

2、组件中

import {
        mixin
    } from "../js/mixin.js";
    export default {
        el: 'vue_global_api',
        mixins: [mixin],
        created() {
            console.log('我是组件的created');
            this.star();
            this.config();
        },
        methods: {
            config() {
                console.log('我是组件中methods的created');
        },
    }

3、打印：

我是mixin中created方法
我是组件的created
我是mixin中 star
我是组件中methods的created     // 覆盖了mixin中的config方法

4、以下是全局混入

Vue.mixin({
  created() {
  }
})

5、最后

有更高级的混入...

Vue.compile 渲染

[以下代码来自官网](https://cn.vuejs.org/v2/guide/render-function.html)
// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选参数。
  {
    // (详情见下一节)
  },
  // {String | Array}
  // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)
{
    // 和`v-bind:class`一样的 API
  // 接收一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  // 接收一个字符串、对象或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中向多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

Vue.version 查看Vue版本号

var version = Number(Vue.version.split('.')[0])
if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}