二丫讲梵 二丫讲梵
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)

二丫讲梵

行者常至,为者常成
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)
  • Shell编程

  • Go编程笔记

  • 前端编程笔记

  • Go学习笔记

  • Vue-21年学习笔记

  • Vue-22年重学笔记

    • 基础知识

      • 初识Vue
      • 模板语法
      • 数据绑定
      • el与data的两种写法
      • MVVM模型
      • 数据代理
      • 事件处理
      • 计算属性
      • 监视属性
      • 绑定样式
      • 条件渲染
      • 列表渲染
      • 收集数据表单
      • 过滤器
      • 内置指令
      • 自定义指令
      • 生命周期
      • 非单文件组件
      • 单文件组件
      • 脚手架工程化

    • 编程世界
    • Vue-22年重学笔记
    • 基础知识
    二丫讲梵
    2022-08-17
    目录

    单文件组件

    文章发布较早,内容可能过时,阅读注意甄别。

    # 代码目录

    $ tree -N
    .
    ├── App.vue
    ├── School.vue
    ├── Student.vue
    ├── index.html
    └── main.js
    
    0 directories, 5 files
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    # App.vue

    <template>
      <div>
        <School></School>
        <Student></Student>
      </div>
    </template>
    
    <script>
    // 引入组件
    import School from "./School.vue";
    import Student from "./Student.vue";
    
    export default {
      name: "App",
      components: {
        School,
        Student,
      },
    };
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # School.vue

    <template>
      <!-- 组件的结构 -->
      <div class="demo">
        <h2>学校名称:{{ name }}</h2>
        <h2>学校地址:{{ address }}</h2>
        <button @click="showName">点我提示学校名</button>
      </div>
    </template>
    
    <script>
    // 组件交互相关的代码(数据,方法等)
    export default {
      name: "School",
      data() {
        return {
          name: "尚硅谷",
          address: "北京",
        };
      },
      methods: {
        showName() {
          alert(this.name);
        },
      },
    };
    </script>
    
    <style>
    /* 组件的样式 */
    .demo {
      background-color: orange;
    }
    </style>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33

    # Student.vue

    <template>
      <!-- 组件的结构 -->
      <div>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age }}</h2>
      </div>
    </template>
    
    <script>
    // 组件交互相关的代码(数据,方法等)
    export default {
      name: "Student",
      data() {
        return {
          name: "eryajf",
          age: 18,
        };
      },
    };
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # index.html

    <!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" />
        <title>练习一下单文件组件的语法</title>
      </head>
      <body>
        <!-- 准备一个容器 -->
        <div id="root"></div>
        <!-- <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="./main.js"></script> -->
      </body>
    </html>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    # main.js

    import App from "./App.vue";
    
    new Vue({
      el: "#root",
      template: `<App></App>`,
      components: { App },
    });
    
    1
    2
    3
    4
    5
    6
    7
    微信 支付宝
    上次更新: 2024/06/13, 22:13:45
    非单文件组件
    src_分析脚手架

    ← 非单文件组件 src_分析脚手架→

    最近更新
    01
    学习周刊-总第212期-2025年第21周
    05-22
    02
    从赵心童世锦赛夺冠聊聊我的斯诺克情缘
    05-16
    03
    学习周刊-总第211期-2025年第20周
    05-15
    更多文章>
    Theme by Vdoing | Copyright © 2017-2025 | 点击查看十年之约 | 浙ICP备18057030号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式