Vue框架学习笔记01（入门版）

Vue框架学习笔记01（入门版）

今天在尝试了一堆乱七八糟的博客用来学习vue后发现MDN真是好用！严谨又细心

放一个链接：开始使用 Vue - 学习 Web 开发 | MDN (mozilla.org)

24.3.7：一堆莫名其妙的尝试

1. 成功使用npm创建第一个项目后，尝试导入vscode

根据教程首先在vscode上创建了一个launch.json文件，结果发现非常神奇地直接绑定了我创建的那个项目！

但是我点了点发现他贬的很奇怪……因为不太熟悉操作我在里面迷失了方向…

下次再试试吧！-_-||

2.使用图形化界面创建项目

很无聊地通过终端打开vue的项目管理然后又创建了项目。

然后很生气！为什么先教我的是npm创建，图形化多简单啊呜呜呜。

然后去了解了一下不同方式创建vue的区别

【Vue】构建vue项目的几种方法以及区别_npm init vue@latest和vue create-CSDN博客

3. 初识脚手架创建的系列文件

（1）package.json：该文件包含项目的依赖项列表，以及一些元数据和 eslint 配置。

（2）babel.config.js：Babel 的配置文件

（3）jsconfig.json：一份用于 Visual Studio Code的配置文件

（4）public：这个目录包含一些在 Webpack编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理）。

（5）src：Vue 应用的核心代码目录（main.js是入口文件，App.vue是根节点组件，components存放自定义组件，assets存放资源）

4. 自定义组件并动态化

在项目文件中的 components 目录下创建一个新的 .vue 文件后，就可以对组件添油加醋地更改了！

（1）将组件添加到应用程序中：

话不多说，直接上步骤和相应代码

① 在 App.vue 文件中的

import ToDoItem from "./components/ToDoItem.vue";

② 在组件对象中添加 components 属性，在其中添加自定义组件进行注册

import ToDoItem from "./components/ToDoItem.vue";

export default {
  name: "app",
  components: {
    ToDoItem,
  },
};

③ 将组件加入 App.vue 中的 模板

(请注意，组件文件名及其在 JavaScript 中的表示方式总是用大写驼峰（例如 ToDoList），而等价的自定义元素总是用连字符小写（例如 <to-do-list>）。)

<div id="app">
  <h1>To-Do List</h1>
  <ul>
    <li>
      <to-do-item></to-do-item>
    </li>
  </ul>
</div>

（2）使用 props 让组件动态化

① 注册 props

• 第一种方式是，以字符串数组的方式列出 props，数组中的每个实体对应一个 prop 名称。
• 第二种方法是将 props 定义为一个对象，每个 key 对应于 prop 名称。将 props 列为对象允许你指定默认值，将 props 标记为 required，执行基本的对象类型 (特别是 JavaScript 基本类型) ，并执行简单的 prop 校验。

此处使用法二，对象注册法。在 自定义组件.vue 中注册如下：

<script>
  export default {
    props: {
      label: { required: true, type: String },
      done: { default: false, type: Boolean }
    }
  };
</script>

② 使用注册好的 props

首先向 自定义组件.vue 中添加 label prop:

<template>
  <div>
    <input type="checkbox" id="todo-item" checked="false" />
    <label for="todo-item">{{label}}</label>
  </div>
</template>

Vue 中特殊的模板语法 {{ }}:能在模版内打印类中定义的 JavaScript 表达式的结果，包括值和方法。重要的是，{{}} 里的内容是作为文本显示，而非 HTML。

然后在 App.vue 中将 prop 传递进组件：

<to-do-item label="My ToDo Item"></to-do-item>

5. 持久化 Vue 的数据状态

① 将组件的 done prop 与 标签的 checked 属性作绑定

为了解决可能出现的 props突变 问题，使用 date 属性来管理 done 的状态：

data() {
  return {
    key: value
  }
}

data 属性：可以用来在组件中管理本地状态，它与 props 属性一同位于组件对象中并具有以上结构，他是一个函数。

② 更新组件对象

使用 this 从内部数据访问组件的 props 和其他属性，并向其添加一个 date 属性（使之返回一个包含单个属性的对象，即我们将调用 isDone，其值为 this.done。）

在 App.vue 中更新组件对象：

  props: {
    label: { required: true, type: String },
    done: { default: false, type: Boolean },
  },
  data() {
    return {
      isDone: this.done,
    };
  },
};

Vue 会把所有的 props 直接绑定到组件实例上，所以我们不必调用 this.props.done（使我们必须保持键的唯一性）

③ 将 isDone 属性附加到组件

Vue中的特殊语法 v-bind： 可以将 JavaScript 表达式绑定到 HTML 元素和组件，速记形式为

:attribute="expression"，表达式为 v-bind:attribute="expression"

将 :done="true" 传递到 App.vue 中的 自定义组件：

<template>
  <div id="app">
    <h1>My To-Do List</h1>
    <ul>
      <li>
        <to-do-item label="My ToDo Item" :done="true"></to-do-item>
      </li>
    </ul>
  </div>
</template>

6. 给组件唯一ID

① 使用 lodash 包的 uniqueid() 方式来保持索引唯一性

lodash 包：此包导出一个函数，该函数接收字符串并将唯一整数追加到前缀的末尾。这足以保持组件 id 的唯一性。

使用npm终端添加包后，

npm install --save lodash.uniqueid

在将其导入 自定义组件.vue ， 然后将字段 id 加入数据属性：

import uniqueId from "lodash.uniqueid";

export default {
  props: {
    label: { required: true, type: String },
    done: { default: false, type: Boolean },
  },
  data() {
    return {
      isDone: this.done,
      id: uniqueId("todo-"),
    };
  },
};

② 最后将将 id 绑定到复选框的 id 属性和标签的 for 属性，更新现有 id 和 for 属性

<template>
  <div>
    <input type="checkbox" :id="id" :checked="isDone" />
    <label :for="id">{{label}}</label>
  </div>
</template>

总结

今天在点了很多乱七八糟的奇怪教程和奇妙想法后，总算对 Vue 有了更深的认识和了解。学会了创建 Vue组件，使其动态化，避免 props突变和是建保持唯一性的一些方法。接触了 Vue 中 {{ }}、v-bind、lodash 、date属性 的一些新鲜玩意。

梳理一遍以后感觉自己对于一些细节原理仍然是一知半解的状态，en…，总之，希望接下来会更好~