Vue.js 学习足迹(一)

其他 2018-10-15 12:21:13 阅读次数: 0

文章目录

安装Vue

可以在script标签中引入，但是需要在网络环境下
可以访问Vue官网 http://cn.vuejs.org 找到安装，点击开发版本，ctrl+s 保存vue.js文件到项目下

Vue的相关指令

v-text & v-html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}



    </style>


</head>
<body>


<div id="app">
    <!--把数据插入到app作用域下，需要用插值符号 {{变量}}-->
    {{ msg }}
    <h2 v-text="vText"></h2>
    <h2 v-text="vText2"></h2>
    <br>
    <hr>
    <!--此时可以解析标签em和i-->
    <h2 v-html="vHtml"></h2>

</div>

<script src="../js/vue.js"></script>

    <script>

        /*
       *   实例化一个Vue对象
       *   MVVM:视图模型  M:模型  V:视图  VM:视图模型
       *   new Vue({
       *       el:,作用域属性
       *       data:,数据属性
       *       computed:,
       *       methods:,方法属性
       *   })
       *
       * */

        new Vue({
            //el作用域
           el:'#app',
            data:{  //我们请求过来的原始数据 都会放在data中
                msg:'Hello Vue',
                vText:'这是v-text,相当于 innerText',
                vText2:'<em>这是v-text</em><i>相当于 innerText</i>',
                vHtml:'<em>这是v-html</em>,<i>相当于 innerHTML</i>',
            }
        });

    </script>
</body>
</html>

在这里插入图片描述

.
.
.

v-show
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
        
    </style>
    
</head>
<body>

<div id="app">
    <h2 v-show="isShow">{{vHtml}} display-none和block的切换</h2>
    
</div>

<script src="../js/vue.js"></script>

<script>

    new Vue({
        el:'#app',
        data:{
            isShow:true, //true代表显示，false代表隐藏
        }

    });
    
</script>

</body>
</html>

在这里插入图片描述

.
.
.

v-if
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}



    </style>


</head>
<body>


<div id="app">

    <h2 v-text="mas"></h2>

    <!--如果isLogin为true则执行第一句，如果为false则执行第二句-->
    <div v-if="isLogin">请输入您的用户名:</div>
    <div v-else="isLogin">请注册</div>

</div>

<script src="../js/vue.js"></script>

<script>

    new Vue({
        el:'#app',
        data:{
            //指令v-if 移入移除,没有DOM节点,false时不存在页面上
            // 指令v-else 与 v-if兄弟关系同时使用
            mas:'v-if',
            isLogin:false, //true则显示  false则不显示

        }


    });




</script>


</body>
</html>

在这里插入图片描述

.
.
.

v-for
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}



    </style>


</head>
<body>




    <!--关于for循环-->
    <div id="for">
        <!--数据驱动，根据数据的多少生成li-->
        <h2 v-text="msg"></h2>
        <ol>
            <li v-for="item in arr">{{ item }}</li>
        </ol>
        <hr>
        <ol>
            <!--这只key值,此处index可自定义且都表示数据下标值-->
            <li v-for="(item,index) in arr":key="index">{{ item }} --> {{ index }}</li>
        </ol>
        <hr>
        <ol>
            <!--key绑定属性对应索引值-->
            <li v-for="(item,index) in users":key="index">姓名: {{ item.name }} 年龄: {{ item.age }}</li>
        </ol>
        <hr>
        <ol>
            <!--对象也有索引值-->
            <li v-for="(value,key,index) in userName":key="index">
                value: {{ value }},
                key: {{ key }},
                index: {{ index }},
            </li>
        </ol>
        <hr>
        <h2>排序数组从大到小(注意：此处将前面的列子arr也排序了)</h2>
        <ol>
            <li v-for="item in sortArr">{{ item }}</li>
        </ol>


</div>

<script src="../js/vue.js"></script>

<script>

    //关于for循环
    new Vue({
        el:'#for',
        data:{
            msg:'v-for',
            arr:[123,456,789],
            users:[
                {name:'越祁',age:18},
                {name:'越今朝',age:20},
                {name:'云天河',age:21}
            ],

            userName:{
                name:'haha',
                age:20,
                hobby:'篮球'
            }
        },

        //computed属性
        computed:{
            sortArr:function () {
                return this.arr.sort(function (a,b) {
                    // return a-b;//从小到大
                    return b-a;//从大到小
                })
            }
        }
    });



</script>


</body>
</html>

在这里插入图片描述

.
.
.

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
</head>
<body>

<!--关于指令v-on-->
<div id="app2">
    <li v-text="msg"></li>
    <h1>得分{{ num }}</h1>
    <!--绑定点击事件-->
    <button v-on:click="addition">加分</button>
    <button v-on:click="substraction">减分</button>
    <!--v-on指令的简写 v-on:click='方法名' --》 @click='方法名'-->
    <button @click="addition">加分</button>
    <hr>
    页面的数据的改变会影响到内存的变化,内存的改变同时会改变页面的num数据
    <br>
    双向数据绑定: <em v-text="num"></em>
    <input v-model='num' v-on:keyup.enter="onEnter" value="键盘事件">
    <input v-on:keyup.13="onEnter" value="键盘13事件">
</div>

<script src="../js/vue.js"></script>

<script>

    //关于指令v-on
    new Vue({
        el:'#app2',
        data:{
            msg:'v-on',
            num:0
        },
        //属性methods,是一个对象
        methods:{
            addition:function () {
                this.num++;
                console.log(this);

            },
            substraction:function () {
                this.num--;
                console.log(this)
            },
            //ES6语法
            onEnter(){
                this.num++;
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

.
.
.

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{margin:0px;padding:0px;}

        .red{
            background:lightcoral;
            width:100px;
            height:100px;
        }

        .blue{
            background-color: lightseagreen;
            width:100px;
            height:100px;
        }


    </style>

</head>
<body>

<div id="app">

    <h2 v-text="msg"></h2>
    <hr>
    <!--class="red"-->
    <div v-bind:class="r">返回r的值</div>
    <!--对象,key:value-->
    <!--class="blue"-->
    <div :class="{blue:isTrue}">接收判断条件</div>
    <br>
    <!--class="blue"-->
    <div :class="{r:r,blue:blue}">{r:r,blue:blue}绑定对象</div>
    <br>
    <!--class="red blue"-->
    <div :class="[r,b]">绑定数组</div>
    <br>
    <!--class="red"-->
    <div :class="isTrue?'red':'blue'">三目返回值</div>
    <br>
    <!--style="color: yellow; border: 1px solid green; width: 100px; height: 100px; background: lightcoral;-->
    <div :style="styleObj">绑定样式的对象</div>
    <br>
    <!--style="color: black; border: 1px solid red; width: 100px; height: 100px;"-->
    <div :style="{color:color,border:border,width:width,height:height}">绑定data中的属性</div>


</div>


<script src="../js/vue.js"></script>

    <script>

        //指令v-bind 为标签添加自定义属性名 v-bind的简写 :属性名=""
        //v-bind:class="{对象key:value}"  简写 :class="{对象key:value}
        new Vue({
            el:'#app',
            data:{
                msg:'v-bind',
                num:0,
                r:'red',
                b:'blue',
                isTrue:true,
                blue:true,
                styleObj:{
                    color:'yellow',
                    border:'1px solid green',
                    width:'100px',
                    height:'100px',
                    background:'lightcoral',
                },
                color:'black',
                border:'1px solid red',
                width:'100px',
                height:'100px',
            }
        })


    </script>


</body>
</html>

在这里插入图片描述

.
.
.

v-pre,v-cloak,v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{margin:0px;padding:0px;}
    </style>

</head>
<body>

<div id="app">

    <h2 v-text="msg"></h2>
    <br>
    <div v-pre="message">{{message}}</div>
    <br>
    <hr>
    <div v-cloak>让这个div不显示，直到项目编译完成才显示</div>
    <br>
    <hr>

    <!--v-once让元素模板数据只渲染一次，之后双向数据绑定也不会改变其值-->
    <h2 v-once>{{message}}</h2>
    <br>
    <input type="text" v-model="message"><br>
    <em>{{message}}</em>

</div>
<script src="../js/vue.js"></script>

<script>

    /*
     *  指令v-pre:加快编译的过程
     *  指令v-cloak:这个指令保持在元素上直到关联实例结束编译,让该元素不显示，直到项目编译完成才显示
     *
     *
     */
    new Vue({
        el:'#app',
        data:{
            msg:'v-pre,v-cloak,v-once',
            message:'你好,Vue'
        }
    })
</script>
</body>
</html>

在这里插入图片描述

全局API

Vue.extend

用来生成自定义组件的API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>

    <!--
        Vue.extend 就是用来生成组件
        学Vue就是在不停的使用组件
        组件:在多处需要用到同一结构的功能需求时，将该功能需求写在一个js文件中
        供多处引用或者放在网上供他人下载使用


     -->
    <dream></dream>

    <div id="box"></div>


    <script>

        //自定义组件
        let extend = Vue.extend({
            //只能放一个子节点,不能在h2元素再放同级元素
            template:'<h2><a :href="url">{{content}}</a></h2>',
            data(){
                return {
                    content:'extend',
                    url:'http://baidu.com'
                }
            }
        });
        new extend().$mount('dream');   //挂载,其实就是将dream自定义的标签替换成自定义组件内的模板
        new extend().$mount('#box');

    </script>

</body>
</html>

在这里插入图片描述

Vue.nextTick

在DOM更新数据完成时立即执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
         Vue.nextTick
         在DOM更新数据完成时立即执行的函数
    -->

    <div id="app">

    </div>

    <script>

        //实例化Vue构造函数
        let app = new Vue({
           el:'#app',
           data(){
               return {
                   msg:'Hello',
               }
           }
        });
        //修改数据
        app.msg = '你好';
        Vue.nextTick(function () {
            console.log('DOM更新了');
        });
        Vue.nextTick().then(()=>{
            console.log('DOM更新了')
        });


    </script>

</body>
</html>

在这里插入图片描述

Vue.set

修改双向数据绑定的值，让其修改后再页面和内存中都能同步修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="item in arr">{{item}}</li>
        <button onclick="modify()">点击修改值</button>
    </ol>
</div>

<script>
    let app = new Vue({
       el:'#app',
        data(){
           return {
               arr:['a','b','c']
           }
        }
    });
    function modify() {
        console.log(app.arr);
        //app.arr[2] = 123 修改的值不会进行双向数据绑定，页面数据不会改变
        //Vue.set()参数1:要修改的数据的属性,参数2:修改数据的索引值,参数3:要修改的值
        Vue.set(app.arr,2,'yueqi');
    }

</script>
</body>
</html>

在这里插入图片描述

Vue.isdelete

删除需要删除的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="item in arr">{{item}}</li>
        <button onclick="del()">点击删除数据</button>
    </ol>
</div>

<script>
    let app = new Vue({
       el:'#app',
        data(){
           return {
               arr:['a','b','c']
           }
        }
    });
    function del() {
        console.log(app.arr);
        //通过索引值删除需要删除的数据
        Vue.delete(app.arr,2);
    }




</script>

</body>
</html>

在这里插入图片描述

Vue.directive

用以自定义注册指令


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        Vue.directive 自定义指令,注册自定义指令
     -->



    <div id="app">
        <h1>{{msg}}</h1>
        <h2>{{num}}</h2>
        <!--eg1 点击事件的注册-->
        <!--<button onclick="add()">点击加分</button>-->
        <!--eg2 点击事件的注册,Vue点击事件需要在构造函数内编写事件方法-->
        <button @click="add">点击加分</button>
        <!--png-->
        <br>
        <hr>
        <!--自定义指令案例-->
        <h2 v-dream="custom">{{msg}}</h2>
        <h2 v-demo="info">{{msg}}</h2>

        <button onclick="unbind()">点击解绑事件</button>
    </div>


    <script>

        //解绑事件方法
        function unbind(){
            app.$destroy();
        }

        //自定义指令v-dream,回调函数即自定义指令要做的事,
        //回调函数 参数1:元素本身, 参数2:返回的对象
        //png
        Vue.directive('dream',function (el,bind) {
            console.log(el);
            console.log(bind);
            el.style = 'color:' + bind.value;

        });

        //自定义指令v-demo
        Vue.directive('demo',{
            //事件函数 --> 老外俗称钩子
            bind: function () {
                console.log('1.被绑定');
            },
            inserted: function (el,bind) {
                console.log('2.绑定到节点');
                //绑定到节点后做的事
                el.style.color = bind.value;
            },
            update: function () {
                console.log('3.组件更新');
            },
            componentUpdated: function () {
                console.log('4.组件更新完成');
            },
            unbind: function () {
                //解绑事件点击后此Vue对象的作用域内的点击事件将失效，对于点击事件将不做响应
                //png
                console.log('5.解绑事件')
            }

        });

        let app = new Vue({
           el:'#app',
           data:{
               msg:'Vue.directive',
               custom:'red',
               num:0,
               info:'blue',

           },
            methods:{
               add(){
                   this.num++;
               }
            }
        });
        //eg1 点击事件的注册
        // function add() {
        //     app.num ++;
        // }
    </script>

</body>
</html>

点击加分事件浏览器做出的响应
在这里插入图片描述

在自定义指令API方法中对于两个参数的输出
参数1:el 指代元素本身
参数2:bind 指代返回的对象
在这里插入图片描述

解绑事件点击后，其Vue对象作用域内的点击事件将失去响应
在这里插入图片描述

Vue.filter
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>{{text | myFilter}}</h2>
        <input type="text" v-model="text">
    </div>

    <script>

        /*
        *   Vue.filter 过滤器
        *   filters是Vue构造函数的一个属性，
        *   也可以在全局设置中直接Vue.filter来引用此方法
        *
        * */

        //局部设置
        let app = new Vue({
           el:'#app',
           data:{
               msg:'Vue.filter 过滤器',
               text:'',
           },
           filters:{
               myFilter:function (value) {
                   //split('a').join('3'),将输入的a全部换成3
                   // return value.split('a').join('3');
                   //将输入的数据倒序显示出来
                   return value.split('').reverse().join('');
               }
           }
        });

        //在全局中设置 Vue.filter 过滤器
        new Vue({
            el:'#app',
            data:{
                msg:"Vue.filter 过滤器",
                text:'',
            },
        });

        //此处的参数value 就是input标签输入的值value
        Vue.filter('myFilter',function (val) {
            return '$' + val;
        })

    </script>

</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

组件与模板 (Vue.components & templates)

全局组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <hd-nav></hd-nav>   <!--小写-->
    </div>

    <script>
        /*
        *   全局组件
        *   组件就像公共样式,可以在任何vue作用域下复用
        *   组件复用后替换div下的 <hd-nav> 标签
        * */
        Vue.component(
            'hdNav',    // 驼峰命名法,对应作用域的同名标签
            {
                template: '<h2 style="color:skyblue">全局组件</h2>'
            }
        );
        new Vue({
           el:'#app',
        });

    </script>

</body>
</html>

在这里插入图片描述

局部组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <hd-nav></hd-nav>
    </div>
    <br>
    <hd-nav>niha</hd-nav>

    <script>

        /*
        *   局部组件
        *   只有在作用域内模板才能被复用
        *
        * */
        new Vue({
           el:"#app",
           //声明组件
           components:{
               hdNav:{
                   template:'<h2 style="color:hotpink">局部组件</h2>'
               }
           }
        });

    </script>

</body>
</html>

只有在作用域内的模板标签才会被复用模板
在这里插入图片描述

选项模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>

    <script>

        /*
        *   选项模板
        *   直接在Vue构造函数内定义模板，给定其作用域模板直接复用替换作用域的元素
        *   此处 div#app 被复用替代
        * */
        new Vue({
           el:'#app',
           template:'<h2 style="color:hotpink">选项模板</h2>'
        });

    </script>

</body>
</html>

选项模板
直接在Vue构造函数内定义模板，给定其作用域模板直接复用替换作用域的元素
此处 div#app 被复用替代
在这里插入图片描述

标签模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>

    <template id="tpl">
        <h2 style="color:hotpink">
            template标签模板
        </h2>
    </template>

    <script>

        /*
        *   标签模板
        *   通过获取标签的id属性将指定标签内的内容作为模板替换
        *   作用域的 div#app 盒子,标签模板依然存在 标签名template可自定义
        *
        * */
        new Vue({
           el:'#app',
           template:'#tpl',
        });


    </script>

</body>
</html>

标签模板
通过获取标签的id属性将指定标签内的内容作为模板替换
作用域的 div#app 盒子,标签模板依然存在 标签名template可自定义

在这里插入图片描述

script模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>

    <!-- 此处script标签需要下上属性type="text/x-template"用以识别html文档流-->
    <script type="text/x-template" id="tpl">
        <h2 style="color:hotpink">
            script标签模板
        </h2>
    </script>


    <script>

        /*
        *   script标签模板
        *   同理标签模板,以script标签存放模板，通过获取id值
        *   替换作用域元素复用模板
        *
        * */
        new Vue({
            el:'#app',
            template:'#tpl',
        })

    </script>

</body>
</html>

指定作用域的元素被复用模板替换
script标签模板依然存在body中
在这里插入图片描述

父组件传递数据给子组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-bind:属性名,v-bind:class='' v-bind可简写去除,这里alt是属性名-->
        <!--父组件-->
        <hd-nav :alt="msg" title="商品列表" main-title="主标题"></hd-nav>
    </div>

    <script>

        /*
        *   component父组件传递数据给子组件
        *   A用B A就是 父组件
        *   B被A用 B就是 子组件
        *
        * */
        new Vue({
           el:'#app',
           data:{
               msg:'用户点击后此处值改变',
           } ,
            components:{
               hdNav: {
                   template:'<h2>子组件 获取 父组件的数据 - {{title}} - {{mainTitle}} - {{alt}}</h2>',
                   //props 用于接收父组件的数据
                   props:['title','mainTitle','alt']
               }
            }
        });


    </script>

</body>
</html>

在这里插入图片描述

父组件引用子组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--父组件-->
        <hd-nav :alt="msg" title="商品列表" main-title="主标题"></hd-nav>
    </div>

    <script>

        /*
        *   父组件引用子组件
        *
        *
        * */
        // 声明组件
        let child = {
            template:'<em>Child子组件</em>'
        };
        let parent = {
            template:'<h2>父组件 - {{title}} - {{mainTitle}} - {{alt}}' +
                '<child></child>' +
                '</h2>',
            props:['title','mainTitle','alt'],
            components:{
                //parent组件引用child组件
                child:child
            },
        };

        new Vue({
           el:'#app',
           data:{
               msg:'seo123',
           },
            components:{
               //parent组件被引用到作用域
               hdNav:parent,
            }
        });





    </script>

</body>
</html>

child组件parent组件引用,child模板出现在parent中
在这里插入图片描述

component标签模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <!--根据值的不同，显示不同的组件-->

        <component v-bind:is="componentA"></component>
        <component :is="componentB"></component>
        <component :is="componentC"></component>
        <hr>
        <component :is="toggleComponent"></component>
        <button @click="toggle">点击切换component组件</button>





    </div>

    <script>
        /*
        *   component标签
        *
        * */

        //在外部声明组件
        let componentA = {
            template:'<h2 style="color:orangered">组件A</h2>',
        };

        let componentB = {
            template:'<h2 style="color:yellowgreen">组件B</h2>',
        };

        let componentC = {
            template:'<h2 style="color:skyblue">组件C</h2>',
        };

        new Vue({
           el:'#app',
            data:{
               msg:'component标签',

                //component标签模板,此处的变量用以在component标签中通过v-bind:is="变量名"指令复用模板
                componentA:componentA,
                //可直接简写
                componentB,
                componentC,

                //此处点击事件默认组件componentA
                toggleComponent:componentA,
                arr:[
                    componentA,
                    componentB,
                    componentC,
                ],

            },

            components:{
                //作用同上,此处声明A,B,C的内容
               A:componentA,
                B:componentB,
                C:componentC
            },

            methods:{
               //点击切换组件事件
               toggle(){
                   //Math.random()返回一个浮点型伪随机数字在0（包括0）和1（不包括）之间
                   //Math.floor()  去除小数点保留整数部分
                   //此公式最终得到随机数0,1,2
                   this.toggleComponent = this.arr[Math.floor(Math.random()*3)]
               }
            }

        });

    </script>

</body>
</html>

在这里插入图片描述

Vue.mixin

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例，插件作者可以使用混入向组件注入自定义的行为，不推荐在应用代码中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2> {{msg}} - {{num}}</h2>
        <input type="button" v-on:click="add" value="Add">

    </div>

    <script>

        /*
        *   全局API  Vue.mixin
        *
        * */
        let addLog = {
            updated(){
                console.log('选项的混入')
            }
        };

        Vue.mixin({
            updated(){
                console.log('全局的混入')
            }
        });

        new Vue({
            el:'#app',
            data:{
                msg:'Vue.mixin',
                num:520,
            },
            methods:{
                add(){
                    this.num++;
                }
            },
            updated(){
                console.log('原生的钩子updated')
            },
            mixins:[addLog]
        })


    </script>

</body>
</html>

全局的混入Vue.mixin 最先执行
选项的混入 mixins:[addLog] 其次执行
原生的钩子updated updated()最后执行

在这里插入图片描述

Vue.compile
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <h2> {{msg}} -- {{num}} </h2>
            <h2> 你好 </h2>
            <h2> {{num}} </h2>
            <h3> {{ msg }}</h3>
            <p>哈哈</p>
        </div>
    </div>

    <script>

        /*
        *   Vue.compile
        *       render属性的渲染
        *
        *
        * */
        let res = Vue.compile('<h2>{{num}}</h2>');
        new Vue({
            el:'#app',
            data:{
                msg:'Vue.mixin',
                num:520
            },
            //渲染替换了作用域内的全部标签
            render:res.render
        })

    </script>

</body>
</html>

在这里插入图片描述

Vue.delimiter

更改模板渲染语法,重新定义插值符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2> {{msg}} -- $%msg> </h2>
    </div>

    <script>

        console.log( Number(Vue.version.split('.')[0]) );
        let version = Number(Vue.version.split('.')[0]);

        if(version === 2){
            console.log('Vue.JS 是 2.x版本')
        }else if( version === 1 ){
            console.log('你使用的版本过低')
        }else{
            console.log('你使用的版本有问题，请联系开发者')
        }

        //${ES6的变量}
        new Vue({
            el:'#app',
            data:{
                msg:'version',
            },
            //更改模板渲染语法,重新定义插值符号
            delimiters: ['$%','>']
        })

    </script>

</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39469688/article/details/83010722
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022