五一遇疫情 & 居家学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。
代码语言：javascript复制<p>{{ message }}</p>
<script>
data() {
return {
message: "Hello Vue.js!" };
},
</script>处理用户输入：为了用户跟系统间的交互，可以使用 v-on 指令添加一个事件监听器。
代码语言：javascript复制<button v-on:click="reverseMessage">反转 Message</button>
<script>
methods: {
reverseMessage() {
this.message = this.message.split("").reverse().join("");
},
},
</script>条件：控制元素是否显示。
代码语言：javascript复制<span v-if="seen">现在你看到我了</span>循环：绑定数组数据，渲染一个列表。
代码语言：javascript复制<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>组件化应用构建：允许使用小型、独立和通用的可复用组件来构建大型应用。
代码语言：javascript复制<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,
},三、生命周期
每个组件都有一系列的初始化过程，生命周期钩子的存在就是给用户在不同阶段添加自己代码的机会。如图：
这个图比较复杂，可以先熟悉熟悉。常用的三个钩子：
- befoeCreate，组件初始化时可以加上 loading 函数
- created，取消 loading 函数
- mounted，调用后端接口获取数据
四、总结
以上内容仅是 Vue 基础教程中的一小部分，例如计算属性、侦听器、Class Style 绑定、事件处理、表单输入绑定等基础教程就不一一赘述了。有兴趣的小伙伴可以自行研究官方教程。
虽然只是部分基础语法，但是简单的静态页面开发已经是完全可以胜任了。
