• Web前端-Vue2+Vue3基础入门到实战项目-Day1(初始Vue, Vue指令, 小黑记事本)

    Web前端-Vue2+Vue3基础入门到实战项目-Day1

    Vue快速上手

    创建一个Vue实例

    创建Vue实例, 初始化渲染的核心步骤:

    1. 准备容器
    2. 引包(官网) - 开发版本 / 生产版本
    3. 创建Vue实例 new Vue()
    4. 指定配置项 el data => 渲染数据
      • el: 指定挂载点, 选择器指定控制的是哪个盒子
      • data: 提供数据
    <body>
<div id="app">
  <h1>{{ msg }}h1>
  <a href="#">{{ count }}a>
div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>

<script>
  // 引入VueJS核心包, 就有了Vue构造函数
  const app = new Vue({
    // 通过 el 配置选择器, 指定 Vue 管理的是哪个盒子
    el: '#app',
    // data 提供数据
    data: {
      msg: "Hello Vue",
      count: 666
    }
  })
script>

body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    插值表达式

    • 作用: 利用表达式进行插值, 将数据渲染页面中
    • 格式: {{ 表达式 }}
    • 注意点:
      • 使用的数据要存在(data)
      • 支持的是表达式, 而非语句 if ... for
      • 不能在标签属性里使用
    <body>
<div id="app">
  <p>{{ nickname }}p>
  <p>{{ nickname.toUpperCase() }}p>
  <p>{{ nickname+'你好' }}p>
  <p>{{ age>= 18 ? '成年' : '未成年' }}p>
  <p>{{ friend.name }}p>
  <p>{{ friend.desc }}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      nickname: 'tony',
      age: 18,
      friend: {
        name: 'jepson',
        desc: '热爱学习 Vue'
      }
    }
  })
script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    Vue响应式特性

    • 响应式: 数据变化, 视图自动更新
    • 访问和修改数据
      • data中的数据, 会被添加到实例上
      • 访问数据: 实例.属性名
      • 修改数据: 实例.属性名 = 值
    <body>
<div id="app">
  {{ msg }}
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue'
    }
  })
script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    Vue指令

    指令初识 和 v-html

    • Vue指令: 带有v-前缀的特殊标签属性
    <body>
  <div id="app">
    <div v-html="msg">div>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          
            黑马程序员
          
        `
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    v-show 和 v-if

    • v-show
      • 底层原理:切换 css 的 display: none 来控制显示隐藏
      • 场景: 频繁切换显示隐藏的场景
    • v-if
      • 底层原理: 根据 判断条件 控制元素的 创建 和 移除(条件渲染)
      • 场景: 要么显示, 要么隐藏, 不频繁切换的场景
    <head>
  ...
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  style>
head>
<body>
  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子div>
    <div v-if="flag" class="box">我是v-if控制的盒子div>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    v-else 和 v-else-if

    <body>
  <div id="app">
    <p v-if="gender === 1">性别：♂ 男p>
    <p v-else>性别：♀ 女p>
    <hr>
    <p v-if="score >= 90">成绩评定A: 奖励电脑一台p>
    <p v-else-if="score >= 70">成绩评定B: 奖励周末郊游p>
    <p v-else-if="score >= 60">成绩评定C: 奖励零食礼包p>
    <p v-else>成绩评定D: 惩罚一周不能玩手机p>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 1,
        score: 80
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    v-on

    内联语句

    <body>
  <div id="app">
    
    
    
    
    <button @click="--count">-button>
    <span>{{ count }}span>
    <button v-on:click="++count">+button>
    
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    methods处理函数

    <body>
  <div id="app">
    <button @click="fn">切换显示隐藏button>
    <h1 v-show="isShow">黑马程序员h1>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: false
      },
      methods: {
        fn () {
          this.isShow = !this.isShow
        }
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    调用传参

    <head>
  ...
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  style>
head>
<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机h3>
      <button @click="buy(5)">可乐5元button>
      <button @click="buy(10)">咖啡10元button>
      <button @click="buy(8)">牛奶10元button>
    div>
    <p>银行卡余额: {{ money }}元p>
  div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
            this.money -= price
        }
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    v-bind

    • 作用: 动态地设置html的标签属性
    <body>
  <div id="app">
    
    
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-01.png',
        msg: 'Hello 波仔'
      }
    })

  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    案例 - 波仔的学习之旅

    <body>
  <div id="app">
    <button v-show="index > 0" @click="--index">上一页button>
    <div>
      <img :src="list[index]" alt="">
    div>
    <button v-show="index < list.length - 1" @click="++index">下一页button>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    v-for

    v-for基本使用

    <body>

  <div id="app">
    <h3>小黑水果店h3>
    <ul>
      <li v-for="(item, index) in list">
        {{item}} - {{index}}
      li>
    ul>
    <ul>
      <li v-for="item in list">
        {{item}}
      li>
    ul>
  div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    案例 - 小黑的书架

    • filter: 根据条件, 保留满足条件的对应项, 得到一个新数组
    <body>
  <div id="app">
    <h3>小黑的书架h3>
    <ul>
      <li v-for="(item, index) in booksList" :key="item.id">
        <span> {{item.name}} span>
        <span> {{item.author}} span>
        
        <button @click="del(item.id)">删除button>
      li>
    ul>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del(id){
          // 通过 id 删除数组中的对应项 -> filter(不会改变原数组)
          // filter: 根据条件, 保留满足条件的对应项, 得到一个新数组
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    v-for的key

    • key的作用: 给元素添加的唯一标识, 便于Vue进行列表项的正确排序复用
    • 注意点
      • key的值只能是字符串或数字类型
      • key的值必须具有唯一性
      • 推荐使用id作为key(唯一), 不推荐使用index作为key(会变化, 不对应)
    • 不加key: v-for的默认行为会尝试 原地修改元素(就地服用)

    v-model

    • 作用: 给表单元素使用, 双向数据绑定 -> 可以快速获取或设置表单元素的内容
      • 数据变化, 视图自动更新
      • 视图变化, 数据自动更新
    <body>
  <div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录button>
    <button @click="reset">重置button>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login(){
          console.log(this.username, this.password)
        },
        reset(){
          this.username = ''
          this.password = ''
        }
      }
    })
  script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    综合案例 - 小黑记事本

    功能总结:

    • 列表渲染:
      • v-for
      • key的设置
      • {{}}插值表达式
    • 删除功能:
      • v-on调用传参
      • filter过滤
      • 覆盖修改原数组
    • 添加功能:
      • v-model绑定
      • unshift修改原数组添加
    • 底部统计和清空
      • 数组.length累计长度
      • 覆盖数组清空列表
      • v-show控制隐藏
    DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本title>
head>
<body>


<section id="app">
  
  <header class="header">
    <h1>小黑记事本h1>
    <input placeholder="请输入任务" class="new-todo" v-model="todoName"/>
    <button class="add" @click="add">添加任务button>
  header>
  
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <span class="index"> {{index+1}}. span> <label> {{item.name}} label>
          <button class="destroy" @click="del(item.id)">button>
        div>
      li>
    ul>
  section>
  
  <footer class="footer" v-show="list.length > 0">
    
    <span class="todo-count">合 计:<strong> {{list.length}} strong>span>
    
    <button class="clear-completed" @click="clear">
      清空任务
    button>
  footer>
section>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      list: [
        {id: 1, name: '跑步两公里'},
        {id: 2, name: '跳绳500下'}
      ],
      todoName: ''
    },
    methods: {
      del(id){
        this.list = this.list.filter(item => item.id !== id)
      },
      add(){
        if(this.todoName.trim() === ''){
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id: +new Date(),
          name: this.todoName
        })
        this.todoName = ''
      },
      clear(){
        this.list = []
      }
    }
  })

script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78

    来源

    黑马程序员. Vue2+Vue3基础入门到实战项目

  • 相关阅读:
    Kafka系列之：Kafka Connect错误报告设置
    mybatis缓存介绍
    “看片”神器没了，又将有谁突出重围？
    MyBatis—利用MyBatis查询（查询所有，查询一行，条件查询）
    Llama2-Chinese项目：2.1-Atom-7B预训练
    [ubuntu]ubuntu22.04默认源和国内源
    webpack基础版及其常用插件分享超详细~~
    Test Module的创建及使用
    mybatis 或 mybatis-plus 执行 sql 的三种方式
    安装ora2pg遇到如下问题
  • 原文地址：https://blog.csdn.net/Y_cen/article/details/133445288