非单文件组件编写

最新推荐文章于 2024-06-10 08:12:21 发布

竹了

最新推荐文章于 2024-06-10 08:12:21 发布

阅读量528

点赞数

分类专栏：学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36129587/article/details/121240641

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue文件 -->
    <script src="../js/vue.js"></script>
    <title>非单文件组件</title>
</head>

<body>
    <!-- 创建容器 -->
    <div id="root">
        <h1>{{msg}}</h1>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <company></company>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <staff></staff>
    </div>

    <script>
        // 第一步：创建组件
        const company = Vue.extend({
            template: `
                <div>
                    <h3>公司名称：{{name}}</h3>
                    <h3>公司地址：{{address}}</h3>
                </div> 
            `,
            data() {
                return {
                    name: "华彭信息工程",
                    address: "厦门集美"
                }
            }
        })
        const staff = Vue.extend({
            template: `
                <div>
                    <h3>员工姓名：{{name}}</h3>
                    <h3>员工年龄：{{age}}</h3>
                    <h3>员工爱好：</h3>
                    <ul>
                        <li v-for="(h,i) in hobby">{{hobby[i]}}</li>
                    </ul>
                </div> 
            `,
            data() {
                return {
                    name: "黄春花",
                    age: 23,
                    hobby: ["唱歌", "打麻将", "看快手", "骑摩托"]
                }
            }
        })
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    msg: "X档案"
                }
            },
            // 第二步：注册组件
            components: {
                company,
                staff
            }
        })
    </script>
</body>

</html>

打开浏览下看下效果：

竹了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非单文件组件编写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入Vue文.
复制链接

扫一扫