我的VUE3逆袭笔记~（结合实例学习就不会无聊）
VUE3的学习笔记【从啥也不会到起码看得明白】
枯燥的开头，勇敢迈出第一步：
main.js是我们项目的入口文件不要写太多东西
现在用的是vite式的！！！
【
创建一个Vue应用前提已经安装高版本的Node.js
创建的项目将使用基于Vite的构建设置，并允许使用Vue的单文件组件SFC
命令行中运行npm init vue@latest
这一指令将会安装并执行create-vue，vue官方的项目脚手架工具。
出现一些选项不确定是否开启某个功能的话直接按下一系列回车或选择No
项目被创建之后
cd 项目名称
npm install
npm run dev
现在成功创建组合式API和
导航栏那里的App.vue就是显示用的是组件，现在还没开始学setup那个组合组件部分
【看到这里还是不理解的话也没事，继续往下】
类似于export default这是声明式渲染
与methods方法、mounted声明周期函数并列关系
proxy：代理。可以理解为一个拦截器，当我们操作对象时它会对对象进行拦截，从而进行检测和改写。它存在13中捕获器类型，常用的有has（），get(),set(),deleteProperty(),construt()和apply()主要用于函数
组件实例property：所有的无论如何定义都可以在组件模板被访问
采用mustache语法就是{{}双大括号
Massage:{{uname}}
mustache标签会被替代为组件中定义的值
methods给vue定义方法
{{num}}
{{uname}}
{{uname}}
{{msg}}
v-html,让内容以html的形式实现
v-bind:动态的绑定属性内容
v-bind的绑定
迄今为止，在我们的模板中，我们一直都只绑定简单的property键值，但实际上对于所有数据的绑定，vue都提供了完整的js表达式支持
同样的位置加入一个改变颜色的按钮
意味着对于一些简单事件不需要重新定义的时候就可以用上面的方法
使用js表达式
{{num+1}}
实现张三的反转，先分隔为字符然后reverse实现数组的逆序输出
{{uname.split(‘’).reverse().join(‘’)}}
v-bind绑定
指令（Directives）是带有v-作为前缀的特殊指令attribute，该指令的预期值是单个JS表达s式。v-for和v-on是例外情况。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
一些指令能够接受参数，在其后以：表示
v-on:用于监听DOM事件可直接用@代替
同样的还有v-bind等价于：就是这个冒号
下面介绍[动态内容]
动态参数：
v-bind绑定
动态属性：
动态事件：
背景：
attributeName：’id’
mouseEvent:”click”
因为使用到了classs所以添加.引导的类选择器
.id{
font-size:50px;
}
以上模板语法讲解的差不多了
下面是Data property和方法
组件的data是一个函数，Vue会在创建新组件的过程中调用此函数，它应该返回一个对象，然后Vue会通过响应性系统将其包裹起来，并以￥data的形式存储在组件中，为方便起见，该对象的任何顶级property也会直接通过组件实例暴露出来。
这些实例property仅在首次创建时被添加，所以要在data函数中定义，必要是也就是还没赋值时会使用null,undefind或其他占位值
直接将不包含在data中的新property添加到组件实例是可行的，但由于property不在背后响应式$data对象内，所以Vue的响应系统不会自动跟踪它
Vue使用$前缀通过组件实例暴露自己的内置API.它还为内部的property保留_前缀，当避免使用这两个字符开头的顶级dataproperty名称。
方法
我们使用methods选项向组件实例添加方法，它应该是一个包含所需方法的对象：
Vue自动为它绑定this，以便它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的this指向。在定义methods时避免使用箭头指向
和其他所有的property一样可以在组件中被访问，在模板中，通常被当做事件监听使用
对于任何包含响应式数据的复杂逻辑，应当使用计算属性：
computed:{
}
它拥有一个缓存，只要依赖值不变就不会重新经计算
比如说1+3
要输出三次结果采取调用方法的形式就需要计算三次但是它就一次，缓存以提高性能
computed:{
reverseMsg:function(){
console.log(“计算属性”);
retrun this,message,split(‘’),reverse().join(“”)
}
},
methods:{
reverseMsg:function(){
console.log(“计算属性”);
retrun this,message,split(‘’),reverse().join(“”)
}
},
这里是style的多种使用方式：
<script>
export default {
DataTransfer() {
return {
activeColor:'red',
fontSize:'50px',
bgColor:'pink',
//以上是直接在标签里使用时定义的属性值
styleObj: {
color:'red',
fontSize:'50px',
'background-color':'pink' ,
}
};
},
};
script>
<template>
<div>
<p style="color:red">Hellop>
<p :style="styleObj">hellop>
<p :style="[styleObj,{border:'5px solid blue'}]">p>
div>
template>
<style>
style>
下面是条件渲染：（v-if,v-show）
<script>
export default {
data(){
return{
age:20,
sex:'F',
isShow:true
}
}
};
script>
<template>
<div>
<p v-if="true">我是成年人了p>
<p v-if="false">我还是个小朋友p>
<p v-if="age>18">要对自己负责啦p>
<p v-else-if="age==18">刚满18岁p>
<p v-else>还可以耍赖p>
<template v-if="age>=18">
<p>你好p>
<p>成年人总是有很多烦恼只能自己消化p>
<p>今天也要加油努力赚钱买房p>
template>
<p v-show="sex=='F'">女生p>
<P v-show="sex=='M'">男生P>
div>
template>
<h2 v-if="isShow">标题内容1之v-ifh2>
<h2 v-show="!isShow">标题内容2之v-showh2>
<button @click="isShow=!isShow">改变isShowbutton>
<style>
style>
列表渲染v-for，如果想要把一个数组中的元素全部渲染出去是要用到for循环：
<script>
export default {
data(){
return{
person:['张三','李四','王二'],
personObj:{name:'张三',age:18,sex:'男'}
};
},
//写方法添加一个人
methods:{
addPreson:function(){
this.person.unshift('赵六')
}
}
};
script>
<template>
<ul>
<li v-for="item in person" :key="item">{{item}}li>
ul>
<ul>
<li v-for="(item,index) in person" :key="index">{{item}}-->{{index}}li>
ul>
<ul>
<li v-for="(item,key,index) in personObj" :key="index">{{item}}-->{{key}}-->{{index}}li>
ul>
<ul>
<li v-for="item in person" :key="item"><input type="checkbox" name="" id="">li>
ul>
<button @click="addPreson">增加button>
template>
<style>
style>
【维护状态：为了给Vue一个提示，使它能够跟踪每个节点的身份
从而重用和重新排序现有的元素故需要为每项提供一个唯一的key值】
*比如在没写入key有红色下划线情况下运行，点击增加按钮之前我们先选中了张三，然后点击增加导致首部增加了赵六但是我们选的人变成了赵六，意味着实际上只是选中它的索引值并没有实时根究
数组的更新操作：
<script>
import { reverse, sortBy } from 'lodash';
export default {
data(){
return{
list:[1,2,3,4,6,5],
};
},
methods:{
changeList:function(){
//当然可以像通过索引值去改变数组 this.list[5]=7这在vue2中是做不到的
// push()数组末尾添加元素，可以一个以上
//this.list.push(7,8,9)
// pop()删除数组末尾的元素
shift();//一样的格式删除数组的第一位元素
unshift();//从数组的首尾添加元素，可以一个以上（0,9,9)
splice();//常用删除，插入，替换都OK，3个参数
//（删除对象的下标，要删除的个数默认全部）
//(插入对象的下标，传入0，接上要插入的所有元素)eg：插入789在1 的位置this.list.splice(1,0,7,8,9)
//(替换对象开始的下标，替换的个数，替换为些啥)（1,3,7,8,9)也可以理解为删除了3个后插入7,8,9
sort();//排序
reverse();//字符串转数组然后翻转
},
},
};
script>
<template>
<div>
<ul>
<li v-for="item in list" :key="item">{{item}}li>
ul>
<botton @click="changeList">改变数组botton>
div>
template>
<style>
style>
事假处理：
【监听事件：使用v-on即@符号来监听DOM事件并在触发事件时执行一些JavaScript.用法为v-on:click=”methodsName”或使用快捷键方式@click=”methodsName”】
<script>
import { reverse, sortBy } from 'lodash';
export default {
data(){
return{
counter:0
};
},
methods:{
addCounter(){
this.counter++
}
},
};
script>
<h2 @click="counter++">{{counter}}h2>
<h2 @click="addCounter">{{counter}}h2>
methods:{
addCounter(number){
this.counter+=number
}
},
<h2 @click="addCounter(5)">{{counter}}h2>
-------------------------------------------------------------
methods:{
addCounter(e){
this.counter++;
console.log(e)
}
},
};
script>
<template>
<div>
<h2 @click="addCounter">{{counter}}h2>
methods:{
addCounter(number,e){
this.counter+=number;
console.log(e)
}
},
};
script>
<template>
<div>
<h2 @click="addCounter(5,$event)">{{counter}}h2>
事件修饰符：
【在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。故v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的】
methods:{
addCounter(number,e){
this.counter+=number;
console.log(e)
},
addAge(){
this.age++
},
divClick:function(){
console.log(‘父元素展示’);
}
btnClick:function(){
console.log(‘子元素展示’);
}
”btnClick”>按钮 在methods中定义： submitClick:{ console.log(‘提交数据成功’）; } ””>
onceClick:function(){ console.log(‘只会触发一次’); } ”onceClick”>这个魔法只能用一次 按键修饰符： <script> import { reverse, sortBy } from 'lodash'; export default { data(){ return{ }; }, methods:{ keyUp:function(){ console.log('键盘被按下了，数据提交成功'); } }, }; script> <template> <div>
<input type="text" @keyup="keyUp">
<input type="text" @keyup.enter="keyUp"> div> template> 表单输入绑定： 【使用v-modle指令在表单,
”submit” value=”提交” @click.prevent=”submitClick”>