vue编码一个简单的组件-JZTXT

基于上一篇博客，现在我来学一下，如何根据vue编写一个简单的组件

第一步：导入vue.js模板

第二步：代码编写，定义一个Vue组件component

第三步：还是需要id填写app调用这个script

zujianmingcheng == 组件名称（自定义的）

全部代码演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <zujianmingcheng></zujianmingcheng>

</div>

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

<script>

    //定义一个组件
    Vue.component("zujianmingcheng",{
        template: '<font color="blue">定义蓝色组件</font>'

    });

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

</script>

</body>
</html>