四、Vue的基础案例汇总

已于 2024-08-28 17:07:39 修改
阅读量470 收藏 4
点赞数 18
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2024-08-28 11:16:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59362850/article/details/141634360
版权

一、v-on-内联语句

效果：

给按钮添加事件，实现功能，代码：

<!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">
  <title>Document</title>
</head>

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

</html>

二、v-on 配置methods函数

点解切换显示隐藏，代码如下

<!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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app4 = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn () {
          // 让提供的所有methods中的函数，this都指向当前实例
          // console.log('执行了fn', app.isShow)
          // console.log(app3 === this)
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</html>

三、v-on 传递参数

<!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">
  <title>Document</title>
  <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)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

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

</html>

四、v-bind绑定

将图片绑定默认值：

<!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">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- v-bind:src   =>   :src -->
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })

  </script>
</body>
</html>

五、案例-波仔的学习之旅

<!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">
  <title>Document</title>
</head>
<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/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>
</html>

六、v-for指令

<!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">
  <title>Document</title>
</head>
<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/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲']
      }
    })
  </script>
</body>
</html>

七、书架案例

效果：

代码：

<!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">
  <title>Document</title>
</head>
<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>
        <!-- 注册点击事件 →  通过 id 进行删除数组中的 对应项 -->
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/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) {
          // console.log('删除', id)
          // 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)
          // filter: 根据条件，保留满足条件的对应项，得到一个新数组。
          // console.log(this.booksList.filter(item => item.id !== id))
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>
</html>

八、v-for-key案例

<!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">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="(item, index) in booksList">
        <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/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) {
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>
</html>

九、v-model

<!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">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<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/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>
</html>

员大头硬花生
关注
专栏目录
vue指令大全
xm1037782843的博客
06-10 870
闲来无事，最近在总结笔记，也买了一本vue入的书，总结一下知识点指令： v-on指令作用：为HTML元素绑定事件监听语法：v-on：事件名称='函数名称()'简写语法：@事件名称='函数名称()'注：函数定义在methods配置项中练习指令 对数组的增删 截图代码v-show指令作用：控制切换一个元素的显示和隐藏display属性控制语法：v-show=表达式根据表达式结果的真假，确定是否显示当前...
Vue常用插件汇总
2401_84435942的博客
04-29 845
使用Vue2.0+vue-router+vuex创建的zhihudaily。- 从零构建vue2 + vue-router + vuex 开发环境。- 使用vue2.0 vue-router vuex模拟ios7。- 支持 vuecli 的 Element UI 的后台模板。- 应用于Vue.js的Vue-ShortKey 插件。- 使用Vue2.0 和Vuex的vue-blog。- 精简版的ofvue-hackernews-2。- 使用带有Django的vuejs的样板项目。
Vue 有哪些常用的指令
m0_57184906的博客
04-06 1859
v-show底层原理：切换 css 的 display: none 来控制显示隐藏。v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）v-else与v-else-if。key作用：给元素添加的唯一标识。数组有多少项，就遍历多少次。数据变化 → 视图自动更新。视图变化 → 数据自动更新。
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue的指令
weixin_30377461的博客
06-29 744
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
vue指令
wjw0125的博客
01-11 386
总结 v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上 v-html v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示 v-show v-show 是一个控制元素显示隐藏的指令 他是通过css样式（display:none）控制dom的显示隐藏 v-if v-if 也是一个控制元素显示隐藏...
2、vue中有哪些指令
qq_36742720的博客
07-19 219
1、v-text 2、v-html 3、v-if 4、v-show 5、v-for 6、v-bing(:) 7、v-on(@)
vue大数据可视化（大屏展示） 模板案例分享 Ps
11-01
在这个模板案例中，我们将深入探讨如何使用 Vue.js 进行大数据的可视化呈现。 首先，我们要理解大数据的概念。大数据是指规模巨大、类型多样、增长迅速且处理难度高的数据集，其价值在于通过分析发现潜在模式和洞察...
Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )
Python+大数据+数据分析+自动化+Vue组件开发
06-28 751
前言 前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的，具体使用方式将在下面进行详细介绍，先说说这种方式来实现组件间的通信有什么缺点。 缺点： 以 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 项目案例中的最外层组件 App.vue 的这段代码里的:checkTodo事件来看。 因为 App.vue 组件的子组件 ListItem.vue 需要调用 App.vue
Vue3 基础知识点汇总 自学笔记，记录难点 和 新知识点
艾米的猫儿的博客
07-31 310
vue3
vue&vuex求和案例
xing942012的博客
01-10 1735
首先win+r，cmd，npm create ABC创建一个项目，在components中创建两个vue文件，一个用来写普通的vue求和案例，另一个用vuex来写 vue求和 App.vue <template> <div> <vueCount></vueCount> <hr /> <Student></Student> </div> </template> <scri
vue各指令
sky_moon_y的博客
05-25 993
vue指令 说指令之前当然要先引入文件了，强烈推荐敲代码的时候，为了方便，尽量使用vue.js。当提交的时候用压缩的vue.min.js。 v-show指令就相当于anghualarJs中的ng-hide/ng-show 以下代码为例： -今天天气真好，适合于逛街 script部分：
vue常用命令
Smile_Monica的博客
12-28 323
1.查看vue-cli版本，其实间接地是查看vue的版本，命令如下： vue -V 2.全局安装vue-cli: npm install -g vue-cli 3.查看vue有哪些版本： npm view indicative versions 4.安装固定版本 npm -g install npm@版本号 5.升级vue 方式一 npm install -g @vue...
vue常用指令
wdfx100的专栏
01-09 465
一、v-bind的基本用法。 vue的属性绑定一般都用v-bind来绑定属性 v-bind可以简写为：，例如：&lt;a v-bind:href="url"&gt;链接&lt;/a&gt;可简写为：&lt;a :href="url"&gt; 属性值可包含 src,title,class,href等 bind的属性值对应data中的变量 例： &lt;p :style=...
vue的常用指令
初漾的博客
10-07 1484
vue指令下面将介绍Vue中常用的几个内置指令。当然，Vue除了内置指令，也可以根据需求自定义指令。v-if指令条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值，语法如下：v-if = "expression"v-show指令条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于
vue的指令有哪些
weixin_43079157的博客
11-13 657
一、指令一: 强制数据绑定 功能: 指定变化的属性值 完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行 简洁写法: :xxx=‘yyy’ 二、指令二: 绑定事件监听 功能: 绑定指定事件名的回调函数 完整写法: v-on:keyup=‘xxx’ v-on:keyup=‘xxx(参数)’ v-on:keyup.enter=‘xxx’ 简洁写法: @keyup=‘x...
Vue常用指令
Assassinhao的博客
01-04 571
*指令：**带有v-前缀的特殊属性。**指令的作用：**当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
springboot mybatisplus vue多表(订单和订单明细)含参数分组汇总查询案例
最新发布
09-09
在Spring Boot、MyBatisPlus和Vue.js项目中，处理多表关联查询，比如订单和订单明细的数据，通常涉及到从数据库中获取包含订单信息以及明细信息的结果，并按某个字段进行分组和汇总计算。这里提供一个简化的案例概述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值