Vue.js初探

Posted 2020-09-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js初探相关的知识，希望对你有一定的参考价值。

在Vue.js的初识篇了解了Vue的内部指令，并做了一些简单的小案例。这一篇来了解Vue的全局API。

Vue的全局API：在构造器外部用Vue提供的API函数来定义新功能。

首先了解一下自定义指令的生命周期：

bind:function(){      //被绑定
     console.log(‘ bind: 我被被绑定！‘);
},
inserted:function(){    //绑定到节点
      console.log(‘inserted: 我绑定到节点了！‘);
},
update:function(){    //组件更新
      console.log(‘update: 组件更新了！‘);
},
componentUpdated:function(){  //组件更新完成
      console.log(‘componentUpdated: 组件更新完成了！‘);
},
unbind:function(){    //解绑
      console.log(‘bind: 我已解绑了！‘);
}

Vue.directive 自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue directive</title>
</head>
<body>
    <div class="container">
        <div id="app">
            <h5>{{ message }}</h5>
            <hr />
            <p v-momei=‘color‘ id="Dome">{{ num }}</p>
            <p><button class="btn btn-success" @click="add()">Add</button></p>
        </div>

    </div>
</body>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.directive(‘momei‘,function(el,binding,vnode){
            el.style.color=binding.value;
        });
        var app = new Vue({
            el: ‘#app‘,
            data: {
                message: ‘Hello Vue.js One Day!‘,
                num: 10,
                color: ‘green‘
            },
            methods: {
                add: function() {
                    this.num ++;
                }
            }
        });
    </script>
</html>

自定义指令传入的三个参数：

　　el: 指令绑定的元素，可以用来直接操作DOM。

　　binding: 一个对象，包含以下属性：

- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的字符串形式。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

　　vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。

　　oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

Vue的生命周期：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue 生命周期</title>
</head>
<body>
    <div class="container">
        <div id="app">
            <h5>{{ message }}</h5>
            <hr />
            <p>{{ num }}</p>
            <p><button class="btn btn-success" @click="add()">Add</button></p>
        </div>

    </div>
</body>
    <script src="https://unpkg.com/vue"></script>
    <script>
        var app = new Vue({
            el: ‘#app‘,
            data: {
                message: ‘Hello Vue.js ONE Day!‘,
                num: 10,
            },
            methods: {
                add: function() {
                    this.num ++;
                }
            },
            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>
</html>

Vue.extend构造器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue Extend</title>
</head>
<body>
    <div class="container">

        <author></author>

    </div>
</body>
    <script src="https://unpkg.com/vue"></script>
    <script>
        var Extend = Vue.extend({
            template: "<p><a :href=‘Url‘>{{Name}}</a></p>",  //模板
            data:function() {
                return{
                    Name: ‘momei‘,
                    Url: ‘http://www.cnblogs.com/momei/‘
                }
            }
        });
        new Extend().$mount(‘author‘);   //挂载扩展实例构造器
    </script>
</html>

Vue.set 全局操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue.set 全局操作</title>
</head>
<body>
    <div class="container">
        <h1>Vue.set 全局操作</h1>
        <hr>
        <div id="app">
            <ul>
                <li v-for=" aa in arr">{{aa}}</li>
            </ul>
            <!-- <button @click="add()">外部添加</button> -->
        </div>
        <button onclick="add()">外部添加</button>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">

        function add(){
            console.log("我已经执行了");
            //app.arr[1]=‘ddd‘;

            //我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新
            Vue.set(app.arr,1,‘ddd‘);
        }
        //在构造器外部声明数据
        var outData={
            arr:[‘aaa‘,‘bbb‘,‘ccc‘]
        };
        var app=new Vue({
            el:‘#app‘,
            data:outData
        })
    </script>
</body>
</html>

Template 制作模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>template 模板</title>
</head>
<body>
    <div class="container">
        <h1>template 模板</h1>
        <hr>
        <div id="app">
            <h4>{{message}}</h4>
        </div>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                message: ‘hello Vue!‘
            },
            template: `<h4 style="color:green">template选项模板</h4>`
        })
    </script>    
</body>
</html>

当模板内容较多时上面的方式就不那么方便了，来看看template的标签模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>template 模板</title>
</head>
<body>
    <div class="container">
        <h1>template 模板</h1>
        <hr>
        <div id="app">
            <h4>{{message}}</h4>
        </div>
    </div>
    <template id="demo">
             <h2 style="color:red">我是template标签模板</h2>
    </template>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                message: ‘hello Vue!‘
            },
            template: ‘#demo‘
        })
    </script>    
</body>
</html>

Component 组件

在构造器外部注册全局化 Vue.component:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>Vue component</title>
</head>
<body>
    <div class="container">

        <!-- 组件标签 -->
        <small>*** 全局化就是在构造器的外部用Vue.component来注册</small>

        <div id="app">
            <h5>{{ message }}</h5>
            <hr />
            <momei></momei>
        </div>

    </div>
</body>
　　<script src="https://unpkg.com/vue"></script> 
    <script>
        //注册全局组件
        Vue.component(‘momei‘,{
            template:`<div style="color:red;">全局化注册的jspang标签</div>`
        })
        var app=new Vue({
            el:‘#app‘,
            data:{
                message: ‘Component组件‘
            }
        })  
    </script>
</html>

局部注册和全局注册相对，只在其作用域可用：

<script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            components:{
                "momei":{
                    template:`<div style="color:red;">局部注册的panda标签</div>`
                }
            }
        })
</script>

components写在构造器内且加上了S。

Comonent 组件的props属性设置

propr选项就是设置和获取标签上的属性值。

<panda from-here="XIAN"></panda>

var app=new Vue({
    el: ‘#app‘,
    components: {
        "panda": {
             template: `<div style="color:red;">Panda from {{ fromHere }}.</div>`,
             props: [‘fromHere‘]  // 注意此处采用驼峰书写
        }
    }
})

Component 父子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
    <title>component 父子组件</title>
</head>
<body>
    <div class="container">
        <div id="app">
            <h3>{{ messgae }}</h3>
            <hr />
            <momei></momei>  
        </div>
    </div>
</body>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
       var city={
           template:`<div>from xian!</div>`
       }
        var momei = {
            template:`<div>
                        <p> 八百里秦川</p>
                        <city></city>
                    </div>`,
            components:{
                "city":city
            }
        }
        var app=new Vue({
            el:‘#app‘,
            data: {
                messgae: ‘component 父子组件嵌套‘
            },
            components:{
                "momei":momei
            }
           
        })
    </script>
</html>

Component 标签

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

定义组件：

var componentA = {
    template: `<h1 style="color:red;">Im componentA</h1>`
};
 var componentB = {
     template: `<h1 style="color:red;">Im componentB</h1>`
};
var componentC = {
    template: `<h1 style="color:red;">Im componentC</h1>`
};

compoments 挂载组件：

components:{
    "componentA":componentA,
    "componentB":componentB,
    "componentC":componentC,
}

在html里书写component标签，通过数据绑定，调用组件。

至此Vue的全局API已有一定的认识，要做的就是多多实践，去发现，去建立信心，去走更远。

以上是关于Vue.js初探的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js初探

vue.js原理初探

使用带有渲染功能的 Vue.js 3 片段

初探Vue

Vue.js 中的片段

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中