vue笔记

最新推荐文章于 2024-11-11 23:32:58 发布

bug_tan90

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量101

点赞数

分类专栏： vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/bug_tan90/article/details/119773780

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

vue的全局API

Vue.directive

在这里插入图片描述

使用： v-focus = true    
inserted(el,binding) 中inserted当使用的元素插入DOM时被调用 ，
el代表使用指令的元素
binding代表当前元素的值（true）指令相关的配置信息

Vue.use

在这里插入图片描述

<div id="app" v-my-directive></div>
   <script>
       let Myplugin = {};// 创建一个插件名
       Myplugin.install = function (Vue,options) {// 插件初始化
           console.log(options);
           Vue.directive('my-directive',{// 添加全局资源
               bind(el,binding){
                   el.style = 
                   "width:100px;height:100px;background-color:#ccc"
               }
           })
       }
           Vue.use(Myplugin,{
               some:true; // some 可以是任何字母 some1 some2都可以
           })
       var vm = new Vue({
           el:"#app",
           data:{}
       })

Vue.extend

<div id="app1">app1:{{title}}</div>
    <div id="app2">app1:{{title}}</div>
    <script>
        var Vue2 = Vue.extend({
            data(){
                return {
                    title: 'hello 我是vue的子类'
                }
            }
        })
        var vm1 = new Vue({
            el:"#app1",
            data:{}
        })
        var vm2 = new Vue2({ //重点再Vue2上  因继承了Vue。extend所以他data中有数据
            el:"#app2",
            data:{}
        })
    </script>

Vue.set

在这里插入图片描述


var vm = new Vue({
  el:"#app",
   data:{
       title: '我是根级响应式',
       obj:{}
   }
})
vm.obj.b = '我是Vue.set添加的响应式的属性b';// 这样写是没有响应式的
Vue.set(vm.obj,'b','我是Vue.set添加的响应式的属性b')

Vue.mixin

在这里插入图片描述

Vue.mixin({

            data(){
                return {
                    msg:'混入的数据'
                }
            },
            created(){
                console.log('混入的created');// 混入的数据优先执行
                var myOption = this.$options.myOption;
                if (myOption){
                    console.log(myOption.toUpperCase());
                }
            }
        })
        var vm = new Vue({
            el:"#app",
            myOption:'hello vue!',
            created(){
                console.log('Vue的钩子函数');
            },
            data:{}
        })