2022_黑马vue笔记

vue2

vue插件

1.Vue Snippets
2.Vetur

vue 的两个特性

1. 数据驱动视图：

   • 数据的变化会驱动视图自动更新
   • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2. 双向数据绑定：

   在网页中，form 表单负责采集数据，Ajax 负责提交数据。

   • js 数据的变化，会被自动渲染到页面上
   • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

MVVM

数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例

VivwModel作为MVVM的核心

---

基本使用

1.导入vue.js的script脚本

<script src="./lib/vue-2.6.12.js"></script>

2.在页面声明一个将要被vue所控制的DOM区域

<div id="app">{
  {username}}</div>

3.创建VM实例对象

const vm = new Vue({
   
    el:'#app', 
    data:{
   
        username:'zhangsan'
    }
})

---

vue 指令

指令是vue为开发者提供的模板语法
1.内容渲染
2.属性绑定
3.事件绑定
4.双向绑定
5.条件渲染
6.列表渲染

1. 内容渲染指令

1. v-text 指令的缺点：会覆盖元素内部原有的内容！
2. { { }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
   • 插值表达式中可以运算js表达式

    <div :title="'box'+index">这是一个div</div>
   

3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

---

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中 ，不能用在元素的属性节点中！

• 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；

• 简写是英文的 :

• 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<input type="text" :placeholder="tips">
data:{
        tips:'请输入用户名'
    }

---

3. 事件绑定

1. v-on: 简写是 @

2. 语法格式为：

 <p>count的值是:{
  {count}}</p>
 <button @click="add">点击加1</button>
   methods: {
      add() {
        // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
        this.count += 1
      }
   }

绑定传参

<button @click="add(2)">点击加2</button>
add(index){
    this.count += index;
 }

---

3. $event 是vue内置变量，表示原生的DOM事件对象

<button @click="add(1,$event)">如果count是偶数，则按钮背景变成红色，否则不变色</button>
add(n,e){
    this.count += n;
    if(this.count % 2 == 0){
        e.target.style.backgroundColor = 'red'
    }else{
        e.target.style.backgroundColor = ''
    }
}

---

事件修饰符：

事件修饰符	说明
.prevent	阻止默认行为(a链接跳转、表单提交)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身触发事件处理函数

• .prevent 阻止默认行为
  阻止a链接跳转行为

  <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
  

• .stop 阻止事件冒泡

<div style="height:150px;backgroundColor:orange;padding-left:100px;line-height:150px"  @click="divHandler"> 
   <button @click.stop="btnHandler">按钮</button>
</div>

按键修饰符

@keyup

 <input type="text" @keyup.esc="clearInput($event)" @keyup.enter="commitAjax">
clearInput(e){
    e.target.value=""
},
commitAjax(){
    console.log('触发了提交');
}

4. v-model 双向数据绑定

帮助用户在不操作DOM的前提下，快速获取表单的数据

1. input 输入框

  <p>用户的名字是:{
  {username}}</p>
  <input type="test" v-model="username">

2. textarea

<p style="white-space: pre-line;">{
  { message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

3. select

v-model修饰符

修饰符	作用
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在“change”时而非“input”时更新

<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{
  {n1+n2}}</span>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445ECG0H-1648046654845)(D:\images\92518294628c3a565cb92ed70a861c1a0b5970378989976dc7630cd3d646fd2e.png)]

<input type="text" v-model.trim="username">
<button @click="show">获取用户名</button>

5. 条件渲染指令

1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
   • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
   • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

1. 直接给定一个布尔值 true 或 false

   <p v-if="true">被 v-if 控制的元素</p>
   

2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

   <p v-if="type === 'A'">良好</p>
   

key值管理可复用的元素

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template

v-for列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

 <ul id="example-2">
     <li v-for="(item, index) in items">
         {
  { parentMessage }} - {
  { index }} - {
  { item.message }}
     </li>
 </ul>

建议给每个v-for提供一个唯一的key属性，既提升性能，又防止列表状态絮乱
1.key值只能是字符串或数字
2.具有唯一性
3.使用index做key没有任何意义

过滤器

过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

watch 侦听器

所有的侦听器，都应该被定义到 watch 节点下
侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
新值在前，旧值在后

 watch: {
   
   username(newVal,oldVal){
   
     console.log("变换前"+oldVal);
     console.log("变换后"+newVal);
   }
 }

判断用户名是否被占用
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使
用 immediate 选项。示例代码如下：

 watch: {
   
        // 定义对象格式的侦听器
        username: {
   
          // 侦听器的处理函数
          handler(newVal, oldVal) {
   
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }
      }

handler是固定写法

侦听器的格式

1. 方法格式的侦听器
   • 缺点1：无法在刚进入页面的时候，自动触发！！！
   • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
2. 对象格式的侦听器
   • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
   • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

deep选项 深度监听

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项
两种写法
直接获取要监听的属性名

watch: {
   
  'info.username'(newVal) {
   
    console.log(newVal)
  }

通过deep选项监听

 info:{
   
   handler(newVal){
   
     console.log(newVal);
   },
   deep:true
 }

计算属性

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

 data: {
   
    message: 'Hello'
  },
  computed: {
   
    // 计算属性的 getter
    reversedMessage () {
   
      return this.message.split('').reverse().join('')
    }
  }

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数

axios

axios 是一个专注于网络请求的库！

axios 的基本使用

1. 发起 GET 请求：

   axios({
        
     // 请求方式
     method: 'GET',
     // 请求的地址
     url: 'http://www.liulongbin.top:3006/api/getbooks',
     // URL 中的查询参数
     params: {
        
       id: 1
     }
     // result 是返回的结果
   }).then(function (result) {
        
     console.log(result)
   })
   

2. 发起 POST 请求：

   document.querySelector('#btnPost').addEventListener('click', async function () {
        
     // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
     // await 只能用在被 async “修饰”的方法中
     const {
         data: res } = await axios({
        
       method: