vue3开发基础流程（前21）

前八步，创建vue项目

1.安装node.js环境 官网搜
2.在cmd里面找地方安装脚手架vue -cli 命令问ai vue3的脚手架命令
3.创建vue项目 相关的cmd命令 ai
4.去vscode里面打开你的项目文件
5.看vue3开发文档

如果全部在一个页面使用那就去用组合是api，如果低复杂，就去选项式api；先从选项式做起吧；个人的简单点

6.进入项目，运行项目 包括你再后期vs里面终端里面运行项目也是npm run serve

7.出来地址，本机的，点进去就创建完毕了
这里少了一个命令 npm install

8.去vscode里面打开你的项目文件

这是目录结构介绍；
注意，也可以建立好文件之后，在vscode的终端创建vue项目；有些东西报错或者敲了没有很有可能是没有下载依赖；还有你往上用的组件；

9.模板字符串

在app.vue里面写文件 模板字符串，js里面写好的方法，直接可以文本插值在html里面，但是要求js里面一定要有返回值；在上面输出变量之后；可以在{{}}里面进行加减，三元运算符等操作 js的格式就是这种； 这个模板语法在后面基本上就是这么写；
而且上面绑定值，下面的方法返回，上面绑定的值必须是单行就能解决的语句，比如三元运算符啥的，if else就不行；可以调方法，也是单行，但是不能在这命名变量

.

10绑定html

但是双括号里面只能是文本，你需要用v-html绑定html的文件 类似于这种的绑定还有很多

在 JavaScript 模块系统中，export 用于对外暴露模块内容，default 表示默认导出。在 Vue 单文件组件里，一个组件通常只有一个默认导出，方便其他组件或模块引入该组件，类似于main方法data 选项
功能：data 是 Vue 组件的一个选项，用于定义组件的内部数据。组件渲染和交互依赖这些数据，数据变化时，Vue 会自动响应式更新相关 DOM 。里面的return是方法的返回值，返回的东西可以是文本或者对象都行，前面是属性名字；：“这里面是属性值”，比如文本直接用文本插值，在模板里面{{属性名}}输出就行 html文件就在模板里面v-html=“属性名”就行，别的也类似；
return返回值：是为保证每个组件实例都有独立的数据副本，避免多个实例间数据相互干扰 。
使用场景：在模板中可直接使用这些数据。比如在 中，可通过 {{ msg }} 显示 msg 的值；
这种结构是 Vue 选项式 API 的基础部分，通过定义组件数据，为后续组件的逻辑编写、渲染和交互提供了数据支撑 。
前面也提到选项式api基本上用于个人开发；

11.属性绑定

这里想要绑定选择器的属性，用到v-bind 其实相当于绑定样式
底下是你定义的东西，想要把属性放入到class或者 id选择器里面，那就需要在id 或者class里面用到v-bind:class=““或者 v-bind:id=”” 文本是双括号，属性是通过v-bind这种 绑好一个属性才方便去做样式 注意你绑定的是属性不是值；是前面的蓝色部分；值是在下面写样式
v-bind现在可以直接简写成:

例子，一个点击样式；写了个按钮标签；然后设置disable那就不可以点击，但是有时候用户操作会让按钮点击状态变化怎么办？让disabled的值在底下设置成false不可点击，true可以点击；设置布尔类型的值；

注意大小写不能乱；每一个单词开头都得是大写

注意写在v-bind后面的基本上都是css 里面定义好的选择器，比如你是class还是id还是显示啥的都是原来的，你不能随意命名，只有在底下export default 导出默认这个里面可以随意命名，但也要按驼峰或者小驼峰；

动态绑定多个值
想多个那肯定首先想到对象，在导出默认里面写好一个对象咱们绑定返回这个对象就行
前面绑定的时候要写个class=什么这个是吧咱们写好的属性绑定到html里面的class属性上；但是对象就可以直接用=号，因为你里面写好了class或者是id：属性值，意思就是吧对象绑定到div，然后里面的值绑定到class或者id，自动对应；

12.条件渲染

条件渲染一共就4个指令，主要是命令他想渲染就渲染，设置值，做到好控制，比如用户只在主页咱们就不渲染别的页面不然麻烦；
比如v-if 返回值为真才渲染

与前面一样，而且这个基本上只用到布尔，所以你也不用在前面再写一个什么class=什么的他是直接就渲染文本；
他和v-else配套使用就和if else一样；是就渲染，否则走else

那当然就有多重分支了，if elseif else

这里就是如果值为A就渲染A，值为B就渲染B，C就渲染C ifelse是要判断的，所以你要给属性的人家去判断属性值，所以是v-if = " 属性===‘’ "别忘了js里面是需要全等的哦类型和数据都得等

两者区别
除开v-if v-show也可以条件渲染 但是他只能布尔true 和false 这两玩意区别就是if他一进来看到假直接不渲染了，是添加和删除操作，真才走条件；但是show他不管真假他都渲染，值已经加载进来了随时切换，所以可以频繁切换，非常方便；但是不咋频繁条件定死了就用if else比较好

其实很多东西就是一个输出的语法的转变，和底层语法很近

13.列表渲染

v-for就for循环遍历数组；item in items 相当于for的强循环int i=0 in array 没啥区别；底下写你的数组就行；然后数组用你的数组名字，后面{{}}里面是你要渲染的东西你需要吧数组放进去数组的每一个值，所以是{{item}}相当于输出。

{{ item }}

index是索引下标，意思就是你给了两个参数，item是每个属性值，index是索引下标 都再names数组里面 设置key值是因为如果数据顺序改变的话，那v-for又得重新渲染，他没那么智能不能换顺序，所以我们设置key值给每个元素添加一个索引012345这种相当于给他个编号，现在唯一的索引是index索引我们就设置成index，但是key不能是死的，所以我们用v-bind动态绑定他所有前面有个冒号；绑定好直接换编号顺序带着就换了，这样就能换顺序了，不用再渲染一遍了；我们根据不同情况设置key值，比如遍历数组对象有id那就用id，找到这个唯一值就好； 输出数组每个元素 item可以改名的哈，就跟i一样就是个变量 这个in和of也是没差别 这里result代表 result： 用于数据的存储和传递，方便在程序的不同部分访问和处理这些数据。可以作为函数的参数传入，也可以从函数中返回（但它本身不是返回操作的关键元素），还可以用于在模块之间共享数据等。 它的数据类型取决于具体的定义，在这给出的示例中是一个包含对象的数组，但也可以是其他数据类型，如普通对象、字符串、数字等。 v-for不仅可以遍历数组，也可以遍历对象

14监听事件

v-on监听事件 用v-on语句来监听dom的事件
分内联处理和方法处理事件
内联处理

假设上边要写累加事件，点击按钮就要进行加一，我们给按钮设置点击事件；用v-on:click这样绑定好点击事件，点击就触发什么呢="触发count++"然后我们在下边设置一个count的初始值；就可以实现累加了；
这里可以看到可以监听非常多的事件，感觉类似绑定方法

这里也有简写v-on:这个可以简写成@非常方便 内联的这种用的少，工作里面常用的就是方法处理事件

方法处理事件
与data同级的底下写methons:{}所有的方法都写这里，里面写函数 注意函数名小驼峰式，不然不认，然后方法里面用到this去点到访问data的里面的属性值，在return里面this可以点到每一个不同方法里面的值，这类似于类了，给类创建对象去访问这个类里面的元素，由此这个类里面所有的方法用这个类对象都能互通访问元素了；
在文本里面直接设置等于事件就行了，他不仅可以加还可以写很多功能；

<template>
  <p>事件监听</p>
  <button v-on:click= "count++">次数{{ count }}</button>
  <button @click= "addCount">点击{{ count1 }}</button>//就方法调用
</template>

<script>
export default {
  data(){
    return{
      count:0,
      count1:0,
    }
  },
  methods: {//方法都写这
        addCount(){
          this.count1++//用this对象去访问data里面的元素，this就是这个类的对象，个人理解
        }
      },
}

15.事件传参

这个没理解，我js这块还没学
传参调用

给地下设置形参，里面进行操作，加减或者输出啥的都行，上面给实参传过来在方法的括号里面加‘’就行，跟平常调用也没什么区别；

练习

打印列表渲染之后，我们点击列表中某个选项可以出来对应的别的东西；比如点击商品出来详细信息；
就是一个按钮或者什么标签里面，咱们写上事件，先写好点击事件，绑定完毕，设置好方法和确定点击后输出什么，传参完毕；然后设置一个数组，我们去用v-for遍历他，最后咱们在标签里面输出数组就好

传参获取event数据对象

事件修饰符

这个事件对象我有点没理解；
因为原来的时候这个东西是咱们设置了点击事件之后的操作，我们自己等于一个方法，在底下写一个方法出来去实现点击事件之后的操作，无论是跳转还是输出啥的；但是呢说到用一个event对象；这个对象可以调很多方法，比如阻止默认事件；点击了不让跳转；传参就是一个e，然后e.可以点到一个叫preventDefault()方法这个方法是点了阻止默认的动态发展，比如a标签跳转页面啥的；但是这个事件对象是什么，event这个东西我有点懵；是js里面的可能?我暂时理解成他就是一个所有事件类的对象；用这个可以访问到所有事件，就跟this一样；

然后说是为了简便也不用写这个方法了，直接click.就能访问到事件；用.prevent则可，就不用等于一个方法了，行吧，就当强加定义了
这个e可以点到很多方法，阻止默认事件是一个，还有阻止事件冒泡，只触发子元素，不触发父元素

event事件对象.方法

你上面写好点击事件调个方法，下面定义方法的时候每次传参可以传个e进来；e.各种事件，比如e.prevent阻止默认事件，e.stop阻止事件冒泡，可以阻止点击div或者阻止点击p，还有别的事件都可以调，为了省事，你也可以不在下面写方法，直接在上面的click后面跟着.就完了；直接@click.事件 但是这样点击完毕之后没有后续输出，所以想有后续输出的话；我们可能还是需要方法；

15.数组变化侦测

数组不是死的；他是不断变化的
我们需要根据很多不同的变化来实时更新数组； 也就是数组的增删改查
这是原来的旧数组；这几个方法是在旧数组里面进行增删改

变更方法有这几种；
这是新数组

使用方式

先正常遍历数组；然后在方法里面写 给数组赋值；也就是更新数组，赋什么呢？数组去点到方法；调用不同方法去赋值；
当前点到的方法是concat,英文翻译是合并数组，这个就是上一个新数组了；里面给你的添加名，你想添加数据就设置一个点击页面；然后绑定这个方法，你写了方法得调；
.push就不一样，这个是改变原数组进行数据更新，这种不需要赋值了，因为本来就存于原数组；刚刚的要赋值是因为，他本来就在新数组，传给页面更新的也是新数组；所以赋值了才显

<template>
  <p>这里是数组更新</p>
  <button @click="arrayAdd">点击添加数组</button>
  <p v-for="(i ,index) in name" :key="index">{{ i }}</p>

  <button @click="arrayAdd2">合并数组</button>
  <h1>数组1</h1>
  <p v-for="(i , index) in num1" :key="index">{{i}}</p>
  <h1>数组2</h1>
  <p v-for="(i , index) in num2" :key="index">{{i}}</p>
</template>
<script>
export default {
  data(){
    return{
      name:["张三","李四","王五"],
      num1:['1','2','3'],
      num2:['4','5','6']
    }
  },
  methods:{
    arrayAdd(){
      // this.name.push("ding")
      this.name=this.name.concat(["丁6"])
      
    },
    arrayAdd2(){
      // this.name.push("ding")
      this.num1=this.num1.concat(this.num2) //更新num1数组，=在num1数组里面插入num2数组
      
    }
  }
}

</script>

16.计算属性

就是将模板语法里面的复杂属性给到底下的方法里面去，和data同级的叫computed 写在里面；在模板语法里面直接{{}}里面写方法就行 其实和方法就一样的，只是计算属性在页面渲染的时候不用加括号；但是方法是要加的

两者区别

计算属性只计算一次，但是方法每次都要计算，你调一次他就算一次，但是可以跟上更新，但是如果值他就不变，那你还是计算属性渲染更快，不管怎么调用；他都只计算了一次； 底层思路是和v-if v-show一样的，他们就都是为了方便；

17.class动态绑定

以前的class绑定不动态，咱们也可以给他设置true flase值

就是对class的一种增强，想显示就显示不想就不想；
就是你原来在data里面写好属性和值，上面本来只要属性就行了，值你在下面style里面设置，原来的绑定是这样，现在的动态是，你先写好一个属性和值，但是这个只用来说渲染不渲染，然后上面你需要定义好class的值：你是否渲染的属性；然后下面在样式里面写你的class的值，实现动态选择渲染不渲染；还有更快的就是直接绑定一个对象；上面class直接等于对象就行了；然后你在对象里面设置是否输出，然后去设置属性；在样式里面设置好属性，具体代码如下

<template>
  <p :class="{ 'c1' : weather }">绑定一个class属性</p>
  <p :class="classObject">绑定多个class属性对象</p>
</template>

<script>

export default {
  data(){
    return{
      weather:true,
      classObject:{
        c2:true,
        c3:true
      }

    }
  }
}
</script>
<style>
.c1{
  color: antiquewhite;
}
.c2{
  color: brown;
}
.c3{
  text-align: center;
}
</style>

他可以一次绑定多个样式的；也可以直接绑定数组，数组里面有好几个元素，每个元素都是一个样式；当然，也可以绑对象，对象里面有多个样式；无论如何，遇到多个样式或者动态绑定， 可以第一时间想到绑定数组或者绑定对象；

18.style样式绑定

直接在文本中绑定样式，或者给文本一个对象绑定样式，都行，也可以设置值来控制是否输出，原理和class差不多，也可以绑定数组，对象，数组对象；都行；所以呢，我建议还是都绑定对象比较好；因为几个在一块简单；就直接绑定了多个样式

19.侦听器

就是来检测响应式数据的；比如你写在js里面的代码，你可以随时改，改了之后是直接传给文本的
但是本来在文本里面的东西，他改不了，比如什么h标签什么，这些都改不了；这些都是死的，咱们监听不到；
所以在js里面写完，渲染到dom的数据我们称之为响应式数据；
而我们的侦听器呢，就是可以一直观察咱们的数据；然后获取到老值和新值

这个例子里面；我们先上传一个数据，我们想修改，写了个修改的方法；然后给一个按钮这个按钮绑定点击事件，再绑定这个方法；咱们就能做到动态的更新数据了；
然后侦听器就写在watch里面与他们是同级，然后里面的函数名字需要与你侦听的属性名字是一致才行，他才能定位到去侦听哪一个；

<template>
  <p :style="{color:a}">这里是style样式绑定</p>
  <p>这里是侦听器</p>
  <p>{{ msg }}</p>
  <button @click="updateMsg">修改数据</button>
</template>

<script>

export default {
  data(){
    return{
      a:"red",
      msg:"hello"
    }
  },
  methods:{
    updateMsg(){
       this.msg = "wly"
    },
  },
  watch:{
    msg(newValue,oldValue){
      console.log(newValue,oldValue)
    }
  }
}


</script>

20.表单输入绑定

就是前端输入表单的时候你得不停的去获取用户输入的信息；在js要去搞事件监听，麻烦，在vue里面其实就直接一个指令就完成了；v-model
表单是前端的必需品，无论搜索还是注册啥的都需要弄表单；只要有用户输入，就离不开表单
input是输入框；然后你要设计类型；再用v-model绑定数据实时绑定到js，你输入什么就有什么删掉什么什么就没有

你也可以不打印message
这个功能非常强大

基本上，文本，选择，还是别的全部都能绑定上 就比如这个复选框，绑定你的选择，用一个laber输出
但是这个有个缺点，就是你输入完了之后他一直实时响应，你输啥删啥就在下边，但是这样就一直在获取了，很多用户输入的时候反反复复的，那就获取好多次，不方便，我们可以用.lazy的方法，让我们最终输入好，按下回车键之后，再完全获取；如果跳转了，那可以去阻止默认事件

注意：其实很多时候写前端的思路就是给个按钮，按钮绑定方法，比如你看什么什么网页都是如此，输入什么东西，然后保存啥的，就比如这个csdn的markdown编辑器也是，想不通的时候就输按钮，很多东西最好是js传值可以实时修改啥的；

这个是绑定表单输入的时候再v-model后面.的方法；比如lazy number是只接受数字类型；trim是去除前后空格

21.模板引用 访问dom

其实我们现在学过的都是为了对以前的东西进行实时操作和改变，变成传值的方式；所以再vue中基本不咋需要操作dom了，dom就只静态的内些h5文件等，需要操作的时候基本上就是东西不太难，但是我们也需要直接访问p 或者div标签

可以使用这个ref=“”

总结比如获取用户输入的元素的dom值，你input里面写一个ref，等于什么自己编辑；然后给一个按钮，按钮里面写获取，绑定点击事件，然后绑定方法，方法里面就输出获取的值就行，输出到控制台还是页面还是提示框都行；或者更改值，你可以再点到innerHTML方法里面去；记得是.$ref.你自己命名的东西；
获取值，v-model也可以做到；