• 2022-08-27 第五组 张明敏 学习笔记

    目录

    一、Vue

    1、简介

    2、使用

    3.指令

    内置指令

    4.事件修饰符

    Vue中的事件修饰符:

    案例:

    1.点餐

    2.动态显示隐藏

    3.图片轮播 

    一、Vue

    1、简介

    1.vue是一套用于构建用户界面的渐进式JavaScript框架
    2.特点：

    • 采用组件化模式，提高代码复用率、且让代码更好维护
    • 声明式编码，让编码人员无需直接操作DOM，提高开发效率
    • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

    2、使用

    1.  <script src="js/vue.js">script>
    2.     <script>
    3.         const app = new Vue({
    4.             el:"app",
    5.             data: {
    6.                 msg:"hello Vue",
    7.             },
    8.         })
    9.     script>

    3.指令

    内置指令

    v-bind : 单向数据绑定，可简写为:xxx
    v-model : 双向数据绑定
    v-for : 遍历数组/对象/字符串
    v-on : 绑定事件监听，可简写为@
    v-if : 条件渲染(动态控制节点是否存存在)
    v-else : 条件渲染(动态控制节点是否存存在)
    v-show : 条件渲染(动态控制节点是否展示)
    v-text :   1.作用:向其所在的节点中渲染文本内容。
                  2.与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不会。
    v-html:   1.作用:向指定节点中渲染包含html结构的内容。
                  2.与插值语法的区别
                      (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
                      (2).v- html可以识别html结构。
                   3.严重注意: v-html有安全性问题! ! ! !

    4.事件修饰符

    Vue中的事件修饰符:

    1.prevent:阻止默认事件
    2.stop: 阻止事件冒泡
    3.once:事件只触发一次
    4.capture:使用事件的捕获模式:
    5.self:只有event.target是当前操作的元素时才触发事件
    6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

    案例:

    1.点餐

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .dc{
    10.             height: 400px;
    11.             width: 600px;
    12.             background-color: pink;
    13.         }
    14.     style>
    15.  
    16. head>
    17. <body>
    18.     <div id="app">
    19.     <h1>{{msg}}h1>
    20.         <button value="-"  @click="subcount">-button> 
    21.         <span>{{count}}span>
    22.         <button value="+" @click="addcount">+button>
    23.  
    24. div>
    25.     
    26.     <script src="js/vue.js">script>
    27.     <script>
    28.         const app = new Vue({
    29.             el:"#app",
    30.             data: {
    31.                 msg:"欢迎来到本小店",
    32.                 count:0,
    33.             },
    34.             methods: {
    35.                 addcount:function(){
    36.                     if (this.count==10){
    37.                         alert("不能再多了")
    38.                     }else{
    39.                         this.count++;
    40.                     }
    41.                 },
    42.                 subcount(){
    43.                     if (this.count==0){
    44.                         alert("不能再多少了")
    45.                     }else{
    46.                         this.count --;
    47.                     }
    48.                 },
    49.             }
    50.           
    51.         });
    52.     script>
    53. body>
    54. html>

      

    2.动态显示隐藏

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.  
    9. head>
    10. <body>
    11.     <div id="app">
    12.         <h1 v-show="flag">{{msg}}h1>
    13.         <button v-test="text" @click="toggleshow">显示/隐藏button>
    14.     div>
    15.     <script src="js/vue.js">script>
    16.     <script>
    17.         const app =new Vue({
    18.             el:"#app",
    19.             data:{
    20.                 msg:"欢迎使用Vue",
    21.                 flag: true,
    22.                 text: "显示",
    23.             },
    24.             methods: {
    25.                 toggleshow(){
    26.                     this.flag = !this.flag;
    27.                     if(!this.flag){
    28.                         this.text = "隐藏";
    29.                     }else{
    30.                         this.text = "显示";
    31.                     }
    32.                 }
    33.             },
    34.         })
    35.     script>
    36.  
    37. body>
    38. html>

     

    3.图片轮播 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     style>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         <img :src="src">
    13.         <br>
    14.         <button @click="changeimg">切换图片button>
    15.     div>
    16.  
    17.     <script src="js/vue.js">script>
    18.     <script>
    19.          const app = new Vue({
    20.             
    21.             el: "#app",
    22.             data: {
    23.                src:"img/1.jpg" ,
    24.             },
    25.             methods: {
    26.                 changeimg() {
    27.                     this.src = "img/2.jpg"
    28.                 }
    29.             },
    30.         });
    31.  
    32.     script>
    33.     script>
    34. body>
    35. html>

  • 相关阅读:
    19c-srvctl注册数据库
    目标检测YOLO实战应用案例100讲-水下机器人视域中小目标检测（中）
    针对直播痛点的关键技术解析——首帧秒开、清晰度、流畅度
    搞透 IOC，Spring IOC 看这篇就够了！
    酷开科技为你的电视增添魅力，点亮每一个娱乐瞬间！
    使用Python查询域名IP地址归属方法
    Java接入sqlserver的一些坑点记录
    MySQL 锁常见知识点&面试题总结
    机器学习性能评估指标
    深度学习和图形学渲染的结合和应用
  • 原文地址：https://blog.csdn.net/qq_50392643/article/details/126561391