[JavaScript知识库] Vue学习笔记：基础语法（二）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习笔记：基础语法（二） -> 正文阅读

[JavaScript知识库]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.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>