【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

这篇具有很好参考价值的文章主要介绍了【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、Vue.extend(options)

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // 预设选项
      let baseOptions = {
        template: `<h1> {{ name }} - {{ age }}</h1>`,
        data() {
          return {
            name: 'houfee',
            age: '23岁'
          }
        }
      }
      // Vue.extend()来创建一个扩展实例构造器
      let baseExtend = Vue.extend(baseOptions)
      // 通过构造器函数,创建一个vue实例,然后挂载到一个元素上
      new baseExtend().$mount('#app')
      // let app = new baseExtend({el: '#app'})
    </script>
  </body>
</html>

当然,我们也可以把使用extend创建出来的实例挂载到自定义标签上(这里不再展开)。

Vue.extend只是创建一个构造器,这个构造器预设一些参数,这个构造器创建可复用的组件。其主要用来服务于Vue.component,用来生成组件。

二、 Vue.component
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <base-component></base-component>
    </div>
    <script>
      // 预设选项
      let baseOptions = {
        template: `<h1> {{ name }} - {{ age }}</h1>`,
        data() {
          return {
            name: 'houfee',
            age: '23岁'
          }
        }
      }
      Vue.component('base-component', baseOptions) // 其等于 Vue.component('base-component', Vue.extend(baseOptions))
      let app = new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Vue.component()会注册一个全局的组件,其会自动判断第二个传进来的是Vue继承对象(vue.extend(baseOptions))还是普通对象(baseOptions),如果传进来的是普能对象的话会自动调用Vue.extend,所以你先继承再传,还是直接传普通对象对Vue.component()的最终结果是没差的。

Vue.extend()和Vue.component()的区别
Vue.component 创建的组件可以复用,和web组件一样,不需要polyfill。

要注册一个组件的步骤:
第一步,使用Vue.extend创建一个Vue的子类构造函数;
第二步,使用Vue.compontent方式注册该构造函数;
第三步,在标签中使用它。

三、Vue.nextTick([callback,context])/this.nextTick([callback,context])

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

四、Vue.set(target,propertyName/index,value)/this.set(target,propertyName/index,value)

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)
【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

五、Vue.delete(target,propertyName/index)

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)
【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

六、Vue.filter()注册或获取全局过滤器=》定义本地的过滤器或在创建 Vue 实例之前全局定义过滤器:

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)
【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)

七、Vue.mixin()混入

官方说明:混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)文章来源地址https://www.toymoban.com/news/detail-422639.html

八、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种全局Api及属性的使用</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>Vue.directive:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性</p>
    <p>自定义注册指令v-focus:</p>
    <p>控制input文本框是否自动获得焦点</p>
    <p>打开文件时,光标自动插入该input</p>
    <p><input type="text" v-focus="true"></p>
    <hr size="2" color="#efefef"/>
    <div class="vue_use_content">
        <p>Vue.use:<br/>Vue.use主要用于在Vue中安装插件,通过插件可以为Vue添加<span>全局功能</span>。插件可以是一个<span>对象或函数</span><br/>
            如果是<span>对象</span>,必须提供<span>install()方法</span>,用来安装插件;如果是一个<span>函数</span>,则该函数将被当成<span>install()方法</span></p>
        <div class="my_directive_my_plugin" v-my-directive></div>
        <div class="vue_use_directive">
            <p>Vue.js官方提供的一些插件(如vue-router)在检测到 Vue 是可访问的全局变量时,</p>
            <p>会自动调用 Vue.use()</p>
            <p>但是在CommonJS等模块环境中,则始终需要Vue.use()显式调用</p>
        </div>
    </div>
    <div>
        <p>Vue.extend:</p>
        <p>Vue.extend用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。</p>
        <p>它有一个options参数,表示包含组件选项的对象</p>
        <div id="app1">app1: {{title}}</div>
        <div id="app2">app2: {{title}}</div>
    </div>
    <hr/>
    <div>
        <p>Vue.set:</p>
        <p>Vue的核心具有一套响应式系统,简单来说就是通过监听器监听数据层的数据变化,当数据改变后,通知视图也自动更新。</p>
        <p>Vue.set用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。</p>
        <p>
        <div>{{a}}</div>
        <div>{{obj.file_name}}</div>
        </p>
    </div>
    <hr color="#3efefe"/>
    <p>Vue.mixin:</p>
    <p>Vue.mixin用于全局注册一个混入,它将影响之后创建的每个Vue实例。</p>
    <p>该接口主要是提供给插件作者使用,在插件中向组件注入自定义的行为。</p>
    <p>该接口不推荐在应用代码中使用。</p>
    <hr/>
    <p>$props:使用vm.$props属性可以接收上级组件向下传递的数据。</p>
    <p>通过$props实现手机信息搜索(华为,vivo,三星,苹果)</p>
    <p>在子组件的data中定义props用来接收name的值</p>
    <!-- 父组件 -->
    <my-parent></my-parent>
    <hr size="2"/>
    <div class="option_content_vue">
        <p>$options:Vue实例初始化时,除了传入指定的选项外,还可以传入自定义选项。</p>
        <p>自定义选项的值可以是数组、对象、函数等,通过vm.$options来获取</p>
        <p>{{base}}</p>
        <p>{{noBase}}</p>
        <p>$el:vm.$el用来访问vm实例使用的根DOM元素,案例展示如下</p>
    </div>
    <div>
        <p>$children:vm.$el用来访问vm实例使用的根DOM元素,案例演示如下</p>
        <button @click="child">查看子组件</button>
        <my-component></my-component>
        <hr width="670" size="2"/>
        <p>$root</p>
        <p>vm.$root用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身</p>
        <p>控制台查看结果:</p>
        <look-root-component></look-root-component>
    </div>
    <hr width="670" size="2"/>
    <!-- slots插槽 -->
    <p>$slots:Vue中的组件中使用template模板定义HTML结构,为了方便使用template公共模板结构。</p>
    <p>Vue提出了插槽(Slots)的概念,插槽就是定义在组件内部的template模板,可以通过$slots动态获取。</p>
 
</div>
<!-- 父组件模板 -->
<template id="parent">
    <div>
        <h3>手机信息搜索</h3>
        手机品牌:<input type="text" v-model="brand">
        <!-- 子组件 -->
        <my-child v-bind:name="brand"></my-child>
    </div>
</template>
 
<!-- 子组件模板 -->
<template id="child">
    <ul>
        <li>手机品牌:{{show.brand}}</li>
        <li>手机型号:{{show.type}}</li>
        <li>市场价格:{{show.price}}</li>
    </ul>
</template>
 
</body>
 
<script>
    Vue.directive('focus', {
        inserted(el, binding) {
            if (binding.value) {
                el.focus();
                console.info("v-focus传入的值: " + binding.value)
            }
        }
    });
    // 定义一个插件
    /* 定义一个MyPlugin(自定义插件)对象*/
    let MyPlugin = {};
    // 编写插件的install方法
    MyPlugin.install = function (Vue, options) {
        console.info("插件中输出options: " + options);
        // 在插件中未Vue添加自定义的指令
        Vue.directive('my-directive', {
            bind(el, binding) {
                // 为自定义指令v-my-directive绑定的DOM元素设置style样式
                el.style = 'margin:20px auto;height:100px;background-color:#ccc;padding-top:50px;color:#efefef'
                el.innerHTML = "可以在该插件内绘制表格";
            }
 
        });
    }
    // 使用插件
    Vue.use(MyPlugin, {someOption: true})
 
    let Vue2 = Vue.extend({
        data() {
            return {
                title: 'hello'
            }
        }
    });
    let vm1 = new Vue2({el: '#app1'})
    let vm2 = new Vue2({el: '#app2'})
    // Vue.set 设置新属性,并更新视图
 
    // 注册父组件
    Vue.component('my-parent', {
        template: "#parent",
        data() {
            return {
                brand: {}
            }
        }
 
    });
    // 组成子组件
    Vue.component('my-child', {
        template: "#child",
        data() {
            return {
                content: [
                    {brand: '华为', type: 'Mate20', price: 3699},
                    {brand: '苹果', type: 'iPhone7', price: 2949},
                    {brand: '三星', type: 'Galaxy S8+', price: 3299},
                    {brand: 'vivo', type: 'Z5x', price: 1698},
                    {brand: '一加', type: 'OnePlus7', price: 2999},
                    {brand: '360', type: 'N7 Pro', price: 1099},
                    {brand: 'oppo', type: 'Reno', price: 2599}
                ],
                show: {brand: '', type: '', price: ''}
            }
        },
        props: ['name'], // 用name属性来接收父组件传递过来的值
        watch: {
            name() {
                if (this.$props.name) {
                    let found = false
                    this.content.forEach((value, index) => {
                        if (value.brand === this.$props.name) {
                            found = value // 反映一条数据对象
                        }
                    })
                    this.show = found ? found : {brand: '', type: '', price: ''}
                } else {
                    return
                }
            }
        }
    });
 
    Vue.component('my-component', {
        template: '<div>myComponent</div>'}
    )
    // 查看根
    Vue.component('look-root-component',{
        template: '<button @click="root">查看根实例</button>',
        methods: {
            root () {
                console.log(this.$root)
                console.log(this.$root === vm.$root)
            }
 
        }
    })
 
 
    let vm = new Vue({
        el: "#app",
        myOption: 'helloWorld这是vue实例初始化时自定义的数据',
        customOption: '我是自定义数据',
        data: {
            a: '我是根级响应式属性a',
            obj: {},
            base: '我是基础数据'
        },
        created () {
            this.noBase = this.$options.customOption;
        },
        methods: {
            child () {
                console.log(this.$children)
            }
        }
 
    })
    Vue.set(vm.obj, 'file_name', '我是Vue.set添加的响应式属性obj的属性file_name');
    Vue.mixin({ // 注册混入
        created() {
            let myOptions = this.$options.myOption;
            if (myOptions) {
                console.info("初始化的属性: " + myOptions.toUpperCase());
            }
        }
 
    })
</script>
<style scoped>
    body {
        margin: 0px;
        padding: 0px;
        border: 0px;
        text-align: center;
        background-color: #657180;
    }
 
    div.vue_use_content span {
        font-size: 15px;
        font-family: '微软雅黑';
        color: #e3e6c7;
    }
 
    div.vue_use_directive {
        font-size: large;
    }
 
    div.option_content_vue {
        margin-top: 20px;
        margin-bottom: 17px;
        font-size: 17px;
        font-family: '微软雅黑';
    }
</style>
</html>

到了这里,关于【vue】Vue 全局API 详细介绍(nextTick、set、delete、......)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • this.$set()使用方法,详细教学(vue项目中this.$set()的妙用)

    简介:this.$set 是Vue中的一个实例方法,用于在响应式对象上设置新的属性或修改已有的属性,并确保这些属性也是响应式的。 使用this.$set 可以解决Vue响应式系统的一个限制,即无法检测到通过索引直接设置数组元素或通过Object.defineProperty添加的属性的变化,所以通过this.

    2024年02月15日
    浏览(54)
  • vue 组件继承- vue extends属性

    Vue.js是一款流行的JavaScript框架,它的组件化设计使得开发者可以将复杂的UI拆分为独立的、可重用的组件。在Vue.js中,组件继承是一种高效的组件复用方式,它可以让我们通过扩展一个基础组件来创建新的组件,从而减少代码的重复和冗余。本文将介绍Vue.js 2.x版本中组件继承

    2024年02月05日
    浏览(34)
  • 在vue中如何使用nextTick ?nextTick 的原理是什么?

    Vue.js 是一个流行的前端框架,它提供了一种响应式的数据绑定机制,使得页面的数据与页面的 UI 组件之间能够自动同步。Vue.js 中的数据驱动模型可以让开发者专注于业务逻辑,而不用过多地关注页面 DOM 操作的细节。然而,在某些情况下,我们需要在页面中进行 DOM 操作,而

    2023年04月20日
    浏览(40)
  • 浅谈Vue中的NextTick。

            等待下一次 DOM 更新刷新的工具方法。(在修改数据后使用这个方法,能获取更新的dom)         当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效 的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组

    2024年01月16日
    浏览(40)
  • Vue $nextTick

    我们用一个例子来说明$nextTick的作用: 我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。 我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。 但是我们点击按钮过后并没有生效。    为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.fo

    2024年02月08日
    浏览(34)
  • Vue 中的 $nextTick 深度解毒

    $nextTick 的底层原理涉及Vue的更新机制和异步队列。 vue 的视图更新是异步的,数据变动后视图的更新是异步的,整个异步额实现,它最核心的 api 就是 nextTick。 Vue的更新机制是基于异步的,在修改数据后,Vue会将DOM更新操作放在异步队列中,并在下一个事件循环中执行更新。

    2024年02月17日
    浏览(41)
  • vue中的nextTick的作用

    vue里面,常用的事件onMounted里,总喜欢用一个nextTick: 这个东西有啥用呢?我总搞不懂。 今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是,等前面的都执行完了,再执行nextTick里面的方法。比如说,页面上有一块内容,正常情况下是隐藏的,满足条件下才显

    2024年02月11日
    浏览(37)
  • vue3 nextTick()应用

    在Vue3中,可以使用 nextTick 函数来延迟执行某些操作,这些操作会在下一次DOM更新周期之后执行。这个函数通常用于在数据更新后,等待DOM更新之后执行一些操作,比如获取DOM元素的尺寸、位置等。 例如,以下一个切换元素显示的组件: 打印结果: 如果show是true,那么conte

    2024年02月04日
    浏览(41)
  • vue3使用nextTick

    Vue之nextTick原理 nextTick原理 发现nextTick必须放在修改一个响应式数据之后,才会在onUpdated之后被调用,如果nextTick是放在所有对响应式数据修改之前,则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行,才能拿到渲染得

    2024年02月05日
    浏览(38)
  • vue2中,vue.extend使用场景

    extend是Vue.js提供的一个构造器,用于创建一个组件的子类。它接受一个组件选项对象作为参数,并返回一个新的组件构造函数。 Vue.component是一个全局方法,用于注册全局组件。它接受两个参数,第一个参数是组件名称,第二个参数是组件选项对象。 extend用于在父组件内部创

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包