VUE 基础语法（部分）

FoamValue

发布于 2022-08-22 14:04:33

5120

发布于 2022-08-22 14:04:33

文章被收录于专栏：FoamValueFoamValue

五一遇疫情 & 居家学VUE

一、目录结构

PS：上图修改了启动指令，npm start 便于记忆。

目录/文件	说明
dist	npm run build 编译后的产品包
node_modules	npm 依赖模块包
public	静态资源
src	源代码包
src/assets	静态资源
src/components	组件路径
src/App.vue	默认的 App 组件
src/main.js	createApp 入口
package.json	项目的配置文件
README.md	帮助文件
vue.config.js	Vue 配置文件

‍

二、基础语法

声明式渲染：允许使用简洁的模版语法，将内容渲染进DOM。

<p>{{ message }}</p>

<script>
data() {
    return {
      message: "Hello Vue.js!"    };
  },
</script>

处理用户输入：为了用户跟系统间的交互，可以使用 v-on 指令添加一个事件监听器。

<button v-on:click="reverseMessage">反转 Message</button>

<script>
methods: {
    reverseMessage() {
      this.message = this.message.split("").reverse().join("");
    },
  },
</script>

条件：控制元素是否显示。

<span v-if="seen">现在你看到我了</span>

循环：绑定数组数据，渲染一个列表。

<ol>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
      </li>
    </ol>

<script>
data() {
    return {
      message: "Hello Vue.js!",
      seen: true,
      todos: [
        { text: "Learn JavaScript" },
        { text: "Learn Vue" },
        { text: "Build something awesome" },
      ],
    };
  },
</script>

组件化应用构建：允许使用小型、独立和通用的可复用组件来构建大型应用。

<template>
  <li>{{ todo.id }} || {{ todo.text }}</li>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
    todo: Object
  },
};
</script>

<TodoItem v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"/>
import TodoItem from "./components/TodoItem.vue";

export default {
  name: "App",
  components: {
    TodoItem,
  },

三、生命周期

每个组件都有一系列的初始化过程，生命周期钩子的存在就是给用户在不同阶段添加自己代码的机会。如图：