“Vue进阶:深入理解插值、指令、过滤器、计算属性和监听器“

简介: “Vue进阶:深入理解插值、指令、过滤器、计算属性和监听器“

引言:

Vue.js是一款流行的JavaScript框架,它提供了许多强大的功能来简化前端开发。在本篇博客中,我们将深入探讨Vue的一些高级特性,包括插值、指令、过滤器、计算属性和监听器。通过理解和灵活运用这些功能,我们可以更好地构建出丰富、高效的Vue应用程序。

Vue的插值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title></title>
    <style>
      .font-30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id = "app">
      {{msg}}<br /><hr />
      html,class绑定-------<b :class="msg3" v-html="msg2"></b><br /><hr />
      表达式----<br />
      {{num+1}}<br />
      {{str.substring(2,4)}}<br />
      <input v-model="ok" />
      {{ok==true?'yes':'no'}}<br /><hr />
    </div>
    <script>
      new Vue({
        el:"#app",
        data(){
          return{
            msg:'hello vue',
            msg2:'<span style="color:red">msg2样式</span>',
            msg3:'font-30',
            num:6,
            str:'沉谭秋叶',
            ok:true
          }
        }
      })
    </script>
  </body>
</html>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

Vue的指令

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title></title>
    <style>
      .font-30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id = "app">
      <input v-model="score" />
      <b v-if="score < 60">不合格</b>
      <b v-else-if="score >= 60 && score < 70">及格</b>
      <b v-else-if="score >= 70 && score < 80">一般</b>
      <b v-else-if="score >= 80 && score < 90">良好</b>
      <b v-else>优秀</b>
      <br /><hr />
      v-show
      <b v-show="isShow">xxx</b>
      <br /><hr />
      v-for
      <b v-for="i in arr">{{i}}-</b>
      <b v-for="i in arrs">{{i.name}}-{{i}}=</b>  <br /><hr />
      <select>
        <option>请选择</option>
        <option v-for="i in arrs" :value="i.id">{{i.name}}</option>
      </select>
      <br /><hr />
      <div v-for="i in arrs"> 
        <input type="checkbox" name="hobby" :value="i.id" />{{i.name}}
      </div>
      <br /><hr />
      <input v-model="evename"/>
      <button v-on:[evename]="text">点击</button>
    </div>
    <script>
      new Vue({
        el:"#app",
        data(){
          return{
            score:69,
            isShow:false,
            arr:['a','b','c','d'],
            arrs:[{name:'小王',id:1},{name:'小李',id:2},{name:'小桂',id:3},{name:'小勇',id:4}],
            evename:'click'
          }
        },methods:{
          text(){
            alert('点击了!!')
          }
        }
      })
    </script>
  </body>
</html>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59

Vue的过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="date.js"></script>
    <title></title>
  </head>
  <body>
    <div id = "app">
      {{msg}}<br>
      {{msg | filter1}} <br>
      {{msg | filter1 | filter2}}<br>
      {{msg | filter3(3,7)}}<br>
      <hr>
      {{time}}<br>
      {{time | filterName}}
    </div>
    <script>
      Vue.filter('filterName', function (value) {
       // value 表示要过滤的内容
       return fmtDate(value);
      });
      new Vue({
        el:"#app",
        filters:{
          'filter1':function(v){
            return v.substring(0,5)
          },
          'filter2':function(v){
            return v.substring(1,3)
          },
          'filter3':function(v,begin,end){
            return v.substring(begin,end)
          }
        },
        data(){
          return{
            msg:'允许你自定义过滤器,被用作一些常见的文本格式化,格式如下',
            time:new Date()
          }
        }
      })
    </script>
  </body>
</html>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

Vue的计算属性和监听器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title></title>
    <style>
      .font-30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id = "app">
      {{msg}}<br /><hr />
      单价<input v-model="price"/>
      数量<input v-model="num"/>
      小计{{count}}
      <br />
      千米<input v-model="km"/><br />
      米<input v-model="m"/>
    </div>
    <script>
      new Vue({
        el:"#app",
        data(){
          return{
            msg:'hello vue',
            price:88,
            num:1,
            m:1000,
            km:1
          }
        },computed:{
          count:function(){
            return this.price*this.num
          }
        },watch:{
          km:function(v){
             this.m = parseInt(v)*1000;
          },
          m:function(v){
             this.km = parseInt(v)/1000;
          }
        }
      })
    </script>
  </body>
</html>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

data.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
  //debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
function fmtDate(date, pattern) {
  var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

vue购物车案例

<!DOCTYPE html>
<html>
<head>
  <title>购物车</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
    .btn-group {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v in arr" >
          <td>{{ v.name }}</td>
          <td>{{ v.price }}</td>
          <td>
            <input type="number" v-model="v.quantity" @input="xj(v)">
          </td>
          <td>{{ v | filter1 }}</td>
          <td class="btn-group">
            <button @click="add(v)">+</button>
            <button @click="jdd(v)">-</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总计</td>
          <td>{{ total }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        arr: [
          { name: '尿不湿', price: 49, quantity: 1, subtotal: 49 },
          { name: '狼牙棒', price: 28, quantity: 1, subtotal: 28 },
          { name: '鸡毛卷', price: 36, quantity: 1, subtotal: 36 }
        ]
      },
      computed: {
        total: function() {
          return this.arr.reduce((sum, v) => sum + v.subtotal, 0);
        }
      },
      methods: {
        xj: function(v) {
          v.subtotal = v.price * v.quantity;
        },
        add: function(v) {
          v.quantity++;
          this.xj(v);
        },
        jdd: function(v) {
          if (v.quantity > 0) {
            v.quantity--;
            this.xj(v);
          }
        }
      },
      filters: {
        'filter1': function(v) {
          return v.price * v.quantity;
        }
      }
    });
  </script>
</body>
</html>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103

总结:

通过本篇博客的学习,我们深入理解了Vue的插值、指令、过滤器、计算属性和监听器这些高级特性。这些功能不仅可以帮助我们更好地处理数据绑定和DOM操作,还能提升应用程序的性能和开发效率。在实际项目中,我们应根据具体需求合理运用这些功能,以构建出饱满、高效的Vue应用程序。


相关文章
|
1天前
|
JavaScript
|
2天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
12 4
|
2天前
|
JavaScript
vue知识点
vue知识点
7 2
|
2天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
2天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
13 1
|
2天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
13 6
|
8天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
8天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
8天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
2天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
8 0