零基础学习 Vue.JS ——（5）组件篇

最新推荐文章于 2020-10-22 15:36:53 发布

不认输的西瓜

最新推荐文章于 2020-10-22 15:36:53 发布

阅读量225

点赞数 1

分类专栏： vue 文章标签： web vue.js 前端零基础学习轻量级框架

本文链接：https://blog.csdn.net/qq_40678503/article/details/82351400

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue.js 允许用户自定义 HTML 组件,来封装复杂的内容,提高可重用性。

比如封装复杂的表格组件、日历组件、图片轮播组件等等。

全局组件就是每个 Vue 对象都能使用的组件,局部组件只能在某个 Vue 对象之内使用。

全局组件

全局组件是通过 Vue.component() 函数声明注册的组件,每个 Vue 实例都能使用全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        ul{
            list-style: none;
            overflow: hidden;
        }
        li{
            float: left;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <navigator></navigator>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

Vue.component("navigator",{
   template:"<ul><li>首页</li><li>产品</li><li>服务</li><li>联系我们</li></ul>"
});
var app=new Vue({
    el:"#app"
});

以上是用全局组件显示导航的例子。使用Vue.component() 函数声明注册的组件，自定义了标签navigator，将声明注册组件的内容加载到navigator标签中。

局部组件

局部组件是通过 Vue 实例中注册的组件,只能用在当前实例之内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;
            overflow: hidden;
        }
        li{
            float: left;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div id="app">
    <navigator></navigator>
</div>
<div id="app2">
    <navigator></navigator>
</div>
<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    components:{
        "navigator": {
            template: "<ul><li>首页</li><li>产品</li><li>服务</li><li>联系我们</li></ul>"
        }
    }
});

因为定义的是局部组件，所以只有在id为app的div中才会显示导航。

组件中的插值

组件中可以使用插值，但是不能使用指令。插值的数据必须通过声明模板。

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

    </style>
</head>
<body>
<div id="app">
    <student></student>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

Vue.component("student",{
    template:"<table>
    <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>住址</th>
    </tr>
    <tr>
    <td>{{name}}</td>
    <td>{{sex}}</td>
    <td>{{address}}</td>
    </tr>
    </table>",
    data:function(){
            return{
                name:"Scott",
                sex:"male",
                address:"China"
            }

        }
    }
)
var app=new Vue({
    el:"#app"
});

输出为一个表格。

组件中的属性传值

我们可以向组件的属性传值，然后再组件中就能使用这个数据了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <message content="明天不上班啦"></message>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

Vue.component("message",{
    template: `
        <fieldset>
            <legend>消息通知</legend>
            <p>{{content}}</p>
        </fieldset>
   `,
    props:['content']

    }
)
var app=new Vue({
    el:"#app"
});

其中````` ```写法为最新ES6的写法，因为ES5中换行需要字符串的拼接，所以这里用了ES6的写法。

组件的属性不支持驼峰式的命名，如：
<message workContent="明天不上班啦!"></message>
是不会显示信息的，正确写法应该为：
<message work-content="明天不上班啦!"></message>

用属性传值是把内容写死的，那么我们可以不可以自动生成内容呢？
当然可以，这时候我们就会用到属性的插值!

组件中的属性插值

同样的，组件中是支持属性插值语法的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p><input type="text" v-model="msg" placeholder="消息"></p>
    <message :content="msg"></message>
</div>
<script src="../vue.js"></script>
<script src="main2.js"></script>
</body>
</html>

Vue.component("message",{
        template: `
        <fieldset>
            <legend>消息通知</legend>
            <p>{{content}}</p>
        </fieldset>
   `,
        props:['content']

    }
)
var app=new Vue({
    el:"#app",
    data:{
        msg:null
    }
});

接受文本框中输入的内容，给content然后再加载到页面上。

属性插值和传值的区别
向属性传值，传入的是字符串，但是插值，插入的是表达式。
<message content="1000+1000"></message>
<message :content="1000+1000"></message>
前者输出的就是“1000+1000”，不管你写什么，它都会原封不动是输出给你
后者输出的是2000，因为插值插入的是表达式。

组件为我们的编码省下了很多力气，那么我们可不可以在组件中使用我们之间学到的计算属性，函数和过滤器呢？
答案的肯定的。

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

    </style>
</head>
<body>
<div id="app">
    <p><input type="text" v-model="msg"></p>
    <message :school-content="msg"></message>
</div>

<script src="../vue.js"></script>
<script src="main3.js"></script>
</body>
</html>

Vue.component("message",{
        template: `
        <fieldset>
            <legend>消息通知</legend>
            <p>{{uppercase}}</p>
        </fieldset>
   `,
        props:['schoolContent'],
        computed:{
            uppercase:function(){
                return this.schoolContent.toUpperCase();
            }
        }
    })
var app=new Vue({
    el:"#app",
    data:{
        msg:""
    }
});