Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解-阿里云开发者社区

前言

前面我们学习了Vue的基础入门，接下来我们学习有关Vue的模板语法，学习Vue语法能提高我们的前端开发效率

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少

一，插值

1.1 文本

{{msg}}

<body>
    <div  id="wenben">
      <h1>文本</h1>
       {{msg}}
    </div>
  <script >
    new Vue({
    el:'#wenben',
    data(){
      return{
        msg:"Hello Smart!"
      }
    }
    });
  </script>

1.2 html

使用v-html指令用于输出html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div  id="wenben">
       <p>html解析</p>
          <h1 v-html="msg2"></h1>
    </div>
  <script >
    new Vue({
    el:'#wenben',
    data(){
      return {
        msg2:'<span style="color:red;">Hello Smart!</span>'
      }
    }
    });
  </script>
  </body>
</html>

1.3 属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
   <style>
    .f40{
      font-size: 100px;
    } 
   </style>
  </head>
  <body>
    <div  id="wenben">
        <p>属性</p>
          <h1 :class="msg3" v-html="msg2"></h1>
    </div>
  <script >
    new Vue({
    el:'#wenben',
    data(){
      return {
          msg2:'<span style="color:red;">Hello Smart!</span>',
           msg3:'f40'
      }
    }
    });
  </script>
  </body>
</html>

1.4 表达式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
   <style>
    .f40{
      font-size: 40px;
    } 
   </style>
  </head>
  <body>
    <div  id="wenben">
      <!-- <h1>文本</h1> -->
       <!-- {{msg1}} -->
      <!-- <p>html解析</p>
          <h1 v-html="msg2"></h1> -->
       <!-- <p>属性</p>
       <h1 :class="msg3" v-html="msg2"></h1> -->
       <!--表达式-->
       {{num+10}},
       {{warm.substr(9,15)}},
       <input v-model="ok"/>
       {{ok==1?'被打了':'不行我要还回去'}}
    </div>
  <script >
    new Vue({
    el:'#wenben',
    data(){
      return {
        // msg1:'Hello Smart!',
        // msg2:'<span style="color:red;">Hello Smart!</span>',
           // msg3:'f40'
           num:10,
        warm:'nishigedashuaige',
        ok:1
      }
    }
    });
  </script>
  </body>
</html>

二，指令

1.v-if&v-else&v-else-if

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>指令的使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
      <div id="zz">
        <h1>v-if...的使用</h1>
        <input v-model="yanzhi"/><br/>
        <b v-if="yanzhi<60">丑男</b>
        <b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b>
        <b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b>
        <b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b>
        <b v-else=" ">吴彦祖</b>
      </div>
    </body>
    <script type="text/javascript">
      // 构建vue实例 绑定边界 
      new Vue({
        el:'#zz',
        data(){
          return{
            yanzhi:60,
          }
        },
      })
    </script>
  </body>
</html>

2.v-show

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>指令的使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
      <div id="zz">
        <h1>v-if|v-else|v-else-if的使用</h1>
        <input v-model="yanzhi"/><br/>
        <b v-if="yanzhi<60">丑男</b>
        <b v-else-if="yanzhi>=60 && yanzhi<=70">看得过去</b>
        <b v-else-if="yanzhi>70 && yanzhi<=80">小帅</b>
        <b v-else-if="yanzhi>80 && yanzhi<=90">美男子</b>
        <b v-else=" ">吴彦祖</b>
         <p v-show="yanzhi>90">>v-show-成为大神的人</p> 
         <p v-if="yanzhi>90">v-if-成为大神的人<p>
      </div>
    </body>
    <script type="text/javascript">
      // 构建vue实例 绑定边界 
      new Vue({
        el:'#zz',
        data(){
          return{
            yanzhi:60,
          }
        },
      })
    </script>
  </body>
</html>

3 v-for

类似JS的遍历：

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
    <h1>v-for的使用</h1>
    下拉框：
    <select v-model="hobbySelected">
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
    </select><br>
    复选框：
    <div v-for="h in hobby">
        <input :value="h.id" type='checkbox'/>{{h.name}}
    </div>
</div>
</body>
<script type="text/javascript">
    // 绑定边界 
    new Vue({
        el: '#app',
        data() {
            return {
                hobby: [
                    {id: "1", name: "一杀"},
                    {id: "2", name: "二杀"},
                    {id: "3", name: "三杀"},
                    {id: "4", name: "四杀"}
                ]
            };
        }
    })
</script>
</html>

4 动态参数：

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<button v-on:[evname]="dt">点击事件</button>

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过滤器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
    <!-- 定义边界 -->
      <div id="app">
        <h1>动态参数</h1>
        <input v-model="evname" />
        <button v-on:[evname]="test">点击</button>
      </div>
    <script type="text/javascript">
      // 构建vue实例 绑定边界 
      new Vue({
        el:'#app',
        data(){
          return{
          evname:'click'
        };
        },
        methods: {
          test(){
            alert("点一点更棒!");
          }
        }
      })
    </script>
</html>

三，过滤器

3.1 局部过滤器

vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过滤器的使用</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="B">
            {{msg}}<br />
      {{msg|single}}<br />
      {{msg|param(0,2)}}
    </div>
    <script type="text/javascript">
      // 绑定边界 ES6具体体现
      new Vue({
        el: '#B',
        data() {
          return {
            msg: "或许就像他们说~"
          };
        },
        filters: {
          'single': function(val) {
            return val.substring(4, 8);
          },
          'param': function(val, start, end) {
            return val.substring(start, end);
          }
        }
      })
    </script>
  </body>
</html>

3.2 全局过滤器

拷入date.js（日期格式化）放入项目js目录中，在页面中引入。

定义全局过滤器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全局过滤器</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="date.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="B">
    <h3>全局过滤器</h3>
    {{time}}<br>
    {{time | fmtDateFilter}}
</div>
</body>
<script type="text/javascript">
    // 全局过滤器
    Vue.filter('fmtDateFilter', function (value) {
        return fmtDate(value);
    });
    // 绑定边界 ES6具体体现
    new Vue({
        el: '#B',
        data() {
            return {
                time: new Date()
            };
        }
    })
</script>
</html>

四，计算属性&监听器

4.1 计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了

语法：computed:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="B">
    单价：<input v-model="price">
    数量：<input v-model="num">
    总价：<input v-model="count">
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#B',
        data() {
            return {
                price: 50,
                num: 1
            }
        },
        computed: {
            count: function () {
                return this.price * this.num
            }
        }
    })
</script>
</html>

4.2 监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="B">
    <p>监听属性</p>
    千米：<input v-model="km"/>
    米：<input v-model="m"/>
</div>
</body>
<script type="text/javascript">
    // 绑定边界 ES6具体体现
    new Vue({
        el: '#B',
        data() {
            return {
                km: 2,
                m: 2000
            };
        },
        watch: {
            // v指的是m变量
            m: function (v) {
                this.km = parseInt(v) / 1000;
            },
            // v指的是km变量
            km: function (v) {
                this.m = parseInt(v) * 1000;
            }
        }
    })
</script>
</html>

五、购物车实现

购物车代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入vue.js-->
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>购物车</title>
<style>
  th, td {
    padding: 15px;
    text-align: center;
  }
</style>
</head>
<body>
<div id="B">
  <div >
    <h1>购物车</h1>
    <table width="80%" border="1"  cellspacing="1" cellpadding="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>数量</th>
          <th>单价</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td >
            <h3 class="">{{ item.name }}</h3>
          </td>
          <td class="">
            <button @click="updatetity(item, -1)">-</button><!-- 绑定事件 -->
            <span class="quantity-label">{{ item.quantity }}</span>
            <button @click="updatetity(item, 1)">+</button>
          </td>
          <td class="">{{ item.price }}</td>
          <td>
            <p class="">{{ subtotal(item) }}</p>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3"></td>
          <td>
            <p class="" colspan="4" sty>总计{{ count() }}</p>
          </td>
        </tr>
      </tfoot>
    </center>
    </table>
  </div>
</div>
<script>
new Vue({
  el: '#B',
  data: {
    items: [
      { id: 1, name: '乒乓球', price: '$2',  quantity: 1 },
      { id: 2, name: '足球', price: '$109', quantity: 2 },
      { id: 3, name: '篮球', price: '$150',  quantity: 1 },
    { id: 4, name: '羽毛球', price: '$99',  quantity: 2 },
    ]
  },
  methods: {
    updatetity(item, amount) {
      item.quantity += amount;
    },
    subtotal(item) {
      return '$' + (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);
    },
    count() {
      let total = 0;
      for (let item of this.items) {
        total += parseFloat(item.price.slice(1)) * item.quantity;
      }
      return '$' + total.toFixed(2);
    }
  }
});
</script>
</body>
</html>

Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解

前言

一，插值

二，指令

三，过滤器

3.1 局部过滤器

3.2 全局过滤器

四，计算属性&监听器

4.1 计算属性

4.2 监听器

热门文章

最新文章

相关课程

相关电子书

相关实验场景