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

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量180 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44887198/article/details/133785533
版权

文章目录

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>Document</title>

  <!--引包 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 编写用于渲染的代码逻辑 -->
    <h1>
      <!-- 插值表达式 语法：{{表达式}} -->
      <!-- 注意事项1：使用数据要存在 -->
      <!-- 注意事项2：支持的是表达式，而不是语句 if for -->
      <!-- 注意事项3：不能在标签属性中使用 -->
      {{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>

安装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>Document</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    <!-- v-html 设置元素的innerHTML 解析字符串标签 -->
    <div v-html="msg"></div>

    <!-- 切换 display:none 控制元素显示隐藏  -->
    <h2 v-show="falg">Hello world!</h2>

    <!-- 通过创建或移除元素节点来控制元素的显示和隐藏 -->
    <h2 v-if="falg">你好，世界！</h2>

    <!-- v-else v-else-if 辅助 v-if 进行判断渲染 -->
    <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>

    <!-- v-on 注册事件 = 添加监听 + 提供处理逻辑 v-on: 可简写为 @ -->
    <!-- v-on:事件名 = "内联语句" -->
    <div>
      <button v-on:click="count--">-</button>
      <span>{{count}}</span>
      <button @click="count++">+</button>
    </div>

    <!-- v-on:事件名="methods中的函数名" -->
    <div>
      <button @click="ShowOrHide">切换显示隐藏</button>
      <span v-show="isShow">天生我材必有用，千金散尽还复来</span>
    </div>

    <!-- v-on调用传参 -->
    
    <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>

    <!-- v-bind 动态设置html的标签属性 语法 v-bind:属性名="表达式" 可简写为 :属性名="表达式" -->
    <div>
      <img v-bind:src="imgUrl" alt="" style="width: 180px; height: 120px;">
    </div>

    <!-- 基于数据循环 多次渲染整个数据 语法 v-for="(item,index) in 数组|对象|数字" item 每一项 index 下标 -->
    <div>
      <h3>小黑水果店</h3>
      <ul>
        <li v-for="(item,index) in list">{{item}}-{{index}}</li>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>

    <!-- key的作用 给元素添加唯一标识 便于Vue进行列表项的正确排序复用 -->
    <!-- <li v-for="(item,index) in xxx" :key="唯一值"></li> -->

    <!-- v-model 给表单元素使用 双向数据绑定 可以快速 获取 或 设置 表单元素 -->
    <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: "<h1>Nice day!</h1>",
        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>

案例-波仔的学习之旅

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>

常见的事件类型

  • 鼠标事件：
    • 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>Document</title>
  <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>

案例-小黑记事本

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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)>X</button>
        </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>
ぃ咔哇依°ヽ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
20231018-黑马Vue学习笔记-第三天
qq_44887198的博客
10-20 137
20231018-黑马Vue学习笔记-第三天
20231014-黑马Vue学习笔记-第二天
qq_44887198的博客
10-17 187
20231014-黑马Vue学习笔记-第二天
VUE学习笔记（黑马2023版 第一天~第三天）
m0_70675152的博客
11-02 4468
VUE学习笔记（黑马2023版）第一天1.Vue是什么？2.创建一个Vue实例2.1.准备容器（Vue所管理的范围）2.2.引包（开发版本包/生产版本包）2.3.创建实例2.4.指定配置项 el data3.插值表达式3.1.作用：3.2.语法：3.3.注意点3.4.实践案例4.Vue响应式特性4.1.什么是响应式？4.2.访问和修改数据5.Vue开发者工具安装：装插件调试Vue应用5.1浏览器为谷歌的安装方法通过谷歌应用商店安装（需要魔法）通过极简插件安装5.2浏览器为Edge的安装方法6.Vue指令6.
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67265919的博客
03-11 3494
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
VUE学习笔记（黑马2023版 第四天）
m0_70675152的博客
01-08 927
prop定义：组件上注册的一些自定义属性prop作用：向子组件传递数据可以传递任意数量的prop可以传递任意类型的prop。
【Vue学习笔记】黑马程序员四小时速成VUE
DingDong的博客
12-30 2974
Vue学习 Vue基础 Vue简介 JavaScript框架 简化Dom操作 响应式数据驱动 Vue官方文档： https://cn.vuejs.org https://v3.cn.vuejs.org/ *Demo1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
黑马VUE学习笔记（附带项目天气预报和音乐播放器所有源码）
m0_67403076的博客
03-10 1563
文章目录 黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码） 感谢黑马！ 01第一个vue程序 02el挂载点 el是用来设置Vue实例挂载（管理）的元素 1.vue的作用范围 在el命中的元素内部可以被渲染 Vue会管理el选项命中的元素及其内部的后代元素 2.是否可以选用其他的选择器 3.是否可以设置其他的dom元素 03data 数据对象 1.Vue中用到的数据定义在data中 2.data中可以写复杂类型的数据 3.渲染复杂类型数据时，遵循js的语法即
Vue学习笔记第一天--知识点
weixin_33743880的博客
07-19 111
数据流 1向：js内存属性发生改变，影响页面的变化 1向：页面的改变影响js内存属性的改变 vue中常用的v-指令演示 常用指令 v-text 是元素的innerText只能在双标签中使用 v-html 是元素的innerHTML，不能包含<!--{{xxx}} --> v-if 元素是否移除或者插入 v-show 元素...
Vue学习笔记第二天
superbeyone
09-03 318
vue常用指令及入门 开车啦，快上车~~~ 上车准备 1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？ 输入服务 是需要使用的时候 配置期 config -&amp;amp;gt; 可以注入供应商服务对象，对于具体服务进行配置 运行期 非config都算是运行期 service/factory(通过ret...
vue-tutorial：一些vue-tutorial-《 Vue学习笔记》
02-06
vue-tutorial：一些vue-tutorial-《 Vue学习笔记》
Vue-Router基础学习笔记(小结)
10-17
主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 380
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 258
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 208
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 152
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
黑马程序员vue学习笔记
09-06
抱歉，我是一个与ChatGPT类似的AI助手，无法提供具体的学习笔记。不过，我可以给你一些建议来学习Vue.js。 1. 官方文档：Vue.js官方文档是最权威的学习资源。你可以从基础概念到高级用法，逐步深入地学习Vue.js。 2. 在线教程：有许多在线教程可以帮助你快速入门Vue.js，如w3schools、Vue Mastery等。这些教程通常提供实例和练习，可以加深你对Vue.js的理解。 3. 实践项目：通过实践项目来巩固知识是非常重要的。尝试构建一些小型的Vue.js项目，如待办事项列表、博客应用等，以便更好地理解Vue.js的各种概念和特性。 4. 社区参与：加入Vue.js社区，与其他开发者交流经验和问题。你可以在社区中提问、阅读他人的问题和解答，这有助于你拓宽视野并深入理解Vue.js。 5. 扩展学习：除了Vue.js本身，你还可以学习相关的技术栈，如Vue Router、Vuex、Element UI等，以提升你的Vue.js开发能力。 记住，学习任何新技术都需要时间和实践。持续学习和实践是掌握Vue.js的关键。祝你学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值