【笔记】循序渐进 Vue.js 3.x 前端开发实战

前言

教材：

《循序渐进 Vue.js 3.x 前端开发实战》，张益珲&曹艳琴编著，清华大学出版社。

目录：
第1章从前端基础到 Vue.js 3
第2章　Vue 模板应用
第3章　Vue 组件的属性和方法
第4章　处理用户交互
第5章　组件基础
第6章　组件进阶
第7章　Vue 响应式编程
第8章　动画
第9章　Vue CLI工具的使用
第10章　Element Plus 基于 Vue 3 的UI组件库
第11章　基于 Vue 的网络框架 vue-axios 的应用
第12章　Vue 路由管理
第13章　Vue 状态管理
第14章　实战项目：开发一个学习笔记网站
第15章　实战项目：电商后台管理系统实战

源码与PPT：

个人笔记

一、前端基础

1.下载并安装开发工具 VSCode：https://code.visualstudio.com/ （插件推荐：Live Server）

2.了解 HTML、CSS、JavaScript 基本语法。【在学习Vue框架之前，必须要熟悉前端三剑客，否则学习很吃力】

1.HTML常见标签：
基本：<!DOCTYPE html>、<html lang="cn"></html>
头部：<head></head>、<meta charset="UTF-8">、<title>标题</title>、<link rel="stylesheet" type="text/css" href="./style.css?v=1.7">
中间：<body></body>、<img src="">、<a href=""></a>、<ul></ul>、<li></li>等。

<!-- 这里是注释的内容 -->

2.CSS选择器：
通用（*）、标签（p，div）、类（.class）、id（#id）选择器 共4种。

3.JS语法：
变量定义（var或let）、表达式（+-*/<=等）、函数定义（function或箭头）、条件语句（if, else if, else, switch, case）、循环语句（while，for）。

3.框架Vue的官网：https://cn.vuejs.org/

二、Vue模板

1.模板插值。可以通过 “{{}}” 往HTML中插入变量；v-html 可以往绑定的HTML标签中插入HTML代码；v-once 绑定的HTML标签只会被渲染一次；v-bind 可以更改绑定的HTML标签的属性，比如更改h1的id名<h1 v-bind:id="id1">这是模板内容</h1>。

2.模板指令。通常以 “v-” 开头，特殊的指令还可以添加指令参数（使用冒号），比如 v-bind:id、v-on:click等。由于 “v-bind” 和 “v-on” 使用很频繁，因此可简写为 “:” 和 “@”，例如：“:id”、“@click”。

3.条件渲染。①使用 “v-if” 和 “v-else” 指令，如果使用了后者，则后者必须紧紧挨在后面，否则无效。如果有多个条件，可以在二者之间添加多个 “v-else-if” 指令。【建议用<template>标签包裹你要控制的元素，因为该标签不会被渲染到HTML页面中，更美观，功能是一样的】②使用 “v-show” 也可以控制元素的显示，但渲染原理不同，它是控制元素的display属性，元素还是会加载到HTML页面中，它不支持<template>标签。

4.循环渲染。使用 “v-for” 指令，通常用在列表中，格式：item in list 。【提示：in也可换成of，推荐用<template>标签包裹你要控制的元素】例如：

<ul>
    <template v-for="(item,index) in handle(list)">
        <div>{{index + "." + item.name}}</div>
        <div>{{item.num}}</div>
    </template>
</ul>

<ol>
    <li v-for="(value,key,index) in preson" :key="index">
        {{key}}:{{value}}
    </li>
</ol>

<script>
    // 定义一个Vue组件, 名为App
    const App = {
        data() {
            return {
                list:[
                    {
                        name: "珲少",
                        num: "151xxxxxxxx"
                    },
                    {
                        name: "Jaki",
                        num: "151xxxxxxxx"
                    },
                    {
                        name: "Lucy",
                        num: "151xxxxxxxx"
                    },
                    {
                        name: "Monki",
                        num: "151xxxxxxxx"
                    },
                    {
                        name: "Bei",
                        num: "151xxxxxxxx"
                    }
                ],
                preson: {
                    name: "珲少",
                    age: "00",
                    num: "151xxxxxxxx",
                    emali: "xxxx@xx.com"
                }
            }
        },
        methods: {
            click() {
                this.list.reverse()
            },
            handle(l) {
                return l.filter(obj => obj.name != "珲少")
            }
        }
    }
    Vue.createApp(App).mount("#Application") 
</script>

常见问题：

1.不会下载文件？答：请查看下载帮助。
2.我应该下载哪个文件/软件？答：通常“数字后缀”表示版本号（越大越新），下载数字最大的即可！
3.下载地址为什么隐藏了？答：防止爬虫索引，敏感内容登录即可免费下载！

THE END