Vue框架课程
第二季课堂笔记
课程链接：https://ke.qq.com/webcourse/index.html#cid=423902&term_id=100505967&taid=11772015732488158&type=1024&vid=3701925924953956667
1 修饰符
修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充
1.1 事件修饰符
看下面的案例
此时如果点击了inner，其实就相当于点击了center和outer，此时如果都绑定了事件监听，就势必都会被触发
我们现在想阻止这种事件冒泡，通过两种方法
1 stop修饰符（常用）
通过上面的案例，我们了解了.stop修饰符的作用就是阻止事件的一个冒泡
其作用类似原生JavaScript的event.stopPropagation()方法
inner(event) {
event.stopPropagation();
console.log(“内层”)
} ### 2 self修饰符 .self修饰符的作用是只有点击元素本身的时候才能触发事件，不接受冒泡上来的事件，同时也不能阻止事件的冒泡
.self修饰实际是不能阻止事件向上冒泡的
3 prevent修饰符
如果一个超级链接，既有链接，又有事件，此时点击超级链接后会发生什么？
点击跳转到百度
答案是先会执行事件的内容，然后会执行a默认的跳转事件
此时我们不需要a标签跳转到百度，执行完事件监听后就停止，通过.prevent修饰符阻止
点击跳转到百度
和stop修饰符一样，prevent也有原生的事件方法
event.preventDefault();
4 capture修饰符
capture修饰符是对事件捕获的监听，vue的事件监听，默认都是获取冒泡阶段的，所以使用capture去监听捕获阶段的事件
5 once修饰符
once修饰符的作用就是使事件只触发一次
methods:{
add(event) {
this.a++
console.log(this.a)
}
}
1.2 按键修饰符
我们之前在JavaScript的课程中接触过onkeydown和onokeyup，这两个是键盘的事件监听，在vue中有对应的事件修饰符
基本使用方法
.space是vue封装的对keyCode别名，和下面的代码表示内容相同
常用的keyCode别名
| keyCode值 | 别名 | 键盘按键 |
|---|---|---|
| 13 | .enter | 回车 |
| 32 | .space | 空格 |
| 37 | .left | 键盘左键 |
| 38 | .up | 键盘上键 |
| 39 | .right | 键盘右键 |
| 40 | .down | 键盘下键 |
| 9 | .tab | 键盘tab |
| 46或者8 | .delete | delete或者backspace |
1.3 系统修饰符
系统修饰符指的是通过一些指定的按键配合鼠标点击或者键盘事件进行事件监听
比如.ctrl系统修饰符的使用
此时按住键盘ctrl键然后鼠标点击才能实现add加1
常用的系统修饰符
| 修饰符名称 | 对应的键盘键名称 |
|---|---|
| .ctrl | ctrl |
| .alt | alt |
| .shfit | shift |
| .meta | 如果是windows系统代表的是键盘的徽标键，如果是IOS系统，单表的是common键 |
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件
1.4 exact修饰符
exact修饰符的作用是辅助其他修饰符进行精确匹配的
方法就是在对应的修饰符的后面进行连续打点
1.5 鼠标按键修饰符
鼠标按键修饰符修饰的是鼠标的左、滚轮、右键
如果我们需要点击某个事件，但是我们可以需要使用鼠标右键
此时我们发现右键点击按钮的时候确实可以实现点击，但是也会出现右键的默认弹窗
此时我们可以结合prevent修饰符实现右键的事件监听
需要注意的是，prevent修饰符必须在.right修饰符的后面，否则会失效
1.6 表单修饰符
表单修饰符一共有三个，分别是.lazy，.number，.trim
表单修饰符都是用来修饰v-model属性的
.lazy修饰符是将Input输入框的数据绑定v-model从实时监听的状态变为change状态
{{a}}
当鼠标的光标失去焦点之后
.number修饰符的作用是将内容转化为数字类型
需要注意的是.number修饰符会将非数字内容进行过滤，得到的是纯数字类型，是可以进行计算的非NaN数字
如果没有使用number修饰符，得到的输入框的数字都是string类型
.trim修饰符的作用是过滤用户输入的收尾空格
比如我们没有设置trim之前
此时我们给v-model修饰trim
得到的是纯没有收尾空白的内容
2 vue-cli
vue-cli是vue的脚手架工具，帮我们快速生成了vue的起步项目，内置一些必备的比如打包工具，比如配置文件等等
地址：https://cli.vuejs.org/zh/
如何安装cli？
第一步
npm install -g @vue/cli
如何查看是否安装成功
vue —version
我们使用vue create命令创建自己的项目
vue create my-project
安装成功后会有成功的提示语
在你的安装目录中有相应的文件夹
为了方便后期的开发，如果使用vsCode 的同学，老师推荐安装一些常用vue插件
Vue 2 Snippets、Vue Theme、Vue VS Code Extension Pack、Vue VSCode Snippets、Vuter
我们使用的是vsCode的终端面板
此时在浏览器中打开
2.1 cli目录结构
- node_modules项目的依赖中心
- public：静态资源文件夹，和assets不同的是public不会被webpack进行打包，使用路径的时候要使用绝对路径
- src：项目的核心区域，所有的开发文件的核心内容区域，包括组件，静态资源等等
- asstet：静态资源文件夹，和public不同的是assets文件夹会被webpack打包，所以要使用相对路径
- components：Vue功能组件的存放位置，内部存放的是公用的组件
- views：公共文件，主要以各个独立页面为主
- APP.vue：整个vue的根组件，所有的vue组件都是从这个组件中拓展的，App根组件最后通过编译后将内容渲染到.html文件中
- main.js：vue的入口文件，vue文件初始化位置
- .gitignore：GitHub相关配置文件，作用是git再提交代码的时候指定相关忽略格式文件
- babel.config.js：babel的配置文件
- package.json：配置（记录了）项目的相关模块，项目相关配置信息等等
- package-lock.json：作用是记录的当前项目安装的相关依赖版本，并且记住了当前所有依赖的关联关系，如果下次vue进行编译的时候会按照这个文件进行编译
- README.md：文件的作用是项目相关的使用方法，和使用说明
2.2 cli文件的编译过程
我们知道vue-cli的起步命令是npm run serve，那么这个命令干了一些什么，为什么可以执行相关的编译程序？
首先我们要知道npm run 执行一个命令或者是一个文件内容
我们看package.json文件中
{
“name”: “my-project”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
},
“dependencies”: {
“core-js”: “^3.6.5”,
“vue”: “^2.6.11”
},
“devDependencies”: {
….
},
“eslintConfig”: {
…
},
“browserslist”: [
…
]
}
我们知道scripts是npm执行目录，也就是在scripts这个对象中的key就是npm run的命令值
vue-cli提供了三个命令
- serve：这个是我们开发使用的命令，执行编译和热更新（ctrl+s的时候浏览器会实时更新）
- build：工作中如果我们本地调试完后需要部署代码前，进行打包的命令
- lint：命令的作用是检验文件代码的合格性（对eslint的校验）
我们以npm run serve为例
第一步命令会找到node_modules文件夹中.bin文件夹内部的vue-cli-service文件
然后我们根据路径查找到了相关文件
核心代码路径
severice.js文件是整个编译过程的核心文件
2.3 vue-cli的起步文件
1 main.js文件
import Vue from ‘vue’
// 相对路径引入的App.vue文件
import App from ‘./App.vue’
// 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
Vue.config.productionTip = false
new Vue({
// 渲染节点
render: h => h(App),
// 挂载函数，内部#app是vue的根节点
}).$mount(‘#app’)
2 public>index.html根文件
<!DOCTYPE html>
noscript标签的作用是当script标签加载不出来或者抛出错误的时候替换内容，目的是在浏览器中提供友好提示
3 App.vue文件
App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的
我们将整个App.vue文件清空后发现
组件是可以复用的，并且数据是隔离的
在给App.vue多添加几个Mashibing.vue文件
# 4 父子组件传值
## 4.1 父组件传值给子组件
我们使用组件一定是依托在某一个父组件的身上，比如我们上面写的Mashibing.vue文件就是依托在App.vue文件中，此时我们如果要使用App.vue文件中的值怎么办
vue提供了一个props的入口，也是父子组件之间唯一的传值方式，父组件通过v-bind自定义属性传入值，子组件通过props接受对应的参数
父组件
公共v-bind自定义属性传值，注意由于vue的属性对大小写不敏感，所以如果需要写驼峰命名，需要使用-隔开
比如msb-value代表的就是msbValue
data(){
return {
a: 100
}
}
子组件
马士兵教育，我接收到的父组件的值是：{{msbValue}}
子组件通过props罗列父组件的传值，接收的参数可以有多个，props可是数组，也可以是对象
父组件
子组件接受，数组方式
马士兵教育，我接收到的父组件的值是：{{msbValue}} {{valueB}}
{{valueC}}
可以使用对象去接收参数
props:{
msbValue: Number,
valueB: Number,
valueC: Number
}
如果props是一个对象，那么这个对象的key是自定义传入参数属性，value是希望传入的参数类型
比如我们限制的是数字类型
但是我们传入的是一个字符串，此时，控制台后报错，提示你希望传入number类型
如果props是对象的话，参数可以配置
比如配置参数必填项
props:{
msbValue: {
type: Number,
required: true
},
valueB: Number,
valueC: Number
},
如果props的值也是一个对象，type代表的是类型，required是一个布尔值，如果为ture代表的是设置必填项，如果不填，则会抛出错误
比如default代表的是默认的不传入的值的参数
msbValue: {
type: Number,
default: 500
}
如果props的default值是Object或者Array，需要使用函数return
msbValue: {
type: Object,
default: ()=>{
return {a:100}
}
}
validator是数据的校验
msbValue: {
type: Number,
// 数据的校验
validator: function(value) {
return value > 101
}
}
## 4.2 子组件修改父组件的参数
需要注意的是子组件不可以直接修改父组件的值，只能传出一个自定义事件，父组件通过调用这个自定义事件后，然后在外部修改值子组件代码
马士兵教育，我接收到的父组件的值是：{{msbValue}} {{valueB}}
{{valueC}}
$emit方法是vue封装的，用来想父组件返回对应的自定义事件，父组件通过在子组件身上设置对应的自定义事件后设置事件名称
父组件代码
@add自定义事件是子组件通过$emit传出来的自定义事件，父组件通过这个事件设置事件方法sunNum，然后修改自己的值，从而时间子组件修改父组件的值
这么做的目的就是为了让数据可观察性更强，可维护性更高，有一个更清晰的清单
若有收获，就点个赞吧
0 人点赞
