(4)vue基础3

(1)全局API(提供的一些方法)

  1. Vue.directive 用来注册自定义指令,为DOM元素添加新的属性
  2. Vue.use
  3. Vue.extend 用于基于Vue构造器创建一个Vue的子类,可以对Vue构造器进行扩展。
  4. Vue.set vue的核心是具有一套响应式系统,简单来说就是通过监听器监听数据层的数据变化,当数据发生改变后,通知使图层自动跟新。Vue.set用于向响应式对象中添加一个属性,并确保这个属性同样是响应式的,会触发试图更新(用于向响应式中增加新属性,确保新属性也具备响应式的特点)。
  5. Vue.mixin:混入。是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入到该组件本身的选项。当组件和混入对象有同名选项时,这些选项将以恰当的方式混合。

全局API案例

Vue.directive()

<body>
    <div id="app">
        <input type="text" v-focus="true">
    </div>
    <script type="text/javascript">
        // 1、指令的名称
        // 2、指令的配置对象
        Vue.directive("focus",{
            // 希望使用当前指令的元素,当调用此方法的元素被插入到界面时,此元素获取焦点
            inserted(el,binding){
                // el:使用指令的元素
                // binding:指令相关的配置信息
                if(binding.value){//获取的是指令的值,如果是true,就执行指令
                    el.focus()
                }
            }
        })

        var vm = new Vue({
            el:"#app",
            data:{}
        })
    </script>
</body>
View Code

Vue.use()

<body>
    <div id="app" v-my-directive>        
    </div>
    <script type="text/javascript">
        //1、定义一个新插件
        let MyPlugin = {};
        //2、编写插件的install方法
        MyPlugin.install = function(Vue, options){
            console.log(options);//接收安装此插件时传进的参数
            Vue.directive("my-directive",{
                bind(el,binding){
                    //给el添加样式
                    el.style="width:100px;height:100px;background-color:#ccc"
                }
            })
        }
        //3、安装插件
        Vue.use(MyPlugin,{
            someOption:true
        })

        var vm = new Vue({
            el:"#app",
            data:{}
        })
    </script>
</body>
View Code

Vue.extend()

<body>
    <div id="app1">
        app1:{{title}}
    </div>
    <div id="app2">
        app2:{{title}}
    </div>
    <script type="text/javascript">

        var Vue2 = Vue.extend({
            data(){
                return {
                    title:"Hello 我是Vue的子类"
                }
            }
        })

        var vm1 = new Vue({
            el:"#app1"            
        })
        var vm2 = new Vue2({
            el:"#app2"            
        })
    </script>
</body>
View Code

Vue.set()

<body>
    <div id="app1">
        <div>{{a}}</div>
        <div>{{obj.b}}</div>
    </div>
    <script type="text/javascript">

        var vm = new Vue({
            el:"#app1",
            data:{
                a:"我是根级响应式属性a",
                obj:{}
            }        
        })
        Vue.set(vm.obj,"b","我是Vue.set添加的响应式属性obj.b")
        
    </script>
</body>
View Code

Vue.mixin()

<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script type="text/javascript">
        Vue.mixin({
            data(){
                return {
                    msg:"混入的msg"
                }
            },
            created(){
                console.log("混入的钩子函数");
                var myOption = this.$options.myOption;
                if(myOption){
                    console.log(myOption.toUpperCase());
                }
            }
        })
         var vm = new Vue({
             el:"#app",
             myOption:"hello world",
             created(){
                 console.log("Vue的created钩子函数")
             },
             data:{},

         })
    </script>
</body>
View Code

(2)实例属性

  1. $props 使用vm.$props属性可以接收上级组件向下传递的数据(父组件-->子组件)
  2. $options Vue实例初始化时,除了传入指定的选项外,还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等,通过vm.$options来获取。用于获取Vue实例化时传入的选项的值。
  3. $el 用来访问vm实例使用的根DOM元素。 获取Vm实例绑定的DOM结构。
  4. $children 用来获取当前组件的直接子组件
  5. $root  用来获取当前组件树的根Vue实例,如果当时实例没有父实例,则获取该实例本身。
  6. $slots 用于获取插槽,插槽是父组件像子组件传递内容的。
  7. $attrs 获取组件的属性,但其获取的属性不包含class、style以及被声明的props属性。

案例讲解

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例属性$props</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-parent></my-parent>
    </div>
        <!-- 父组件模板 -->
        <template id="parent">
            <div>
                <h3>手机信息搜索:</h3>
                <span>手机品牌:</span>
                <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>
        
    <script type="text/javascript">
        //1、文本框数据双向绑定
        //2、将数据传入到子组件中
        //3、子组件监听传递过来的数据,渲染结果
        Vue.component("my-parent",{
            template:"#parent",
            data(){
                return {
                    brand:""
                }
            }
        })
        Vue.component("my-child",{
            template:"#child",
            props:["name"],
            data(){
                return {
                    content:[
                        {brand:"华为",type:"Mata 40", price:"4999"},
                        {brand:"苹果",type:"苹果12", price:"5499"},
                        {brand:"小米",type:"小米10", price:"3999"}
                    ],
                    show:{brand:"",type:"",price:""}
                }
            },
            watch:{
                name(){
                    if(this.$props.name){
                        var found = false;
                        this.content.forEach(
                            (value,index) => {
                                if(value.brand == this.$props.name){
                                    found = value;
                                    }
                                }
                            );
                        this.show = found ? found : {brand:"", type:"",price:""};
                    }
                }
            }
        })

        var vm = new Vue({
            el:"#app",
            data:{}
        })
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例属性$options-$el-$children</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <p>{{base}}</p>
        <p>{{noBase}}</p>
    </div>    

    <div id="child">
        <button @click="child">打印子组件</button>
        <my-compenten></my-compenten>
        <my-compenten></my-compenten>
        <my-compenten></my-compenten>
    </div>
        
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            //可以是自定义选项
            custormOption:"我是自定义数据!",
            data:{
                base:"我是基本数据!"
            },
            created(){
                this.noBase = this.$options.custormOption;
            }
        })
        //$el获取到vm绑定的DOM结构,即id为app的元素
        vm.$el.innerHTML = "<div>我是替换后的DOM结构</div>"

        //直接子组件
        Vue.component("my-compenten",{
            template:"<div>我是一个组件</div>"
        })
        var vm = new Vue({
            el:"#child",
            data:{},
            methods:{
                child(){
                    console.log(this.$children)
                }
            }
        })
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例属性$root/title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-child></my-child>
    </div>    

    <template id="child">
        <button @click="root">点击查看根实例</button>
    </template>

    <script type="text/javascript">
        Vue.component("my-child",{
            template:"#child",
            methods:{
                root(){
                    console.log(this.$root);
                    console.log(this.$root == vm.$root)
                }
            }

        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })

        console.log(vm.$root)
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例属性$slots</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-child>
            你好
            <template v-slot:second>
                <div>第二个插槽的内部结构</div>
            </template>
        </my-child>
    </div>

    <template id="child">
        <div>
            <!-- 插槽 用来回去自定义组件的内容-->
            <slot></slot>
            <!-- 具名插槽 -->
            <slot name="second"></slot>
        </div>
    </template>

    <script type="text/javascript">
        Vue.component("my-child",{
            template:"#child"
        })
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
        //vm.$children[0].$slots.default[0].text
        //获取vm的第一个节点的所有插槽
        //.delault 获取默认插槽
        //[0]获取插槽中的第一个节点
        //text获取节点中的内容
        console.log(vm.$children[0].$slots.default[0].text)
        console.log(vm.$children[0].$slots)
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例属性$attrs</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-child id="托尔斯泰"></my-child>
    </div>

    <template id="child">
        <button @click="show">显示属性值</button>
    </template>

    <script type="text/javascript">
        Vue.component("my-child",{
            template:"#child",
            methods:{
                show(){
                    console.log(this.$attrs.id)
                }
            }
        })
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
        
    </script>
</body>
</html>
View Code

(3)全局配置

  1. productionTip   Vue.config.productionTip 打开或关闭生产信息提示信息,默认是打开状态。
  2. silent  silent可以取消Vue日志和警告,silent默认值是false,开启警告功能。
  3. devtools  表示打开或者关闭vue-devtools测试工具,默认值为true,表示vue-devtools工具可用。

案例测试:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局配置</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        
    </div>

    <script type="text/javascript">
        //是否安静要放在实例化之前
        Vue.config.silent = true;
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
        //使用生产版本的vue默认的有配置信息,就是一大开的时候会有提示,可以使用全局配置信息关闭掉
        // Vue.config.productionTip = false;
        //关闭调试工具
        // Vue.config.devtools = false
    </script>
</body>
</html>
View Code

(4)组件进阶

  1.  mixins 是一种分发Vue组件中可复用功能的方式。mixins是一种分发Vue组件中可复用功能的方式。  Vue组件中可复用功能的方式。 mixins对象可以包含任何组件选项,将定义的mixmins对象引入组件即可使用,mixins中的所有选项将会混入到组件自己的选项中。 局部的。全局API里面的mixin是全局的,但是功能类似。
  2. render 渲染函数 在Vue中可以使用Vue.render()实现对虚拟DOM的操作、在Vue中一般使用template来创建HTML,但这种方式可编程性不高,而使用Vue.render()可以更好地发挥JS的编程能力。
  3. createElement   createElement()函数返回的并不是一个世纪的DOM元素,他返回的其实是一个描述节点(createNodeDescription)。第一个参数可以是一个HTML标签名或组件选项对象,第二个参数是可选的,可以传入一个与模板中属性对应的数据对象,第三个由createElement()构建而成的子级虚拟节点,也可以使用字符串来生成文本虚拟节点。

代码实例:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件进阶</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        
    </div>

    <script type="text/javascript">
        var mixin = {
            data(){
                return {
                    message:"mixin的数据"
                }
            },
            methods:{
                hello(){
                    console.log("hello from mixin")
                }
            },
            created(){
                console.log("mixin的钩子函数")
            }
        }
        var vm = new Vue({
            el:"#app",
            mixins:[mixin],
            data:{
                message:"Vue的数据"
            },
            methods:{
                hello(){
                    console.log("hello from Vue")
                }
            },
            created(){
                console.log("Vue的钩子函数");
                //可以使用mixin的数据,如果vue中没有数据的话
                //但是,如果vue中有同名的数据,以vue中的数据为准,函数也是如此
                console.log(this.message);
                this.hello();
            }
        })
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局配置render</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-component>渲染成功</my-component>
    </div>

    <script type="text/javascript">
        Vue.component("my-component",{
            render(createElement){
                return createElement("p",{
                    style:{
                        color:"green",
                        fontSize:"16px",
                        backgroundColor:"orange"
                    }
                },this.$slots.default);
            }
        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
        
    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局配置</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        
    </style>    
</head>
<body>
    <div id="app">
        <my-component>
            <template v-slot:header>
                <div style="background-color:#ccc; height:50px;">这里是导航栏</div>
            </template>

            <template v-slot:content>
                <div style="background-color:#ddd; height:50px;">这里是主要内容</div>
            </template>

            <template v-slot:footer>
                <div style="background-color:#eee; height:50px;">这里是底部区域</div>
            </template>
        </my-component>
    </div>

    <script type="text/javascript">
        Vue.component("my-component",{
            render(createElement){
                return createElement("div",[
                    createElement("header",this.$slots.header),
                    createElement("header",this.$slots.content),
                    createElement("header",this.$slots.footer),
                    ])
            }
        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
        
    </script>
</body>
</html>
View Code

(1)vue全局api

(2)Vue常用属性

(3)全局对象配置vue的方法

(4)render渲染函数

posted @ 2020-10-23 11:32  壹碗  阅读(279)  评论(0)    收藏  举报