2023新版Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马
常见标签:
<div='box'></div>表示盒子框
<li></li>表示列表
<h1>表示一级标题
<u1>表示正文
<button>按钮
<span>大列表容器
<a>标签
<tr><td>表格类
class:表示引入的类
href:表示可以超链接---><a href='#'>表示链接默认页面
p12
this含义:表示挂载的名称,这里是表示app(app=this),methods方法中调用data中的数据,要用this.'数据名'
v-on事件绑定,可以简写成@:
如 v-on:click="fn"-->@click="fn"
v-bind动态渲染,可以简写成:'属性名'
如 v-bink:src=' '-->:src=' ' -->:class
v-bind动态设置路径、插入值
☆☆☆
class方法不想写实,动态调用方法active,可将方法写成对象:class='{ active:index===id}'
p16
v-for遍历
格式:v-for="(item,index) in list":key="item.id"
给列表遍历key不要少
删除方法的定义:
用filter过滤,从数组获取删除的对象id,将不是本id的保留,是本id的过滤掉,再赋值覆盖到原来数组filter(item => item.id !== id)
给<li>列表里面加语句:key="item.id"表示给列表加id,则删除是删除列表所有内容及列表本身,不加则是只删除里面的文字和最后一个列表
v-model数据双相绑定
①unshift在原数组上添加
②v-model.trim 前后空格祛除
③v-model.number 数字字符装换成数字
@keyup.enter=" " 键盘监听 fatkun
操作class对象调用方法:
链接点击后高亮
表格个人信息填写
1.单选框--性别
<input type="radio" name="gender">男
<input type="radio" name="gender">女
name字段表示只能有一个,两个gender都给name故只能二选一.还应该要写value,相互关联写v-model
2.选择框--兴趣爱好等
<input type="checkbox" v-model="is">
3.下拉菜单
<select>
4.自我输入框
<textarea>
5.计算属性---根据多笔数据计算出总量
数据及逻辑,同时要有返回return放在computed中,不再是data
this.list.reduce((sum,item)=>sum+item.num,0)
①reduce表示叠加,
②其中参数一(sum,item)=>sum+item.num是表示计算规则,sum是每阶段的值,item是遍历的每个对象
③参数二0是表示计算起始值
注:接收参数let total=this.list.reduce()
6.字符串截取
slice(0,1) : 0索引开始到1索引结束且不包含1
7.<a @click.prevent="del(item.id)" href="#">
prevent阻止默认行为
没加prevent时,点击超链接会跳离当前页面,去其他页面.
8.对输入的类型判断
if(typeof this.score !=='number'){ }
9.输入框清空
在add()方法后加上
- this.subject = ' '
- this.score = ' '
10.对小数保留两位小数
.toFixed(2)
computed计算属性和methods方法区别
computed计算出的结果就放缓存,多次使用后更加节约效能
computed完整方法:有get()和set()
watch:监听变化
1.可监听data里面的值,获取变化前后的值
2.若值是存在data里面的方法,在与data同级别的watch中要写方法.要的值,并且加上单引号
完整写法:
1.对多个条件进行检测,并获得newValue
可以定义多个对象,将多个值都定义进去
2.检测多个对象,就必须开启深度检测deep:true handler(){}
3.调动接口,或者向后端发送请求用axios ,async+await 是缓冲让程序等一下全部数据都接收好了再运行
完整写法:
4.细说async+await:
①await只能放在async函数里面，如果不放在里面，代码会直接报错，不能运行
②await后面的函数要写()
5.let,const,var都是变量类型分别作用:
" const声明一个只读的常量。一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值。"
Day4
1、样式避免冲突
在style标签上加scoped，只作用在本组件，其他导入的组件不影响（组件也包含全局组件、局部组件，每个页面都含有的头部或者尾部都可以做成组件）
——组件 ：组件中，data是个函数写发data（），要带上return；不再是data：
这样的好处是保证每个组件拿到的都是独立的data
2、组件通信
父与子通信：在父的data中把值定义,在子中用props接收
子与父通信:子中用$emit赋值,
通过事件监听,调用方法改变父主件中子的渲染
prop可以传多个数据,使子主件多次复用渲染
注:
1三元运算: istrue ? '是' : '不是'
2将数组['1','2','3']变成字符串 用.join(' '),如下图兴趣爱好处
3. props的传参类型校验,避免传参过去都会渲染,书写形式:由数组[ ]改成对象的写法{ }的形式
3.1 props非空校验、默认值、自定义校验方法书写
`null` 和 `undefined` 会通过任何类型验证
实例展示:
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
data数据改动:
监听事件:
1回车监听:@keyup.enter
非空判断:
if(this.name.trim() === ' '){
alert('不能为空')
return
}
给list添加值:
unshift:用于在数组的开头添加一个或多个元素，并返回新的数组
原 list:[
{id:1,name:"打篮球"},
{id:2,name:"游泳"}
]
添加:this.list.unshift({
id:+new Date(),
name:跑步
})
删除:filter
Del(id){
this.list.filter(item =>item.id != id)
}
语句:v-开头,v-bind动态赋值其简写 : ,v-click简写 @ ,还有v-model 是和data里面的值双向绑定同步更改,v-for遍历(item,index) in list key=index;v-if ===为true则展示, v-show =为true则展示
事件监听:
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
行内样式:
逗号前面的errorClass 样式是始终存在的，第二个样式用三元运算符判断isActive 是否添加,当为 true 时添加 activeClass 类：
<div v-bind:class="[errorClass ,isActive ? activeClass : ' ']"></div>
为true则与下面同义:
<div v-bind:class="[activeClass, errorClass]"></div>
或
<div class="active text-danger"></div>
输入框input:
--默认显示提示文字
<input v-model="message" placeholder="编辑我……">
文本输入框textarea:
--默认显示提示文字
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
两个输入框的区别:input大小设定就固定,textarea可以根据文本多少任意变换
复选框:
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="这是选runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="这是选google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="这是选taobao">taobao</label>
<br>:等于回车、换行
下拉选择框:
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
注:如果要自动过滤用户输入的首尾空格，可以添加 trim修饰符到 v-model 上过滤输入
--------<input v-model.trim="msg">
只能输入数字
-------<input v-model.number="age" type="number">
输入框自动聚焦:
input.focus()
自定义v- 类的指令:
①设置div的颜色及内容,定义的一个v-runoob
------------- <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
②注册指令,并用方法赋予它含义
----------------Vue.directive('runoob', function (el, binding) {
// 简写方式设置文本及背景颜色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
})
数据持久化（存储在本地）：
页面进入时，也优先调用本地数据list
具体代码--->
list:JSON.parse(localStorage.getItem('list')) || 写好的数组数据
开启深度监听,储存每个变化的list数值-->
watch:{
list:{
deep:true,
handler(newValue){
localStorage.setItem('list',JSON.stringify(newValue))
}}}
非父子通信:
①event bus
②爷孙通信--跨级通信
爷中数据放在provide,孙在inject中直取; userInfo复杂类型写成对象{ }的方式,则可以在类似注册点击事件后,数据进行更新传递下去
v-model原理(如何作用于组件通信)
:value和@input=$event.target.value (数据变化就传过来) 等价于v-model(监听数据变化,视图变)
表单类组件封装(v-model的拆解):
表单改变了就触发方法用@change
表单中触发的方法提醒父组件用this.$emit('事件名' , e.target.value) ; e是形参 , 只要不是在元素行内都用e不需要用$event接收数据的变化
注:子组件获取变化的数据是e.target.value; 父组件获取到子传递过来的是直接$event
用v-model简化代码:
v-model就相当于:value和@input
子传父this.$emit('input',....) 子监听是:value='value',props:{接收的值名称也是value}
.sync修饰符:
注:
子中事件名是 'update:visible' 是固定的, 如this.$emit('update:visible',....)
父中.sync前面的是visible则子中props中的接收数据名也是visible
注:
若props接收的是value还是推荐用v-model
ref和$refs:
使用原因--->
例如,查找dom中表数据用echarts.init(domcument.querySelector('.box'))
而,querySelector查找范围是整个页面,不够精准
主要用法:调用组件,拿到其中的方法
给div定义ref名字,在其他的地方用this.$ref.名字
~this.$nextTick():页面dom渲染完毕再执行的代码
~写在运行完的方法后---- setTimeout( ( )=>{实现功能},1000)
要想实现点击按键后,页面输入框出现后就自动聚焦-->
在@click方法中后面加上this.$nextTick(() =>this.$ref.fangfa.focus);
有ref的绑定才能使精确要需要的地方实现功能.
全局注册
---在main.js中注册
局部注册
---在对应.vue文件中注册
el是指令所绑定的元素,
inserted(el){ el.focus( ) } :生命周期钩子
表示: 当令所绑定的元素添加到页面之后,会调用下面的方法
动态变化取值:binding.value就是v-' '=...的值
update(el,binding) 钩子函数:
binding中的value变,则会调用update下面的方法
自定义指令v-loading:
(内有重点概念内容)
页面在加载过程中出现动画--->
1.伪元素:在样式后面加 :before ,则可以直接控制逻辑添加或直接移除
.add为添加 .remove为移除
el.classList( ' ' )是把当前类的所有样式都加上这个新的样式
2.background:背景样式,可以在里面添加颜色、图片地址、no-repeat不重复拼图、center居中位置
3.div中class是可以添加多种如-->class="box box2 box3"
4.父元素相对定位relative,子元素绝对定位position:absolute
请求axios步骤:
1.安装axios:yarn add axios
2.async created(){
const res = await axios.get(' 地址') //get请求方式
}
默认插槽:
在组件中有内容需要自定义,其他都是复用组件用到插槽
在组件中--->
要变化的地方用<slot></slot>占位,
若在<slot>中输入内容则当成默认内容
在引入组件的页面中--->
直接写上: <组件> 要输的内容</组件>
具名插槽:
默认插槽只能定制一个位置,而升级版就可以多个位置同时定制
使用方法:
每个slot定义名字 ,应用处<template>包裹v-slot 简写成 #名字
实例代码:
作用域插槽:
