已安装好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 渐进式javaScript 框架
-
特点：组件化、虚拟dom、diff算法
-
vue文件以.vue 结尾， 是一个SFC（Single-File-Component） 单文件组件
-
遵循 MVVM架构，Model-View-ViewModel，重点是实现了数据的双向绑定，指令用的是v-model、v-bind、v-on
-
理解M-V-VM 模型，VIewModel 是实现虚拟dom、diff算法的核心点
1665900958510.png
-
内置指令：
-
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、@mouseup、@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 跳过编译指令
-
属性
- data：返回一个对象，这个对象是局部的状态，可以通过this直接引用
<template>
<div class="about">
<el-form label-position="left" label-width="100px" style="max-width: 460px">
<el-form-item label="用户名">
<el-input v-model="formObj.username" />
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formObj.password" />
</el-form-item>
<el-form-item>
<!-- 使用动态跳转方式 -->
<el-button type="primary" @click="submitForm()">立即登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "LoginView",
data() {
return {
// 在 eslint 中的标准的对象，k-value 中的 value通常需要使用 单引号
formObj: {
username: "",
password: "",
},
};
},
}
在template中不用写this
-
computed:计算属性,用计算属性的前提是：
-
和vuex中的状态属性之间有关联
-
需要用到的三元表达式代码
-
这里面不能写耗时的一些代码,必须有返回值
computed: {
orderStatData2() {
return this.$store.state.home.orderStatArr;
},
},
-
watch：侦听器，作用：每次响应式属性(data中返回的局部状态)发生变化时触发一个函数。
监听的方法名字是和局部状态中的状态名字一一对应。
监听到变化后，执行的是一个异步操作，同步的话会使用计算属性
export default {
data() {
return {
question: '',
answer: 'Questions usually contain a question mark. ;-)'
}
},
watch: {
question(newQuestion,oldQuestion) {
if(newQuestion,include('?')){
this.getAnswer()
}
}
}
}
-
props声明:接受父组件传入的相应状态或方法
props在当前组件中是只读的
export default { props: {
title:String,
likes:Number, }}
-
mixin:对代码的复用进行抽取
弊端：大项目里命名不可控，容易冲突，不好发现
优点：代码复用，加强团队之间的代码协作
export const score = {
//这里和组件中的export default{}中的属性平级关系
methods: {
//弹出分数
alentScore(student, score1) {
alert(student + "的成绩是:" + score1);
},
},
};
局部混入的使用
1665902796205.png
-
组件的通信
第一种：父传子
props：传入的属性是只读的
第二种：子传父 this.$emit()
<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>
第三种：跨组件（2.0之前，3.0之后this.$on()取消了）
this.on() 在需要的组件中
第四种：插槽
默认插槽、具名插槽、作用域插槽
1665902913820.png
1665902956681.png
作用域插槽：商品列表（elementUI中的table组件）
数据在子组件中，但是自己不能决定结构，需要将数据传递给父组件，父组件决定结构
-
this.$nextTick:确保dom渲染完成后，执行一个方法，保证界面体验无错误
适用的场景
1665903153486.png
三、路由（vue-router）
路由是前端框架定制化后的一种对界面跳转的新叫法
-
hash路由：地址栏的路径规则有#这个符号
-
history路由：传统的用符号/分割这个地址（刷新页面，会提示404错误，需要后端做代理配置）
-
路由的定义方式：
路由懒加载，延迟加载 import中的值是 路径地址 component: () => import("../layout/BaseLayout.vue")
1665903203963.png
- 路由的传参
第一种：使用path中的占位符号（定义的方式 ：id，id相当于形参）
多用于嵌套路由
1665903298831.png
跳转的页面接收：
1665903337913.png
第二种：push方法
多用于单页面间的跳转
常规用法
1665903376496.png
传递参数的用法
1665903417941.png
小程序使用的 uni.navigateTo:跳转单页面 uni.switchTab:跳转到tab导航页面
-
导航守卫
全局的前置守卫
-
界面跳转时增加一个进度条效果
-
判断用户是否有权限访问当前页面
-
//to：要跳转的导航地址 from：当前页面 next：执行跳转页面的方法
router.beforeEach((to,from,next) =>{
//判断是否登录过了，如果是，跳转到to传入的页面地址，反之，拦截页面跳转，还停留在登陆界面
if(to.name !== 'login' && !isAuthenticater)
next({name:'login'})
else next()
})
全局的后置守卫
- 页面开始渲染时，修改地址栏的信息、和title
1665903476286.png
- 路由元信息 定义的规则： meta：{}
使用$route.meta 获取到元信息
1665903509586.png
用到的组件库
Element-ui 2.2.17
uView 2.0
网友评论