vue学习(二)—vue.js2.0全局API学习

  • Vue.directive自定义指令
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue.directive自定义指令</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>Vue.directive自定义指令</h1>
        <hr />
        <div class="app">
            <!--
                自定义指令v-huang
            -->
            <div v-huang='color'>{{num}}</div>
            <p><button @click="add">ADD</button></p>
        </div>
        <p>
            <button onclick="unbind()">解绑</button>
        </p>
        <script type="text/javascript">
            //          Vue.directive('huang',function(el,binding){
            //              console.log(el);
            //              console.log(binding);
            //              el.style='color:'+binding.value;
            //          })
            /**
             * 解绑
             */
            function unbind(){
                app.$destroy();
            }
            Vue.directive('huang', {
                bind: function(el,binding) { //被绑定
                    console.log('1 - bind');
                    el.style='color:'+binding.value;
                },
                inserted: function() { //绑定到节点
                    console.log('2 - inserted');
                },
                update: function() { //组件更新
                    console.log('3 - update');
                },
                componentUpdated: function() { //组件更新完成
                    console.log('4 - componentUpdated');
                },
                unbind: function() { //解绑
                    console.log('5 - unbind');
                }
            })

            var app = new Vue({
                el: '.app',
                data: {
                    num: '0',
                    color: 'red'
                },
                methods: {
                    add: function() {
                        this.num++;
                    }
                }
            })
        </script>
    </body>

</html>

  • Vue.extend扩展实例构造器
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue.extend扩展实例构造器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>Vue.extend扩展实例构造器</h1>
        <hr />
        <author></author>
        <div class="author"></div>

        <script type="text/javascript">
            var authorUrl = Vue.extend({
                template:'<p> <a :href="authorUrl">{{authorName}}</a> </p>',
                data:function(){
                    return{
                        authorName:'huangxiaoguo',
                        authorUrl:'https://blog.csdn.net/huangxiaoguo1'
                    }
                }
            });
            new authorUrl().$mount('author');
            new authorUrl().$mount('.author');
        </script>
    </body>

</html>

  • Vue.set全局操作
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue.set全局操作</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>Vue.set全局操作</h1>
        <hr />
        <div class="app">
            {{message.count}}
            <ul>
                <li v-for="item in message.arr">{{item}}</li>
            </ul>
        </div>
        <p><button onclick="add()">add</button></p>
        <!--
            由于Javascript的限制,Vue不能自动检测以下变动的数组。

            *当你利用索引直接设置一个项时,vue不会为我们自动更新。

            *当你修改数组的长度时,vue不会为我们自动更新。
            * 
            * 这时我们的界面是不会自动跟新数组的,
            * 我们需要用Vue.set(app.message.arr,1,'dd')来设置改变,
            * vue才会给我们自动更新,
            * 这就是Vue.set存在的意义。
        -->
        <script type="text/javascript">
            function add() {
                //Vue.set(outData,'count',2);
                //app.message.count++;
                //outData.count++;
                /**
                 * vue可能监听不到(当没有其他的dom发生变化,改变数组下标的时候)
                 */
                //app.message.arr[1]='ddd';
                Vue.set(app.message.arr, 1, 'dd');
            }
            var outData = {
                count: 1,
                goods: 'car',
                arr: ['aaa', 'bbb', 'ccc']
            }

            var app = new Vue({
                el: '.app',
                data: {
                    message: outData
                }
            })
        </script>
    </body>

</html>

  • 生命周期
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>生命周期</h1>
        <hr />
        <div class="app">
            {{count}}
            <p><button @click="add">ADD</button></p>
        </div>

        <script type="text/javascript">
            var app = new Vue({
                el: '.app',
                data: {
                    count: 1
                },
                methods: {
                    add: function() {

                        this.count++;
                    }
                },
                beforeCreate: function() {
                    console.log('1-beforeCreate 初始化之前');
                },
                created: function() {
                    console.log('2-created 创建完成');
                },
                beforeMount: function() {
                    console.log('3-beforeMount 挂载之前');
                },
                mounted: function() {
                    console.log('4-mounted 被挂载之后');
                },
                beforeUpdate: function() {
                    console.log('5-beforeUpdate 数据更新前');
                },
                updated: function() {
                    console.log('6-updated 被更新后');
                },
                activated: function() {
                    console.log('7-activated');
                },
                deactivated: function() {
                    console.log('8-deactivated');
                },
                beforeDestroy: function() {
                    console.log('9-beforeDestroy 销毁之前');
                },
                destroyed: function() {
                    console.log('10-destroyed 销毁之后')
                }
            })
        </script>
    </body>

</html>

  • Template 制作模版
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Template 制作模版</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>Template 制作模版</h1>
        <hr />

        <div class="app">
            <!--
                这个模块是放模板的,当有模板的时候,
                里面所有的内容都会被替换掉
            -->
            {{message}}
        </div>
        <div>
            <!--
                这种模板,是在本页面内单独使用的模板
            -->
            <template id='dd2'>
                <h2 style='color:red'>我是Template标签模板</h2>
            </template>
        </div>
        <!--
            这种模板可以外部引用,重复高,使得页面整洁
        -->
        <script type="x-template" id="dd3">
            <h2 style='color:red'>我是script标签模板</h2>
        </script>

        <script type="text/javascript">
            var app = new Vue({
                el: '.app',
                data: {
                    message: 'hello world!'
                },
                /**
                 * 这种模板比较死,适合少内容的写法
                 */
                //template:`
                //<h2 style='color:red'>我是选项模板</h2>
                //`
                template: "#dd3"
            })
        </script>
    </body>

</html>

  • component组件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>component组件-1</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js" ></script>

    </head>
    <body>
        <h1>component组件-1</h1>
        <hr />
        <div class="app">
            <huang></huang>
            <panda here='china' from-here='sichuan'></panda>
            <!--
                使用data中的值
            -->
            <panda v-bind:here='message'></panda>
            <!--
                简写
            -->
            <panda :here='message'></panda>
        </div>
        <div class="ppa">
            <huang></huang>
        </div>
        <script type="text/javascript">
            Vue.component('huang',{
                template:`<div style='color:red'>我是全局的huang组件</div>`,
            })
            var app=new Vue({
                el:'.app',
                data:{
                    message:'China'
                },
                components:{
                    "panda":{
                        template:`<div style='color:green'>我是局部的panda组件,自定义属性值是{{here}}-{{fromHere}}</div>`,
                        props:['here','fromHere']
                    }
                }
            })
            var ppa=new Vue({
                el:'.ppa'

            })
        </script>
    </body>
</html>

  • component组件-2(父子组件的关系)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>component组件-2(父子组件的关系)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>component组件-2(父子组件的关系)</h1>
        <hr />
        <div class="app">
            <panda></panda>
        </div>

        <script type="text/javascript">
            var city = {
                template: `<div style='color:green'>sichuan of China!</div>`
            }

            var panda = {
                template: `
                <div>
                <p style='color:red'>panda from China!</p>
                <city></city>
                </div>
                `,
                components: {
                    "city": city
                }
            }

            var app = new Vue({
                el: '.app',
                components: {
                    "panda": panda
                }
            })
        </script>
    </body>

</html>

  • component组件-3(动态添加组件)
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>component组件-3(动态添加组件)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script type="text/javascript" src="../js/vue.js"></script>

    </head>

    <body>
        <h1>component组件-3(动态添加组件)</h1>
        <hr />
        <div class="app">
            <component :is='who'></component>
            <button @click="changeComponent">changeComponent</button>
        </div>

        <script type="text/javascript">
            var componentA = {
                template: `<div style='color:red'>I'm componentA </div>`
            }

            var componentB = {
                template: `<div style='color:green'>I'm componentB </div>`
            }
            var componentC = {
                template: `<div style='color:pink'>I'm componentC </div>`
            }
            var app = new Vue({
                el: '.app',
                data: {
                    who: 'componentA'
                },
                components: {
                    "componentA": componentA,
                    "componentB": componentB,
                    "componentC": componentC
                },
                methods: {
                    changeComponent: function() {
                        if(this.who=='componentA'){
                            this.who='componentB';
                        }else if(this.who=='componentB'){
                            this.who='componentC'
                        }else{
                            this.who='componentA'
                        }
                    }
                }
            })
        </script>
    </body>

</html>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页