vue学习的总结，用vue实现一个简单的书籍购物车

最新推荐文章于 2022-03-01 18:22:14 发布

一个努力小白

最新推荐文章于 2022-03-01 18:22:14 发布

阅读量586

点赞数 1

分类专栏：复习内容文章标签： vue.js html javascript css 前端

本文链接：https://blog.csdn.net/thisisyourkingdom/article/details/105736713

版权

复习内容专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近学习了vue对学习的内容做了以下总结：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./js/vue.js"></script>
  <title>Document</title>
  <style>
    [v-cloak]{
      display: none;
    }
    .objcolor {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>          <!--斗篷：防止在Vue还未加载的时候显示乱码-->
      <p>代号:{{name}} </p>     <!--插值表达式-->
      <p v-once>{{number + ":" + name}}</p>  <!--让数据不动态改变-->
      <p v-html="html">{{html}}</p>   <!--将html代码进行解析，使得Vue能够认识-->
      <p v-text="name"></p>       <!--将data中的数据展示出来，但是标签内不能够写别的东西，不然会被替换-->
      <p v-pre>{{name}}</p>       <!--取消Vue对本行内容的解析-->
      <p v-bind:class="bindcolor">  <!--v-bind动态绑定属性，-->
          {{number}}
      </p>          
      <p :class="{objcolor:iscolor}" @click="change"> <!--v-bind绑定属性，对象语法v-bind:class={"类名：值，类名：Boolean"}-->
        {{number}}
      </p>
      <p :class="[bindcolor]"><!--v-bind绑定属性，数组语法v-bind:class="[定义在data中的类名]"-->
        代号：{{name}}
      </p>
      <p :style="{color:'red'}">{{name}}</p>
      <p :style=stylecolor()>{{name}}</p>
      <p :style="[stylcolor]">{{name}}</p>
      <!--绑定style语法：对象语法：v-bind:style="{属性名：'属性值'}"
      数组语法：v-bind：style="[将style以{属性名:'属性值'}的形式绑定在data中的名字]"-->
      <p>{{hw}}</p>
      <ul>
        <li v-for="sj in iphon">    <!-- v-for="（自定义的名字，index（下标）） in （遍历的对象）"，循环遍历对象-->
          编号：{{sj.id}} - 名字：{{sj.name}} - 价格：{{sj.price}}
        </li>
      </ul>
      <h2>总价：{{all}}</h2>
      <div>               <!-- v-on:监听的事件="运行的函数方法"，本例就是监听点击次数-->
        <h5 >点击次数：{{cs}}</h5>
        <button @click="djnumber">按钮</button>
      </div>
      
      
      




    </div>
  <script>
    new Vue({
      el:"#app",        //挂载在那个位置
      data:{          //数据
          number:"代号",
          name:"black",
          html:"<h3>代号小黑</h3>",
          bindcolor:"objcolor",
          iscolor:'true',
          stylcolor: {color:'red'},
          iphon:[
            {
              id:1,
              name:"华为",
              price:1800
            },
            {
              id:2,
              name:"华为2",
              price:1800
            },
            {
              id:3,
              name:"华为3",
              price:1800
            },
            {
              id:4,
              name:"华为4",
              price:1800
            }
          ],
          cs:0
      },
      methods: {        //定义方法
        change(){
          return this.iscolor = !this.iscolor
        },
        stylecolor:function(){
          return  {color:'red'}
        },
        djnumber(){   //点击次数
          return this.cs++
        }
      },
      computed: {             //计算属性
        hw(){       //以方法的形式定义，以变量的形式使用
          return this.number+":"+this.name
        },
        all(){      //计算4个华为的总价
          let sevire = 0;
          for(let i = 0; i<this.iphon.length; i++){
            sevire += this.iphon[i].price
          }
          return sevire
        },
        
      },
    })
  </script>
</body>
</html>

还顺手写了一个购物车的小案例，有兴趣的可以看看哈，有问题的地方希望各位大佬帮忙指出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    table{
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th, td{
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: center;
    }
    th{
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>
  <script src="./js/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="books.length">       <!--判断如果books这个数组有长度执行以下-->
      <table>
        <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>价格</th>
            <th>日期</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book,index) in books">    <!--循环遍历books这个数组内的内容-->
            <td>{{book.id}}</td>                <!--显示书籍的id-->
            <td>{{book.name}}</td>              <!--显示书籍的名字-->
            <td>{{book.price | fprice}}</td>    <!--显示书籍的价格，fprice是一个过滤器方法-->
            <td>{{book.data}}</td>              <!--显示书籍日期-->
            <td>
              <button @click="decrease(index)" :style="disappear(index)">-</button>   <!--一个减号按钮，监听点击事件并执行decrease方法，动态绑定属性disappear函数-->
              {{book.count}}                    <!--显示书籍数量-->                                    
              <button @click="increase(index)">+</button>                             <!--一个加号按钮，监听点击事件并执行increase方法 -->
            </td>
            <td>
              <button @click="remove(index)">删除</button>                            <!--一个删除按钮，监听点击事件并执行remove方法-->
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价：{{allprice | fprice}}</h2>     <!--显示书籍总价，使用过滤器显示小数点后两位和"$"符号-->
    </div>
    <div v-else>    <!--如果为空执行以下代码-->
      <h2>
        {{text}}            <!--使用插值表达式显示数据text的内容-->
      </h2>
    </div>
      
  </div>
  <script>
    const vm = new Vue({
      el:"#app",            //将vue挂载到app上
      data:{                //定义需要使用到的数据
        books:[             //所有书籍的数据
          {
            id:1,
            name:"《算法导论》",
            data:"2006-09",
            price:85.00,
            count:1
          },
          {
            id:2,
            name:"《UNIX编程算法艺术》",
            data:"2006-02",
            price:50.00,
            count:1
          },
          {
            id:3,
            name:"《编程珠玑》",
            data:"2018-10",
            price:39.00,
            count:1
          },
          {
            id:4,
            name:"《代码大全》",
            data:"2006-09",
            price:128.00,
            count:1
          },
          {
            id:5,
            name:"《Vue.js入门》",
            data:"2015-09",
            price:160.00,
            count:1
          }
        ], 
        text:"您的购物车为空"  
      },
      methods: {            //用于定义方法
        increase(index){            //添加书籍的数量，需要传入index是因为需要知道是哪一本书籍被点击添加了
          this.books[index].count++
        },
        decrease(index){            //减少书籍的数量，需要传入index是因为需要知道是哪一本书籍被点击减少了
          this.books[index].count--
        },
        disappear(index){           //判断当书籍数量为1时，将“-”这个按钮删除掉
          if(this.books[index].count <= 1){
            return{display:'none'}
          }
        },  
        remove(index){              //从购物车中移除这本数的所有信息，通过splice方法从数组中删除书籍的index以达到删除书籍所有信息的目的
          return this.books.splice(index,1)
        }
      },
      computed: {                   //计算属性
        allprice(){                 //用于计算书籍的总价，定义一个变量用于储存价格，循环给变量加上每一种书籍的总价，返回变量
          let resut = 0;
          for(let i = 0; i < this.books.length; i++){
            resut += this.books[i].price*this.books[i].count
          }
          return resut
        }
      },
      filters: {                    //过滤器
        fprice(price){              //给价格添加上"$"和显示小数点后两位
          return "$" +price.toFixed(2);
        }
      }
    })
  </script>
</body>
</html>