Vue体验(二)

记录：261

体验Vue全局API和选项:Vue.directive，directives，methods，computed，watch，Vue.filter，filters

本例环境：

jQuery：3.6.0；Vue：2.6.0

1.体验Vue.directive和directives

1.1HTML标签

<div id="app">
 <div><strong>开始Vue.directive和directives</strong></div>
 <div style="color: blue;">体验Vue.directive定义: v-custsize</div>
 <div v-custsize='infoSize'>全局API自定义Vue.directive</div>
 <div style="color: blue;">体验directives 定义: v-custborder</div>
 <div v-custborder='infoBorder'>局部自定义指令directives</div>
</div>

1.2对应Vue代码

Vue.directive('custsize',{
  bind:function(el,bindInfo){
     el.style.fontSize = bindInfo.value.size
  }});
var vm = new Vue({
  el: '#app',
  data: {
    infoSize:{
        size:'30px'
    },
    infoBorder:{
        info:'5px solid red'
    }
  },
  directives:{
      custborder:{
          bind:function(el,bindInfo){
              el.style.border = bindInfo.value.info;
          }
      }
  }
});

在本例中directives调用逻辑：

v-custborder，即directives指令定义的custborder属性；

bind:function(el,bindInfo)形参el即绑定的div标签；

bind:function(el,bindInfo)形参bindInfo即v-custborder='infoBorder'的infoBorder对应属性；

bindInfo.value即infoBorder属性的值(value)；

效果：将data.infoBorder.info=’5px solid red’赋值给div元素的样式style属性的边框border，即div.style.border=’5px solid red’。

1.3效果

运行效果如下：

2.体验methods和computed

2.1HTML标签

<div id="app">
 <div><strong>开始体验methods,computed</strong></div>
 <div style="color: blue;">体验methods和computed</div>
 <div><span>输入A: </span><input type="text" v-model="infoA"></div>
 <div><span>输入B: </span><input type="text" v-model="infoB"></div>
 <div><span>使用methods计算: </span>{{methodsResult()}}</div>
 <div><span>使用computed计算: </span>{{computedResult}}</div>
</div>

2.2对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
     infoA: 0,
     infoB: 0,
     resultInfo:0
 },
 methods: {
     methodsResult: function () {
         return parseInt(this.infoA) + parseInt(this.infoB);
     }
 },
 computed: {
     computedResult: function () {
         return parseInt(this.infoA) + parseInt(this.infoB);
     }
 }
});

2.3效果

运行效果如下：

3.体验watch

3.1HTML标签

<div id="app">
 <div><strong>开始体验watch</strong></div>
 <div style="color: blue;">体验watch</div>
 <div><span>手机验证码: </span>
  <input type="text" v-model.lazy='checkNum'>
  <span >{{tipInfo}}</span>
 </div>
</div>

3.2对应Vue代码

var vm = new Vue({
 el: '#app',
 data: {
   tipInfo: '',
   checkNum: ''
 },
 methods: {
  checkNumFromEnd: function (checkInfo) {
   var objInfo = this;
   setTimeout(function () {
    if (checkInfo == '20210912') {
        objInfo.tipInfo = '验证码正确'
    } else {
        objInfo.tipInfo = '验证码错误,请重新输入'
    }
   }, 1500);
  }
 },
 watch: {
 checkNum: function (valueInfo) {
   this.checkNumFromEnd(valueInfo);
   this.tipInfo='校验中...';
 }
 }
});

3.3效果

运行效果如下：

4.体验Vue.filter和filters

4.1HTML标签

<div id="app">
 <div><strong>开始体验Vue.filter和filters</strong></div>
 <div style="color: blue;">体验Vue.filter(全局过滤器)</div>
 <div><span>输入: </span><input type="text" v-model="infoHeight"></div>
 <div><span>身高: </span>{{infoHeight | heightFilter}}</div>
 <div style="color: blue;">体验filters(局部过滤器)</div>
 <div><span>输入: </span><input type="text" v-model="infoWeight"></div>
 <div><span>体重: </span>{{infoWeight | weightFilter}}</div>
</div>

4.2对应Vue代码

Vue.filter('weightFilter', function (val) {
 var rtnInfo = '正常';
 if (val >= 120) {
     rtnInfo = '胖';
 } else if (val <= 80) {
     rtnInfo = '瘦';
 } else {
     rtnInfo = '正常';
 }
 return rtnInfo;
});
var vm = new Vue({
 el: '#app',
 data: {
  infoWeight: 100,
  infoHeight: 170
 },
 filters: {
 heightFilter: function (val) {
 var rtnInfo = '正常';
 if (val >= 180) {
     rtnInfo = '高';
 } else if (val <= 150) {
     rtnInfo = '矮';
 } else {
     rtnInfo = '正常';
 }
 return rtnInfo;
  }
 }
});

4.3效果

运行效果如下：

 

以上，感谢。

2021年9月12日