脚手架安装

为什么需要脚手架 webpack自己配置环境繁琐,官方提供脚手架, 能够快速搭建项目基础结构,零配置，随开随用

脚手架安装 安装@vue/cli全局模块包yarn global add @vue/cli 或者npm下载npm i -g @vue/cli.查看Vue命令版本vue -V,运行命令后显示版本号,即安装脚手架成功

脚手架-创建项目-启动服务 项目名不能带大写字母, 中文和特殊符号.vue create vuecli-demo注意:vue和create是命令, vuecli-demo是文件夹名,运行后上下箭头选择需要vue2或vue3,等待下载,完成后根据提示依次 运行 cd vuecil-demo || yarn serve只要看到绿色的,就成功了,把显示出来的地址复制到浏览器中打开,看见vue图标和各种连接即脚手架创建成功.

脚手架里每个文件对应的目录

Vue的基本指令

插值表达式语法:{{ 表达式 }}

MVVM设计模式减少DOM操作，大大提高开发效率

v-on事件绑定@事件名="methods里的函数名" 给事件传参- @事件名="methods里的函数名(实参)"

v-model双向绑定v-model有什么作用？把Vue的"数据变量"和表单的"value属性"双向绑定在一起

Vue指令-v-show和v-if v-show 用的display:none隐藏 (频繁切换使用)| v-if 直接从DOM树上移除 | v-if可以配合v-else使用

v-for循环v-for="(值变量, 索引变量) in 目标结构" | v-for="值变量 in 目标结构" ------可以遍历数组 / 对象 / 数字 / 字符串