• Vue--1.4Vue指令

    Vue会根据不同的指令，针对标签实现不同的功能。

    指令：带有v-前缀的特殊标签属性

    v-前缀="表达式"

    1.v-html

    作用:动态解析标签innerHTML

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <div v-html="msg"></div>
    12. </div>
    13. </body>
    14. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    15. <script>
    16.     const app=new Vue({
    17.         el:'#app',
    18.         data:{
    19.             msg:'黑马程序员'
    20.         }
    21.     })
    22. </script>
    23. </html>

    2.v-show

    作用：控制元素显示隐藏

    语法：v-show=“表达式” 表达式值true显示，false隐藏

    原理：从css角度进行了隐藏，添加了display:none;

    场景：频繁切换显示隐藏的场景

    3.v-if

    作用：控制元素显示隐藏（条件渲染）

    语法：v-if=“表达式” 表达式值true显示，false隐藏

    场景：要么显示，要么隐藏，不频繁切换的场景

    4.v-else v-else-if

    作用：辅助v-if进行判断渲染

    语法：v-else v-else-if=“表达式”

    注意：需要紧挨着v-if一起使用

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <p v-if="gender==1">性别：男</p>
    12.     <p v-else>性别：女</p>
    13.     <hr>
    14.     <p v-if="score>=90">成绩评定A:奖励电脑一台</p>
    15.     <p v-else-if="score>=75">成绩评定B:奖励周末郊游</p>
    16.     <p v-else-if="score>=60">成绩评定C:奖励零食礼包</p>
    17.     <p v-else>成绩评定D:奖励一周不能玩手机</p>
    18. </div>
    19. </body>
    20. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    21. <script>
    22.     const app=new Vue({
    23.         el:'#app',
    24.         data:{
    25.             gender:1,
    26.             score:80
    27.         }
    28.     })
    29. </script>
    30. </html>

    5.v-on

    作用：注册事件=添加监听+提供处理逻辑

    语法：1）v-on：事件名=“内联语句”

    2）v-on：事件名=“methods中的函数名”

    简写：@事件名=""

    注意：methods函数内的this指向Vue实例

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <!-- 鼠标点击 -->
    12.     <button @click="count--">-</button>    <!-- @=v-on: -->
    13.     <span>{{count}}</span>
    14.     <button v-on:click="count++">+</button>
    15.     <hr>
    16.     <!-- 鼠标划入 -->
    17.     <button v-on:mouseenter="count--">-</button>
    18.     <span>{{count}}</span>
    19.     <button v-on:mouseenter="count++">+</button>
    20.     <hr>
    21.     <button @click="fn">切换显示隐藏</button>
    22.     <h1 v-show="isShow">黑马程序员</h1>
    23. </div>
    24. </body>
    25. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    26. <script>
    27.     const app=new Vue({
    28.         el:'#app',
    29.         data:{
    30.             count:0,
    31.             isShow:true
    32.         },
    33.         methods:{
    34.             //methods中的函数使用this都指向当前实例
    35.             fn(){
    36.                 app.isShow=!app.isShow  //this.isShow=!this.isShow
    37.             }
    38.         }
    39.     })
    40. </script>
    41. </html>

    v-on调用传参

    实例：饮料自动贩卖机

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <div style="border:2px solid #000;width:140px;height:auto;padding:20px;border-radius:15px;">
    12.         <h3>饮料自动售货机</h3>
    13.         <button @click="buy(5)">可乐5元</button>
    14.         <button @click="buy(10)">咖啡10元</button>
    15.     </div>
    16.     <p>银行卡余额:{{money}}元</p>
    17. </div>
    18. </body>
    19. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    20. <script>
    21.     const app=new Vue({
    22.         el:'#app',
    23.         data:{
    24.             money:100
    25.         },
    26.         methods:{
    27.             buy(a){
    28.                 this.money-=a
    29.             }
    30.         }
    31.     })
    32. </script>
    33. </html>

    6.v-bind

    作用：动态的设置html的标签属性->src url title......

    语法：v-bind:属性名=“表达式”

    简写：:属性名=“表达式”

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <!-- v-bind:src可简写为:src -->
    12.     <img v-bind:src="imgUrl" v-bind:title="msg">
    13. </div>
    14. </body>
    15. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    16. <script>
    17.     const app=new Vue({
    18.         el:'#app',
    19.         data:{
    20.             imgUrl:'./image/logo.jpeg',
    21.             msg:'hello Vue'
    22.         }
    23.     })
    24. </script>
    25. </html>

    实例：图片轮播

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <button @click="i--" v-show="i>0">上一页</button>
    12.     <img :src="imgList[i]" style="width:300px;">
    13.     <button @click="i++" v-show="i>下一页</button>
    14. </div>
    15. </body>
    16. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    17. <script>
    18.     const app=new Vue({
    19.         el:'#app',
    20.         data:{
    21.             i:0,
    22.             imgList:[
    23.                 './image/1.jpg',
    24.                 './image/2.jpg',
    25.                 './image/3.jpg',
    26.             ]
    27.         }
    28.     })
    29. </script>
    30. </html>
    v-bind对于样式控制的增强

    为了方便开发者进行样式控制，vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。还要注意样式优先级。

    操作class语法： :class="对象/数组"

    1）对象->键就是类名，值是布尔值。如果值为true,有这个类，否则没有这个类。

    <div class="box" :class="{类名1:boolean，类名2:boolean}"></div>

    适用场景：一个类名，来回切换

    2)数组->数组中所有的类，都会添加到盒子上，本质就是一个class列表

    <div class="box" :class="['类名1','类名2','类名3']"></div>

    适用场景：批量添加或删除类

    案例：tab导航高亮

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8.   <style>
    9.     .tab li{
    10.         width:100px;
    11.         height:40px;
    12.         float:left;
    13.         text-align:center;
    14.         font:700 18px simsun;
    15.         line-height:40px;
    16.         color:#000;
    17.     }
    18.     .tab li a{
    19.         text-decoration:none;
    20.     }
    21.     .active{
    22.         background-color:#409EFF;
    23.         color:#fff;
    24.     }
    25.     .active a{
    26.         color:#fff;
    27.     }
    28.   </style>
    29. </head>
    30. <body>
    31. <div id="app">
    32.     <ul class="tab" style="list-style:none;" v-for="(item,index) in list" :key="item.id" @click="activeIndex=index" @mouseover="activeIndex=index">
    33.         <li :class="{active:index==activeIndex}">
    34.             <a href="#">{{item.name}}</a>
    35.         </li>
    36.     </ul>
    37. </div>
    38. </body>
    39. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    40. <script>
    41.     const app=new Vue({
    42.         el:'#app',
    43.         data:{
    44.             activeIndex:0,
    45.             list:[
    46.                 {id:0,name:"京东秒杀"},
    47.                 {id:1,name:"每日特价"},
    48.                 {id:2,name:"品类秒杀"}
    49.             ]
    50.         }
    51.     })
    52. </script>
    53. </html>

    操作style语法：:style="样式对象"

    注意：js中不支持-的属性名，例如：background-color应该加引号，或者使用驼峰式命名法写成backgroundColor。

    <div class="box" :style="{css属性名1:'css属性值',css属性值2:'css属性值'}"></div>

    适用场景:某个具体属性的动态设置

    案例：进度条

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8.   <style>
    9.     .progress{
    10.         width:400px;
    11.         height:30px;
    12.         background-color: #409EFF;
    13.         border-radius:20px;
    14.         border:2px solid #409EFF;
    15.     }
    16.     .inner{
    17.         width:100px;
    18.         height:30px;
    19.         background-color: #fff;
    20.         border-radius:20px;
    21.         transition:all 1s;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26. <div id="app">
    27.     <div class="progress">
    28.         <div class="inner" :style="{width:innerWidth+'%'}">
    29.             <span style="line-height:30px;float:right;">{{innerWidth+"%"}}</span>
    30.         </div>
    31.     </div>
    32.     <button @click="innerWidth=10">10%</button>
    33.     <button @click="innerWidth=70">70%</button>
    34. </div>
    35. </body>
    36. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    37. <script>
    38.     const app=new Vue({
    39.         el:'#app',
    40.         data:{
    41.             innerWidth:"50"
    42.         }
    43.     })
    44. </script>
    45. </html>

    7.v-for

    作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字...

    语法：v-for=“(item,index) in 数组”  item是每一项，index是下标

    如果不需要index，可简写为v-for=“item in 数组”

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <h3>水果店</h3>
    12.     <ul>
    13.         <li v-for="(item,index) in list">{{item}}</li>
    14.         <li v-for="item in list">{{item}}</li>
    15.     </ul>
    16. </div>
    17. </body>
    18. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    19. <script>
    20.     const app=new Vue({
    21.         el:'#app',
    22.         data:{
    23.             list:['西瓜','葡萄','桃子']
    24.         }
    25.     })
    26. </script>
    27. </html>

    实例：书架

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <h3>书架</h3>
    12.     <ul>
    13.         <li v-for="(item,index) in booksList">
    14.             <span>{{item.name}}</span>
    15.             <span>{{item.author}}</span>
    16.             <button @click="del(item.id)">删除</button>
    17.         </li>
    18.     </ul>
    19. </div>
    20. </body>
    21. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    22. <script>
    23.     const app=new Vue({
    24.         el:'#app',
    25.         data:{
    26.             booksList:[
    27.                 {id:1,name:'《红楼梦》',author:'曹雪芹'},
    28.                 {id:2,name:'《西游记》',author:'吴承恩'},
    29.                 {id:3,name:'《水浒传》',author:'施耐庵'},
    30.                 {id:4,name:'《三国演义》',author:'罗贯中'}
    31.             ]
    32.         },
    33.         methods:{
    34.             del(id){
    35.                 //filter:根据条件，保留满足条件的对应项，得到一个新数组
    36.                 //箭头函数filter(item=>item.id!==id)相当于filter(item){item.id!==id}
    37.                 this.booksList=this.booksList.filter(item=>item.id!=id)
    38.             }
    39.         }
    40.     })
    41. </script>
    42. </html>
    v-for中的key

    语法：：key=""

    作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

    如果不添加key，那么v-for的默认行为会尝试原地修改元素（就地复用）

    注意点：

    1）key的值只能是字符串或数字类型

    2）key的值必须具有唯一性

    3）推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

    <li v-for="(item,index) in xxx" :key="xxx.id"></li>

    8.v-model

    作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容

    1)数据变化->试图自动更新

    2)视图变化->数据自动更新

    语法：v-model='变量'

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     账户：<input type="text" v-model="username"><br><br>
    12.     密码：<input type="password" v-model="password"><br><br>
    13.     <button @cilck="login">登录</button>
    14.     <button @click="reset">重置</button>
    15. </div>
    16. </body>
    17. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    18. <script>
    19.     const app=new Vue({
    20.         el:'#app',
    21.         data:{
    22.             username:'',
    23.             password:''
    24.         },
    25.         methods:{
    26.             login(){
    27.                 console.log(this.username)
    28.             },
    29.             reset(){
    30.                 this.username='',
    31.                 this.password=''
    32.             }
    33.         }
    34.     })
    35. </script>
    36. </html>

    v-model应用于其他表单元素，会根据控件类型自动选取正确的方法来更新元素。

    案例：表单

    1. <!doctype html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="Author" content=""/>
    6.   <meta name="Keywords" content=""/>
    7.   <meta name="Description" content=""/>
    8. </head>
    9. <body>
    10. <div id="app">
    11.     <h3>学习网</h3>
    12.     姓名:<input type="text" v-model="name">
    13.     <br><br>
    14.     是否单身:<input type="checkbox" v-model="isSingle">
    15.     <br><br>
    16.     性别:
    17.     <input v-model="gender" type="radio" name="gender" value="1">男
    18.     <input v-model="gender" type="radio" name="gender" value="2">女
    19.     <br><br>
    20.     所在城市:
    21.     <select v-model="city">
    22.         <option value="beijing">北京</option>
    23.         <option value="shanghai">上海</option>
    24.         <option value="chengdu">成都</option>
    25.         <option value="nanjing">南京</option>
    26.     </select>
    27.     <br><br>
    28.     自我描述：
    29.     <textarea v-model="desc"></textarea>
    30.     <br><br>
    31.     <button>立即注册</button>
    32. </div>
    33. </body>
    34. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    35. <script>
    36.     const app=new Vue({
    37.         el:'#app',
    38.         data:{
    39.             name:"",
    40.             isSingle:false,
    41.             gender:"1",
    42.             city:"beijing",
    43.             desc:""
    44.         }
    45.     })
    46. </script>
    47. </html>

  • 相关阅读:
    docker 安装oracle
    分布式任务队列系统 celery 进阶
    【STM32/FreeRTOS】SysTick定时器及FreeRTOS系统节拍
    C++ 01背包
    python读文件如何不换行，以及python写文件后怎么换行
    【前端】搭建 Vite + P5.js 项目
    云计算基础-存储基础
    【BSP开发之uboot】uboot常用命令以及代码分析
    字符串最后一个单词的长度
    ubuntu基本配置
  • 原文地址：https://blog.csdn.net/weixin_46479909/article/details/132759481