《Web前端开发》课件——任务二 Vue基础入门.pptxVIP

Web前端开发

项目八浅谈Vue任务二Vue基础入门

学习目标：知识目标：熟识Vue项目目录结构及语法。技能目标：运用VisualStudioCode开发环境完成Vue项目创建。素质目标：培养学生实践操作能力，培养学生归纳总结的能力。

任务准备：一、Vue项目目录结构Vue项目的目录结构如图8.11所示。在目录结构中，各项含义如下。（1）.vscode是VSCode工具的配置文件夹。（2）node_modules是Vue项目的运行依赖文件夹。（3）public是资源文件夹，里面的favicon.ico就是浏览器中的项目图标。（4）src是源码文件夹。（5）.gitignore是git忽略文件。（6）index.html是程序启动的入口HTML文件。（7）package_lock.json是信息描述文件。（8）README.md是注释文件。（9）vite.config.js是Vue的配置文件。图8.11Vue项目的目录结构

任务准备：二、Vue模板语法Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上，所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。1.文本插值最基本的数据绑定形式就是文本插值，它使用的是“Mustache”语法（即双括号）。结构如下。