Vue 入门：el: '#app' 是什么意思 & component 组件 & 实现 ToDoList

最新推荐文章于 2024-02-09 07:45:00 发布

莫亓

最新推荐文章于 2024-02-09 07:45:00 发布

阅读量1w

点赞数 11

分类专栏：初次见面请多关照

本文链接：https://blog.csdn.net/Bule_daze/article/details/105951157

版权

本文从原生JS实现基本页面开始，逐步引入Vue，通过官方文档下载Vue库，实现简单的ToDoList功能。重点讲解了Vue的v-for、v-on、v-model指令，以及如何使用组件改造ToDoList，包括全局组件和局部组件的创建。同时，介绍了如何为ToDoList增加删除功能，利用v-on的简写@和子组件触发事件进行父组件的方法调用。

摘要由CSDN通过智能技术生成

🧙‍♀️ 用原生 js 实现基本页面

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    var dom = document.getElementById('app');
    dom.innerHTML = 'hello world';
  </script>
</body>

</html>

🧙‍♀️ 用 vue 实现

在官方文档中下载 vue 库。
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World</title>
  <script src="./vue.js"></script>    <!-- 引入 vue 库 -->
</head>

<body>
  <div id="app">{
  { content }}</div>  <!-- 通过 {
   {}} 调取下面 data 中的内容 -->
  <script>
    var app = new Vue({
       // 首先创建一个Vue的实例，这个实例接收一些配置项
      el: '#app',         // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
      data: {
                 
        content: