Vue学习笔记：基础语法（二）

最新推荐文章于 2024-06-12 15:53:59 发布

hejianghaoswu

最新推荐文章于 2024-06-12 15:53:59 发布

阅读量332

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/hejianghaoswu/article/details/118975943

版权

一、v-on：事件监听

v-on基本介绍：
作用：绑定事件监听器
语法：v-on：click=“function”
语法糖：@click=“function”

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>

    <script>
        window.onload=function () {
            let app = new Vue({
              el: "#app",
              data:{
                count:0
              },
              methods:{
                add(){
                  console.log("add被调用")
                  this.count++
                },
                sub(){
                  console.log("sub被调用")
                  this.count--
                }
              }
        })
        }
    </script>

</head>
<body>


<div id="app">
    <span>{{count}}</span>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>

</body>

在这里插入图片描述
2. v-on参数传值问题

情况一：如果方法不需要额外的参数，则方法后的（）可以省略，例如写成@click=“add”

情况二：如果方法需要额外的参数时，并省略了方法后的（），则默认将原生事件event传入进方法中

情况三：如果方法同时需要额外参数和原生事件时，要写成@click=“fun（index，$event）”

v-on修饰符介绍

stop:阻止冒泡事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>

    <script>
        window.onload=function () {
            let app = new Vue({
              el: "#app",
              data:{
                count:0
              },
              methods:{
                btnFun(){
                  console.log("按下了button")
                },
                divFun(){
                  console.log("按下了div")
                }
              }
        })
        }
    </script>

</head>
<body>


<div id="app">

  <div @click="divFun">
    <button @click="btnFun"></button>
  </div>

</div>

</body>
</html>

不使用stop时候，会出现这样的结果：
在这里插入图片描述
使用stop，修改成这样：

<div id="app">

  <div @click="divFun">
    <button @click.stop="btnFun"></button>
  </div>

</div>

会阻止div点击事件冒泡:
在这里插入图片描述
prevent:阻止默认行为，比如说submit按钮，如果绑定上这个修饰符，那么点击的时候就会阻止它发生页面跳转。

二、v-if 和 v-else条件判断

如果v-if=“true”，则进行对元素及其子元素进行渲染，如果是v-if=“false”，则元素及其子元素不会进行渲染，也就是根本不会有对应的标签出现在DOM里面。
v-else和v-if的结果相反。

例子：

<span v-if="false">华为</span>
<span v-else>小米</span>

  <span v-if="true">苹果</span>
  <span v-else>三星</span>

在这里插入图片描述
三、v-show条件判断

v-show和v-if的作用很相似，区别在于当v-show=“false”时候，元素是被隐藏起来的，加了一个display：none，会存在于DOM中

四、v-for遍历

v-for遍历数组和对象：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          movies:['变形金刚','终结者','侏罗纪公园','星球大战'],
          customer:{name:"张三",age:22,income:"20w"}
        }
      })
    }
  </script>

</head>
<body>


<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
  <ul>
    <li v-for="(item,index) in movies">{{index}} {{item}}</li>
  </ul>
  <ul>
    <li v-for="value in customer">{{value}}</li>
  </ul>
  <ul>
    <li v-for="(value,key) in customer">{{key}} {{value}}</li>
  </ul>
</div>

</body>
</html>

在这里插入图片描述
需要注意的是

在对对象进行遍历的时候，默认遍历的是对象的value值而不是键值
通过数组索引值修改后的数据不能被响应式的渲染在DOM上

五、购物车案例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <style>
    table{
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th,td{
      border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: left;
    }
    th{
      background: deepskyblue;
      color: cyan;
      font-size: 14px;
    }
  </style>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          isRemove:true,
          books:[{id:1,name:"数据结构与算法",date:"2006-9",price:65,count:0},
            {id:2,name:"Java程序与设计",date:"2008-11",price:75,count:0},
            {id:3,name:"HeadFirst Html和CSS",date:"2007-9",price:67,count:0},
            {id:4,name:"JavaScript高级程序设计",date:"2004-9",price:92,count:0},
            {id:5,name:"CSS解密",date:"2002-8",price:80,count:0}]
      },
        methods:{
          add(index){
             this.books[index].count++
          },
          sub(index){
            if (this.books[index].count>0){this.books[index].count--}
          },
          removeFun(index){
              this.books.splice(index,1);
              if (this.books.length==0){
              this.isRemove = false;
            }
          }
        },
        computed:{
          totalPrice(){
            let x=0;
            for (let i =0; i<this.books.length;i++){
              x += this.books[i].count*this.books[i].price
            }
            return x;
          }
        }
      })
    }
  </script>

</head>
<body>
<div id="app">
  <div v-if="isRemove">
    <table>
    <thead>
    <tr>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
      <td>{{item.price}}</td>
      <td><button @click="sub(index)">-</button>{{item.count}}<button @click="add(index)">+</button></td>
      <td><button @click="removeFun(index)" >移除</button></td>
    </tr>
    <span>总价格{{totalPrice}}</span>

    </tbody>
  </table>
  </div>

</div>

</body>
</html>

** 加粗样式
**

hejianghaoswu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记：基础语法（二）

一、v-on：事件监听v-on基本介绍：作用：绑定事件监听器语法：v-on：click=“function”语法糖：@click=“function”<head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> <script> window.onloa
复制链接

扫一扫