• 20231012-黑马Vue学习笔记-第一天

    文章目录

    Vue的概念

    Vue 是一个用于 构建用户界面 的 渐进式 框架

    Vue2官网

    https://v2.cn.vuejs.org/

    创建一个Vue实例

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>

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

<body>
  <div id="app">
    
    <h1>
      {表达式}} -->
      
      
      
      {{msg}}
    h1>
    <p>{{friend.name+' '+(friend.age>=18?'成年':'未成年')}}p>
  div>

  <script>
    // Vue构造函数
    const app = new Vue({
      // 通过el配置选择器，指定Vue管理哪个盒子
      el: "#app",
      // 通过data提供数据
      data: {
        msg: "Hello world",
        friend: {
          name: 'Jony',
          age: 18
        }
      }
    });

    // Vue响应式特性
    // data中的数据是会被添加到实例上
    // 1.访问数据 实例.属性名 app.msg
    console.log(app.friend.name);
    // 2.修改数据 实例.属性名 = 新值
    app.msg = "你好，世界！";
  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

    安装Vue开发者工具

    https://chrome.zzzmh.cn/index#/index

    Vue指令

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>

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

<body>

  <div id="app">
    
    <div v-html="msg">div>

    
    <h2 v-show="falg">Hello world!h2>

    
    <h2 v-if="falg">你好，世界！h2>

    
    <h2 v-if="gender===1">性别：♂男h2>
    <h2 v-else>性别：♀女h2>

    <h2 v-if="score>=90">优秀h2>
    <h2 v-else-if="score>=80">良好h2>
    <h2 v-else-if="score>=60">及格h2>
    <h2 v-else>不及格h2>

    
    
    <div>
      <button v-on:click="count--">-button>
      <span>{{count}}span>
      <button @click="count++">+button>
    div>

    
    <div>
      <button @click="ShowOrHide">切换显示隐藏button>
      <span v-show="isShow">天生我材必有用，千金散尽还复来span>
    div>

    
    
    <div style="border: 2px solid red; width: 200px; margin-top: 20px;">
      <h3>小黑自动售货机h3>
      <button @click="Buy(5)">可乐5元button>
      <button @click="Buy(10)">咖啡10元button>
      <p>银行卡余额：{{money}}元p>
    div>

    
    <div>
      <img v-bind:src="imgUrl" alt="" style="width: 180px; height: 120px;">
    div>

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

    
    

    
    <div style="width: 250px; height: 140px; border: 1px solid black; text-align: center;">
      账户：<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>
  div>



  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: "
    Nice day!
    "    ,
        falg: false,
        gender: 2,
        score: 59,
        count: 100,
        isShow: false,
        money: 100,
        imgUrl: "./images/1.jpg",
        list: ['苹果', '香蕉', '梨'],
        username: '',
        password: ''
      },
      methods: {
        ShowOrHide() {
          this.isShow = !this.isShow;
        },
        Buy(price) {
          this.money -= price;
        },
        login() {
          if (this.username === 'admin' && this.password === 'admin') {
            alert('登陆成功!');
          } else {
            alert('登录失败！');
          }
        },
        reset() {
          this.username = '';
          this.password = '';
        }
      }
    });
      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
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127

    案例-波仔的学习之旅

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 480px;
      height: 640px;
      background-color: aquamarine;
      margin: 100px auto;
      text-align: center;
    }

    #box img {
      width: 240px;
      height: 240px;
      margin: 100px auto;
      border: 1px solid black;
    }

    .btns {
      height: 80px;
      background-color: skyblue;
    }

    .btns button {
      width: 100px;
      height: 40px;
      border-radius: 20px;
      margin-top: 20px;
    }

    .lastBtn {
      float: left;
      margin-left: 100px;
    }

    .nextBtn {
      float: right;
      margin-right: 100px;
    }
  style>
head>

<body>
  <div id="box">
    <h2>波仔的学习之旅h2>
    <img :src="imgsUrl[index]" alt="">

    <div class="btns">
      <button class="lastBtn" v-show="index > 0" @click="index--">上一页button>
      <button class="nextBtn" v-show="index < imgsUrl.length-1" @click="index++">下一页button>
    div>
  div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        imgsUrl: ['./images/波仔/10-01.png', './images/波仔/10-02.png', './images/波仔/11-00.gif', './images/波仔/11-01.gif', './images/波仔/11-02.gif', './images/波仔/11-03.gif', './images/波仔/11-04.png', './images/波仔/11-05.png'],
        index: 0,
      }
    });
  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

    常见的事件类型

    • 鼠标事件：
      • click：鼠标点击事件
      • dblclick：鼠标双击事件
      • mousedown：鼠标按下事件
      • mouseup：鼠标松开事件
      • mousemove：鼠标移动事件
      • mouseover：鼠标移入事件
      • mouseout：鼠标移出事件

    • 键盘事件：
      • keydown：按下键盘按键事件
      • keyup：松开键盘按键事件
      • keypress：按下并松开键盘按键事件

    • 表单事件：
      • input：输入事件，当输入框的值发生变化时触发
      • change：值改变事件，当表单元素的值发生变化时触发
      • submit：表单提交事件
      • focus：获得焦点事件
      • blur：失去焦点事件

    • 触摸事件：
      • touchstart：触摸开始事件
      • touchmove：触摸移动事件
      • touchend：触摸结束事件

    • 滚动事件：
      • scroll：滚动事件，当滚动条滚动时触发

    案例-小黑的书架

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>

<body>
  <div id="bookshelf">
    <h1>小黑的书架h1>
    <ul>
      <li v-for="item in booksList" :key="item.id">{{item.name}} {{item.author}}
        <button @click="del(item.id)">删除button>
      li>

    ul>
  div>

  <script>
    const app = new Vue({
      el: '#bookshelf',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' },
        ],
      },
      methods: {
        del(id) {
          // filter 根据条件 保留满足条件的对应项 得到一个新数组
          this.booksList = this.booksList.filter(item => item.id != id);
        }
      }
    });
  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

    案例-小黑记事本

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #notepad h1 {
      text-align: center;
      padding: 10px;
    }

    .addTask {
      text-align: center;
      padding: 20px;
    }

    .addTask input {
      height: 40px;
      width: 360px;
      font-size: 20px;
    }

    .addTask button {
      height: 40px;
      width: 80px;
      border-radius: 20px;
      margin-left: 10px;
    }

    .items {
      width: 640px;
      background-color: aqua;
      margin: 0 auto;
    }

    .items li {
      list-style: none;
      background-color: cadetblue;
      height: 48px;
      font-size: 24px;
      line-height: 48px;
      text-align: center;
      margin-bottom: 10px;
    }

    .items li button {
      background-color: transparent;
      border: 1px solid transparent;
      font-size: 20px;
      color: brown;
      float: right;
      margin-top: 15px;
      margin-right: 20px;
    }

    .bottomNav {
      height: 40px;
      background-color: deepskyblue;
    }

    .bottomNav span {
      line-height: 40px;
      margin-left: 40px;
    }

    .bottomNav button {
      float: right;
      width: 80px;
      height: 32px;
      border-radius: 16px;
      background-color: darkcyan;
      margin-right: 40px;
      margin-top: 5px;
    }
  style>
head>

<body>
  <div id="notepad">
    <h1>小黑记事本h1>
    <div class="addTask">
      <input type="text" v-model="addTask">
      <button @click="Add">添加任务button>
    div>
    <div class="items">
      <ul>
        <li v-for="(item,index) in tasksList" :key="item.id">{{++index}}、{{item.taskName}}
          <button @click=Remove(item.id)>Xbutton>
        li>
      ul>
      <div class="bottomNav" v-show="tasksList.length>0">
        <span>合计：{{tasksList.length}}span>
        <button @click="Reset">清空任务button>
      div>
    div>
  div>

  <script>
    const app = new Vue({
      el: "#notepad",
      data: {
        tasksList: [
          { id: 1, taskName: '跑步一公里' },
          { id: 2, taskName: '跳绳200个' }
        ],
        addTask: '',
      },
      methods: {
        // unshift 在数组最前面添加数据
        Add() {
          if (this.addTask.trim() === '') {
            alert("请输入任务名称！！！");
            return;
          }
          let newTask = { id: this.tasksList.length + 1, taskName: this.addTask };
          this.tasksList.push(newTask);
          this.addTask = '';
        },
        Reset() {
          this.tasksList = [];
        },
        Remove(id) {
          this.tasksList = this.tasksList.filter(item => item.id != id);
        }
      }
    });
  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
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
  • 相关阅读:
    WebService: SpringBoot集成WebService实践二
    metinfo_5.0.4 EXP Python脚本编写
    基于粒子群算法优化支持向量机研究(Python代码实现）
    校园广播站人员和节目管理系统
    【数据结构与算法】之堆的应用——堆排序及Top_K问题！
    倍福TwinCAT3.0软件与C++通讯问题（EAP通讯）
    【力扣】整数反转，判断是否溢出的数学解法
    Java基础---第十篇
    音频——I2S TDM 模式(六)
    ESP8266-Arduino编程实例-MQ-7一氧化碳传感器驱动
  • 原文地址：https://blog.csdn.net/qq_44887198/article/details/133785533