已安装好node.js 16.14.2
一、项目脚手架
-
第一步:
npm install -g @vue/cli 或 yarn add -g @vue/cli
-
第二步:
vue create 项目名字(尽量用英文)
-
第三步:运行项目
npm run serve
安装新的软件包,使用npm i 依赖包的名字 或 yarn add依赖包的名字
二、vue相关概念:
-
vue3渐进式javaScricpt框架
-
特点:组件化、虚拟dom、diff算法
-
vue文件以vue结尾,是一个SFC(Single-File-Component)单文件组件
-
遵循MVVM 架构、Model-ViewModel, 重点是实现了数据的双向绑定,指令用的是v-modle、v-bind、v-on
-
理解M-A-VM模型,VlewModel 是实现虚拟dom、diff算法的核心点
-
-
内置指令:
-
v-text:插值绑定、语法也可以是{{ }}
-
v-html:绑定html代码片段,相当于是原生的innerHtml、有安全性问题,容易XSS攻击
-
v-show:显示一个dom元素,dom元素不会被删除、
-
v-if、v-else-if、v-else:动态显示一个dom元素,条件成立,dom元素才会真正显示出来,否则移除(不新增)真实dom
-
v-for :循环当前所在的元素,当前!当前!当前!
-
v-on:简写@ 绑定事件,鼠标事件,键盘事件,例如:@click,@dbclick、@mounseup、@mousedown、@mousemove
-
v-bind:绑定属性指令,是组件的prop或者attribute(width、height、style)
-
v-model:值的双向绑定,通常用与input(text、password、radio、checkbox、number)、select
-
v-slot:声明具名插槽或是期望接收props的作用域插槽
<!-- 具名插槽 --> <BaseLayout> <template v-slot:header> Header content </template> <template v-slot:default> Default slot content </template> <template v-slot:footer> Footer content </template> </BaseLayout> <!-- 接收 prop 的具名插槽 --> <InfiniteScroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </InfiniteScroll>
-
v-cloak:防止闪现指令、 v-once:静态内容指令、v-pre:跳过编译指令
-
-