2022_黑马vue笔记

本文详细介绍了Vue2的关键特性,包括数据驱动视图、双向数据绑定、MVVM模式、指令的使用,如内容渲染、属性绑定、事件绑定、v-model和条件渲染。讲解了组件的生命周期、props、样式管理和父子/兄弟组件间通信。此外,还探讨了axios的基础使用、封装与集成,以及vue-cli的配置。文章最后涉及了Vue的路由概念,包括基本用法、路由重定向、嵌套路由和动态路由匹配,以及编程式导航和导航守卫。
摘要由CSDN通过智能技术生成

vue2

vue插件

1.Vue Snippets
2.Vetur

vue 的两个特性

  1. 数据驱动视图:

    • 数据的变化会驱动视图自动更新
    • 好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来!
  2. 双向数据绑定:

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

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

MVVM

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

图 1

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;
 }

  1. $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">
  1. textarea
<p style="white-space: pre-line;">{
  { message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
  1. 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: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值