04-Vue的学习

vue初体验

vue3的引入

方法1：CDN服务器的引入

方法2：下载和引用

计数器案例

原生的js编写

		 const counterEl =document.querySelector(".counter");
		 const increaseEl = document.querySelector(".increase");
		 const decreaseEl = document.querySelector(".decrease");
		 let counter=100;
		 counterEl.innerHTML=counter;
		 increaseEl.addEventListener('click',() => {
		   counter += 1;
		   counterEl.innerHTML = counter;
		 })
		 decreaseEl.addEventListener('click',()=>{
		   counter -= 1;
		   counterEl.innerHTML = counter;
		 })

用Vue

    Vue.createApp({
      template:`
        <h2>{{message}}</h2>
        <div>{{counter}}</div>
        <button @click="increase">+1</button>
        <button @click="decrease">-1</button>
      `,
      data:function(){
        return{
          message:"我要考研高分上岸！",
          counter:100
        }
      },
      // 定义各种各样的方法
      methods:{
      //methods中不能使用箭头函数，因为this的指向会出错。
        increase(){
          this.counter++;
          console.log("+1了");
        },
        decrease(){
          this.counter--
          console.log("-1了");
        }
      }
    }).mount("#app")

声明式编程和命令式编程

原生js属于命令式编程，vue属于声明式编程

template的写法

Vue源码

1. 打开GitHub官网，搜索“vue-next”（vue3）
2. 到vue3源码下载的网页，选tag中稳定的版本，复制git上的地址，打开cmd，cd到放源码的文件夹，再git clone 地址。
   可能出现的错误：没有安装git
3. 在vscode编译器中打开下载源码的文件夹
   先按照步骤打开终端因为是用的git下载的，所以不用额外操作。
4. 在控制端执行yarn dev，先在上面打开的控制台安装yarn： npm install yarn -g，只用安装一次。
   可能出现的错误：无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

this

写成一个箭头函数时，this指向的是window。

在箭头函数中，是不绑定this。

前端面试之彻底搞懂this指向

VSCode代码片段

第一步，复制自己需要生成代码片段的代码；
第二步，在该网站中生成代码片段；
第三步，在VSCode中配置代码片段；

vue3的模板语法

vue3 的基本指令

Mustache大括号语法

    <!-- 1.mustache的基本使用 -->
    <h2>{{message}} -- {{message}}</h2>
    <!-- 2.是一个表达式 -->
    <h2>{{counter*10}}</h2>
    <h2>{{message.split(" ").reverse().join(" ")}}</h2>
    <!-- 3.也可以调用函数 -->
    <h2>{{getReverseMessage()}}</h2>
    <!-- 4.三元运算符 -->
    <h2>{{isShow ? "哈哈哈" : "呵呵呵"}}</h2>
    <button @click="toggle">切换</button>
    <!-- 错误用法 -->
    <!--var name = "abc" 赋值语句  -->
    <h2>{{var name = "abc"}}</h2>
    <h2>{{if(isShow) {return "哈哈哈"}}}</h2>

基本指令 v-once

n v-once用于指定元素或者组件只渲染一次：当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；

基本指令 v-text

    <h1 v-text="message"></h1>
    <!-- 等价于 -->
    <h1>{{message}}</h1>

基本指令 v-html

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

基本指令 v-pre

不解析大括号的语法，原来什么样子就什么样子。

<h1 v-pre>{{message}}</h1>

网页显示为：{{message}}

基本指令 v-cloak

v-bind和v-on

v-bind

v-bind的基本使用

v-bind绑定class的对象语法

    <h1 :class="className">{{message}}</h1>
    <!-- 对象语法 {'active':boolean}，对象中可以写多个-->
    <h2 :class="{'active':true,'isshow':false,choose:true}">{{message}}</h2>
    <!-- 默认的class和动态class结合 -->
    <h2 class="abc cbd" :class="{'active':true,'isshow':false,choose:true}">{{message}}</h2>
    <!-- 将对象放到一个单独的属性中 -->
    <h2 class="abc cbd" :class="classObj">{{message}}</h2>
    <!-- 将放回对象放到一个methods（computed）方法中 -->
    <h2 class="abc cbd" :class="getClassObj()">{{message}} - 今天会更好！</h2>

v-bind绑定class的数组语法

    <!-- 数组写法，可写多个 -->
    <h1  :class="['abc','adt']">{{message}}</h1>
    <!-- 也可以写三木运算 -->
    <h1  :class="['abc',isActive ? 'active' :'']">{{message}}</h1>
    <!-- 数组中还可以写对象 -->
    <h1  :class="['abc',{active:isActive}]">{{message}}</h1>

v-bind绑定style的对象语法

注意：要么’font-size’要么fontSize

v-bind动态绑定属性名称

<h2 :[name]="value">哈哈哈</h2>
<!--data中-->
name:"abc",
value:"bang"

v-bind直接绑定一个对象

<h1 v-bind="info">{{message}}</h1>
<!--data中-->
info:{
  name:"qiu",
  age:22,
  height:1.59
}

v-on

v-on的基本使用

<h1 v-on:click="hClick">{{message}}</h1>
<!--methods中-->
hClick(){
  console.log("123");
}
<!-- 语法糖 -->
<h1 @click="hClick">{{message}}</h1>
<!-- 绑定一个表达式 -->
    <h2 @click="counter++">{{counter}}</h2>

v-on参数传递

<!-- 默认会有一个event，用的时候可以取 -->
<button @click="btnClick1">一寸光阴一寸金</button>
<!-- $event可以获取到时间发生时的事件对象 ，这时还可以传入其他参数-->
<button @click="btnClick2($event,'qiu',22)">一寸光阴一寸金</button>

v-on的修饰符

用stop来阻止冒泡

<h1 @click="hClick">
 <!-- 正常情况下会冒泡，也就是点击子元素时也会触动父元素的点击事件 -->
 <!-- <span v-on:click="spanClick">{{message}}</span> -->
 <!-- 用stop阻止冒泡 -->
 <span v-on:click.stop="spanClick">{{message}}</span>
</h1>

用enter来控制只有按enter键时才反映，还可以拿到输入框的值

<!-- 正常情况下，键入就会反映 -->
<input v-on:keyup="enterKeyUp" type="text">
<!-- 用enter来控制只有按enter键时才反映 -->
<input v-on:keyup.enter="enterKeyUp" type="text">

// 还可以拿到输入框的值
enterKeyUp(event){
  console.log("输入完毕",event.target.value)
}

条件渲染

v-if、v-else-if、v-else

提前使用到了v-model双向绑定

<input type="text" v-model="score">
<h1 v-if="score > 90">优秀</h1>
<h1 v-else-if="score > 60">良好</h1>
<h1 v-else>不及格</h1>

v-if与template结合使用

若将template换成div，就会莫名多一层div

 <template v-if="isShow">
   <h2>哈哈哈</h2>
   <h2>哈哈哈</h2>
   <h2>哈哈哈</h2>
 </template>
 <template v-else>
   <h2>呵呵呵</h2>
   <h2>呵呵呵</h2>
   <h2>呵呵呵</h2>
 </template>
 <button v-on:click="toggle">切换</button>

v-show

v-if是惰性的，当条件为true时，才会真正渲染条件模块中的内容。
而v-show只是将display设置成了none，并且没有v-else的写法

如何选择用v-if还是v-show

• 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
• 如果不会频繁的发生切换，那么使用v-if；

列表渲染

v-for的基本使用

添加电影(数组）

<ul>
  <!-- <li v-for="movie in movies">{{movie}}</li> -->
  <!-- 还可以拿到索引值 -->
  <li v-for="(movie,index) in movies">{{index+1}}-{{movie}}</li>
</ul>
<input type="text" v-model="newM">
<button v-on:click="add">添加电影</button>

 data(){
   return{
     movies:[
       "大话西游",
       "悲伤逆流成河",
       "流浪地球",
       "笔仙2"
     ],
     newM:""
   }
 },
 methods:{
   add(){
     // 添加电影
     this.movies.push(this.newM);
   }
 }

个人信息（对象）

<!-- 个人信息 -->
<ul>
  <!-- 只有一个，那就是value -->
  <li v-for="value in info">{{value}}</li>
  <!-- 还可以拿到key和index哟，当然这个名字是自己取的，这不过是个参数而已，记住那个位置传什么参数就可以 -->
  <li v-for="(value,key) in info">{{key}}:{{value}}</li>
  <li v-for="(value,key,index) in info">{{index}}-{{key}}:{{value}}</li>
</ul>

遍历数字

 <!-- 遍历数字 -->
 <ul>
   <li v-for="num in 10">{{num}}</li>
 </ul>

v-for也可以和template结合使用

一般使用v-for时会绑定一个key

有key和没有key调用的算法不一样，所有一般加上key，避免后面出错 ，还不知道错哪里。

<li v-for="movie in movies" :key="movie">{{movie}}</li>

计算属性

computed的基本使用

当然计算属性中要用到data中的数据，还是要写this的哈。

 computed:{
   fullName(){
     return this.firstName + this.lastName;
   },
   result(){
     return this.score > 60 ? "及格" : "不及格";
   },
   reverseMsg(){
     return this.message.split(" ").reverse().join(" ");
   }
 }

使用的时候直接写名字就行，都不用写括号

    <h1>{{reverseMsg}}</h1>
    <h1>{{fullName}}</h1>
    <h1>{{result}}</h1>

计算属性一般是有缓存的，当我们多次使用计算属性时，计算属性中的运算只会执行一次。
计算属性会随着依赖的数据（firstname）的改变，而进行重新计算。
computed一般只写get就可以了，就像上面那样，它是get方法的语法糖，当然，它还可以写set方法

computed:{
  fullName:{
    get(){
      return this.firstName + " "  + this.lastName;
    },
    set(newValue){
      console.log(newValue)
    }
  }
},
methods:{
  changeName(){
      this.fullName="liu hong";
    }
},

侦听器watch

watch的基本使用

 watch:{
   // question侦听的data中属性的明显
   // newValue是变化后的新值
   // oldValue是变化前的旧值
   question(oldValue,newValue){
     console.log(oldValue,newValue)
   }
 }

默认情况下，我们的侦听只会针对监听的数据本身的改变（内部发生的改变是不能侦听的）
如果实在是要侦听，就需要用到深度侦听了。

 //深度监听
 watch:{
   info:{
     handler:function(newInfo,oldInfo){
       console.log("newInfo:",newInfo,"oldInfo:",oldInfo);
     },
     deep:true//深度监听
     immediate:true//立即执行
   }
 }

监听器的配置选项：立即执行（一定会执行一次）

见上面代码

综合案例：书籍购物车

对books数组中的书进行变量，并显示到html中来

<tr v-for="(book,index) in books">
	<td>{{index+1}}</td>
	<td>{{book.name}}</td>

要知道是在对第几本书进行操作

<!-- 为了知道是对第几本书进行操作，所以要将index传过去 -->
<button @click="increase(index)">+</button>

//添加书籍的件数:在调用的时候就传入index哦，然后这里作为形参传过来
 increase(index){
   this.books[index].count++;
 },

当只剩一件时，就不让减了

 <!-- 当件数小于等于1时就不让再减了，这里用了v-bind来动态绑定disabled哦，此外判定条件是前面遍历的item，也就是这的book，它的count是否小于1 -->
 <button @click="decrease(index)" :disabled="book.count<=1">-</buttn>

移除

remove(index){
  // 移除
  this.books.splice(index,1);
},

计算总价格

computed:{
 // 计算总价格
 totalPrice(){
   let finalPrice = 0;
   for(let book of this.books){
     // 每一本的数量*单价，再加起来
     finalPrice += book.price * book.count;
   }
   return finalPrice;
 }
}

vue3不支持过滤器了

推荐两种做法：使用计算属性/使用全局的方法
添加¥符号

 //在前面加¥符号
 formatPrice(price){
   return "¥"+price;
 }

<td>{{formatPrice(book.price)}}</td>
<!-- 这样加人民币最方便，在外面格式化一下 -->
        <h2>总价钱为：{{formatPrice(totalPrice)}}</h2>

v-model的使用

v-model其实就是一个语法糖

    <!-- textarea和input都能用v-model进行双向绑定 -->
    <textarea name="" id="" v-model="intro"></textarea>
    <h2>{{intro}}</h2>

    <!-- 单选框 radio-->
    <!-- 当类型为radio时，你用v-model绑定同一个东西时，这两个选项就是互斥的 -->
    <!-- 记得要写value，这样v-model才知道绑定的gender的值是什么 -->
    <span>你的性别是：</span>
    <label for="male">
      <input type="radio" id="male" v-model="gender" value="male">男
    </label>
    <label for="female">
      <input type="radio" id="female" v-model="gender" value="female">女
    </label>
    <h2>性别：{{gender}}</h2>

    <!-- 复选框 checkbox-->
    <!-- label的for和input的id写一样的，这样就将文字和单选框绑定在一起了 -->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意此协议
    </label>
    <h2>isAgree:{{isAgree}}</h2>

    <span>你的爱好：</span>
    <label for="basketball">
      <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
    </label>
    <label for="football">
      <input type="checkbox" id="football" value="football" v-model="hobbies">足球
    </label>
    <label for="pingpang">
      <input type="checkbox" id="pingpang" value="pingpang" v-model="hobbies">乒乓球
    </label>
    <h2>爱好：{{hobbies}}</h2>

    <!-- select -->
    <!-- multiple表示可以选择多个 -->
    <!-- v-model是绑定到select中哦 -->
    <span>你喜欢的水果</span>
    <select name="" id="" multiple v-model="fruit">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
      <option value="yezi">椰子</option>
    </select>
    <h2>水果：{{fruit}}</h2>

v-model的修饰符

lazy，加上他就只在提交的时候（比如回车）才会触发

<input type="text" v-model.lazy="message">

number，转化为数字类型

<input type="text" v-model.number="message">

trim，自动过滤掉首尾多余的空格

<input type="text" v-model.trim="message">

vue组件化开发

配置前提

首先电脑需要安装node和npm

组件化开发思想

注册全局组件

 // 使用app注册一个全局组件
 // component的第一个参数是组件名称，第二个是组件对象
 //其中组件对象也可以抽出去
 const app = Vue.createApp(App);
 app.component("component-a",{
   template:`<h2>我是component-a组件</h2>`
 })
 app.mount("#app");

使用组件

<template id="my-app">
  <h1>{{message}}</h1>
  <component-a></component-a><!-- 使用组件 -->
</template>

也可以把组件对象中的template抽出去

<template id="component-a">
  <h2>明天会更好</h2>
  <button>开启元气满满的一天</button>
</template>

app.component("component-a",{
	 template:"#component-a"
})

全局组件：意味着注册的这个组件可以在任何的组件模板中使用

注册局部组件

const ComponentA = {
  template:"#component-a"
}

// components和data是平级关系
components:{
 // key：组件名称
 // value：组件对象
 // ComponentA:ComponentA
 // Es6的语法糖，当key和value一样的时候，只写一个名称就可以
 //名称要么大驼峰,要么用-连接
 ComponentA
},

webpack的学习

（有一个专门的笔记）

Vue CLI和Vite

Vue CLI 脚手架 （帮我们创建项目）

首先，通过cmd全局安装

npm install @vue/cli -g

然后，cd到大文件夹外面
然后创建项目

vue create 项目名称

项目名称不能包含大写字母
选择vue3.0版本
暂时只勾选babel（将es6转为es5），空格是选中和取消
创建成功后的文件和之前将webpack差不多
其中，.browserslistrc文件是设置适配浏览器范围，.gitignore是要忽略的东西
创建了vue项目后，先去看package.json文件中的命令，看一下如何打包和运行

认识Vite（和webpack一样是构建工具）

vite被称为“下一代前端开发与构建工具”
vite的本意就是“快速的”
先来试试原生的，其实也可以使用模块化语言，es6语言是能直接识别的，只是要注意两个地方
先看一下文件结构

编写math.js文件

编写index.js文件

index.html文件

使用vite

先安装

npm install vite –D # 局部安装

像webpack那样,加入css文件，发现

vite默认是支持是css文件的

运行的话是

npx vite

再用user-select：none；来测试默认会不会添加浏览器前缀
发现，

vite默认不支持添加浏览器前缀

因为还需要安装两个插件

npm install postcss -D
npm install postcss-preset-env

然后再去新建postcss.config.js文件，并编写

module.exports = {
  plugins:[
    require("postcss-preset-env")
  ]
}

之后再npx vite运行就能看到加了浏览器前缀

vite默认支持ts文件

vite对vue文件的支持

首先，得安装

 npm install vue@next -D    
npm install @vitejs/plugin-vue -D
npm install @vue/compiler-sfc -D

然后，还需要配置

走过的弯路

一、报错：Uncaught TypeError: document.qerySelector is not a function

原因非常简单，querySelector我少写了一个u，离谱。快是要求，但拼写准确是前提呀。

二、报错：vue is not defined

原来是Vue.createApp的vue我忘记首字母大写了。

三、报错：‘git’ 不是内部或外部命令，也不是可运行的程序

1. 原因：电脑没有git，去下载安装git。
   注意：官网下载git版本很慢，复制官网链接，我电脑是64bit，选对应的，到迅雷去下载
2. 下载之后，点开，一顿无脑next就安装好了，这个时候在桌面右击（win11要多点“显示更多选项”）就能看到git了

3. 选择第二个git Bash，输入where git就能查看git的地址了,地址如下：
   找到git安装路径中bin的位置，如：C:\Program Files\Git\bin
   找到git安装路径中git-core的位置，如：C:\Program
   Files\Git\mingw64\libexec\git-core;
4. 右键“计算机”->“属性”->“高级系统设置”->“环境变量”->在下方的“系统变量”中找到“path”->选中“path”并选择“编辑”->将找到的bin和git-core路径复制到其中->保存并退出
   注意：where git是要在git bash的命令中才能运行，而不是在cmd就能运行的。

四、报错：无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称；

或无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
原因：电脑还没安装npm、yarn
步骤一：先安装node
进入node官网，推荐安装current的版本（同样的，复制链接到迅雷下载更快）。点击下载好的，一路无脑next。
之后，打开cmd，输入：

node -v
npm -v

就会看到npm已经安装好了
再安装yarn

npm install yarn -g

检查yarn版本

yarn --version

可能出现的报错：yarn : 无法加载文件 C:\Users\12952\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。
解决方法：

以管理员身份运行vscode;
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的;
执行：set-ExecutionPolicy RemoteSigned;
再次执行：get-ExecutionPolicy，就显示RemoteSigned;
执行：yarn --version

五、template:"#my-app"总是忘记写#号。

六、控制台显示：You are running a development build of Vue.Make sure to use the production build (*.prod.js) when deploying for production.

第一次是因为：我没有挂载mount("#app)
第二次是因为：我压根没在template中写任何东西。奇葩的一批。

七、冒号写成了等于

正确写法：

 <h2 :class="{'active':true,'isshow':false,'choose':true}">{{message}}</h2>

错误的写成了：‘choose’=true

八、报错且btn1Click没反应，[Vue warn]: Property “btn1Click” was accessed during render but is not defined on instance.

原因：应该是template中使用的点击方法和实际methods方法写的不是同一个名字，注意一下就好

九、v-on后面忘记写具体的触发事件

正确写法：

v-on:click="toggle"

九、错将methods方法写到computed中了，导致methods中的方法一直不起效果，而且还有警告。

computed和methods应该是平级关系。

十、v-if写成了if,v-else写成了else

十一、写到计算属性中的变量，在data中又写了一遍，其实只写计算属性中就可以了，不然会有警告

十二、有点地方只能写component，不能写components，多写一个s，不报错，也不显示页面

component:()=>import("../components/Login")

十三、单引号不行，要双引号才行

电脑快捷键

1.打开cmd：win+R

2.在cmd界面中，进入e盘：e:再回车

笔记编写快捷键

未解决的问题

一、下载并允许vue源码一直不成功。

在这里插入代码片

一些常见英文

toggle切换