Vue基础day02总结

最新推荐文章于 2023-06-23 19:53:57 发布

兰兰的风。。。

最新推荐文章于 2023-06-23 19:53:57 发布

阅读量238

点赞数

分类专栏： # Vue 文章标签：表单相关自定义指令计算属性侦听器过滤器

本文链接：https://blog.csdn.net/pilgrim_121/article/details/114093061

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.表单相关

（1）操作(通过v-model)

input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
    height: 40px;
    line-height: 40px;
  }
  
  form div span:first-child {
    display: inline-block;
    width: 100px;
  }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://www.baidu.com">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
      </div>
      <div>
        <span>性别：</span>
        <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
      </div>
      <div>
        <span>爱好：</span>
        <input type="checkbox" id="ball" value="1" v-model='hobby'>
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" value="2" v-model='hobby'>
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model='hobby'>
        <label for="code">写代码</label>
      </div>
      <div>
        <span>职业：</span>
        <select v-model='occupation' >
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
      </div>
      <div>
        <span>个人简介：</span>
        <textarea v-model='desc'></textarea>
      </div>
      <div>
      	<!-- @click.prevent阻止表单的默认提交行为,提交的位置是action="http://www.baidu.com"这个网址上 -->
        <input type="submit" value="提交" @click.prevent='handle'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'yxx',
        gender: 2,
        hobby: ['2','3'],
        occupation: 2,    
        desc: '我的个人简介内容...'
      },
      methods: {
        handle: function(){
          console.log(this.uname)
          console.log(this.gender)
          console.log(this.hobby.toString())
          console.log(this.occupation)
          console.log(this.desc)
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

（2）表单修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy : 将input事件切换为change事件
PS: .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
    height: 40px;
    line-height: 40px;
  }
  
  form div span:first-child {
    display: inline-block;
    width: 150px;
  }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://www.baidu.com">
      <div>
        <span>用户名（无lazy）：</span>
        <span>
        	<!--“input”时更新  -->
          <input type="text" v-model='uname'>
        </span>
        <span>{{uname}}</span>
      </div>
      <div>
        <span>昵称（有lazy）：</span>
        <span>
        	<!-- 在“change”时而非“input”时更新 -->
          <input type="text" v-model.lazy='nname'>
        </span>
        <span>{{nname}}</span>
      </div>
      
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'yxx',
        nname: 'wind'
      }
       
    });
  </script>
</body>
</html>

2.自定义指令

（1）全局指令

<div id="app">
    <input type="text" v-focus>
    <input type="text">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      自定义指令
    */
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        
      }
    });
  </script>

在这里插入图片描述

<div id="app">
   <input type="text" v-color='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
      /*
        自定义指令-带参数
      */
  Vue.directive('color', {
      bind: function(el, binding) {
          // 根据指令的参数设置背景色
          console.log(binding.value)
          el.style.backgroundColor = binding.value.color;
      }
  });
  
  var vm = new Vue({
      el: '#app',
      data: {
          msg: {
              color: 'blue'
          }
      },
      methods: {

      }
  });
</script>

在这里插入图片描述

（2）局部指令

局部指令只能在当前组件里面使用。

<div id="app">
 <input type="text" v-color='msg'>
  <input type="text" v-focus>
</div>

 /*
    自定义指令-局部指令
  */
  var vm = new Vue({
    el: '#app',
    data: {
      msg: {
        color: 'red'
      }
    },
    methods: {
      handle: function(){
        
      }
    },
    directives: {
      color: {
        bind: function(el, binding){
          el.style.backgroundColor = binding.value.color;
        }
      },
      focus: {
        inserted: function(el) {
          el.focus();
        }
      }
    }
  });

3.计算属性

模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让
模板更加的简洁
基于它们的响应式依赖进行缓存

<div id="app">
   <div>----计算属性----</div>
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
    <div>----方法调用----</div>
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
</div>

<script type="text/javascript">
	/*
	计算属性与方法的区别:计算属性是基于依赖（的数据）进行缓存的，而方法不缓存
	*/
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Nihao',
    },
    方法
    methods: {
        reverseMessage: function() {
            console.log('methods')
            return this.msg.split('').reverse().join('');
        }
    },
    // computed 属性 定义 和 data ， methods 定义平级
    computed: {
        reverseString: function() {
            console.log('computed')
            return this.msg.split('').reverse().join('');

        }
    }
});
</script>

在这里插入图片描述

4.侦听器 watch

响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是data 中已经存在的数据

<div id="app">
    <div>
        <span>名：</span>
        <span>
    <input type="text" v-model='firstName'>
  </span>
    </div>
    <div>
        <span>姓：</span>
        <span>
    <input type="text" v-model='lastName'>
  </span>
    </div>
    <div>{{fullName}}</div>
</div>

<script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        watch 属性 定义 和 data ， methods 定义 平级
        watch: {
            //当 firstName 值 改变的时候 会自动触发watch
            //这里的val表示此刻input表框输入的值
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName;
            },
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

在这里插入图片描述
案例： 验证用户名是否可用

输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>用户名：</span>
            <span>
              <!-- .lazy失去焦点时开始 -->
        <input type="text" v-model.lazy='uname'>
      </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*      
                      侦听器
                      1、采用侦听器监听用户名的变化
                      2、调用后台接口进行验证
                      3、根据验证的结果调整提示信息
                    */
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                tip: ''
            },
            methods: {
                checkName: function(uname) {
                    // 调用接口，但是可以使用定时任务的方式模拟接口调用
                    var that = this;
                    //如果直接使用setTimeout中的this会指向window
                    setTimeout(function() {
                        // 模拟接口调用
                        if (uname == 'admin') {
                            that.tip = '用户名已经存在，请更换一个';
                        } else {
                            that.tip = '用户名可以使用';
                        }
                    }, 2000);
                }
            },
            watch: {
                //当uname发生变化时触发
                uname: function(val) {
                    // 调用后台接口验证用户名的合法性
                    this.checkName(val);
                    // 修改提示信息
                    this.tip = '正在验证...';
                }
            }
        });
    </script>
</body>

</html>

5.过滤器 filter

用于文本格式化
用在插值表达式{{}}和v-bind表达式
支持级联操作(将上一次处理的结果作为第二次处理的输入)
不改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本
全局过滤器是filter，没有s的；而局部过滤器是filters，是有s的

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>

全局过滤器

<div id="app">
  <input type="text" v-model='msg'>
  <!-- 将msg首字母转为大写 -->
  <div>{{msg | upper}}</div>
  <!-- 将msg首字母转为大写，再转为小写 -->
  <div>{{msg | upper | lower}}</div>
  <!-- 为属性abc绑定值msg，并将msg首字母转为大写 -->
  <div :abc='msg | upper'>测试数据</div>
</div>

<script type="text/javascript">
    //val是要处理的数据
    //slice(start,end)切分字符串(不含end)，类似于substring()
	Vue.filter('upper', function(val) {    
	  return val.charAt(0).toUpperCase() + val.slice(1);
	});
	Vue.filter('lower', function(val) {
	  return val.charAt(0).toLowerCase() + val.slice(1);
	});
	var vm = new Vue({
	  el: '#app',
	  data: {
	    msg: ''
	  }
	});
</script>

在这里插入图片描述

局部过滤器

<script type="text/javascript">
  var vm = new Vue({
	    el: '#app',
	    data: {
	      msg: ''
	    },
	    //局部过滤器定义在vm里，只能在本组件vm里使用
	    filters: {
	      upper: function(val) {
	        return val.charAt(0).toUpperCase() + val.slice(1);
	      },
	      lower: function(val) {
	        return val.charAt(0).toLowerCase() + val.slice(1);
	      }
	    }
  });
</script>

效果与上述全局过滤器相同。
案例： 格式化日期,将时间格式化为 yyyy-MM-dd 格式

<div id="app">
  <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>

<script type="text/javascript"> 
    // value是要处理的数据，arg是传递过来的参数
 Vue.filter('format', function(value, arg) {
    //这里的dateFormat(date, format)函数利用正则表达式实现了将date转化为format的格式，可以先不用细究其实现
    function dateFormat(date, format) {
        //console.log(arg);//yyyy-MM-dd hh:mm:ss
        if (typeof date === "string") {
            var mts = date.match(/(\/Date\((\d+)\)\/)/);
            if (mts && mts.length >= 3) {
                date = parseInt(mts[2]);
            }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
            return "";
        }
        var map = {
            "M": date.getMonth() + 1, //月份 
            "d": date.getDate(), //日 
            "h": date.getHours(), //小时 
            "m": date.getMinutes(), //分 
            "s": date.getSeconds(), //秒 
            "q": Math.floor((date.getMonth() + 3) / 3), //季度 
            "S": date.getMilliseconds() //毫秒 
        };

        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
            var v = map[t];
            if (v !== undefined) {
                if (all.length > 1) {
                    v = '0' + v;
                    v = v.substr(v.length - 2);
                }
                return v;
            } else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    }
    return dateFormat(value, arg);
  });
  var vm = new Vue({
    el: '#app',
    data: {
      date: new Date()
    }
  });
</script>

实现效果：
在这里插入图片描述

6. 生命周期

挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted（！！！重要）
更新（元素或组件的变更操作）
① beforeUpdate
② updated
销毁（销毁相关属性）
① beforeDestroy
② destroyed

<div id="app">
 <div>{{msg}}</div>
  <button @click='update'>更新</button>
  <button @click='destroy'>销毁</button>
</div>

<script type="text/javascript">
   var vm = new Vue({
     el: '#app',
     data: {
       msg: '生命周期'
     },
     methods: {
       update: function(){
         this.msg = 'hello';
       },
       destroy: function(){
         this.$destroy();
       }
     },
     beforeCreate: function(){
       console.log('beforeCreate');
     },
     created: function(){
       console.log('created');
     },
     beforeMount: function(){
       console.log('beforeMount');
     },
     mounted: function(){
       console.log('mounted');
     },
     beforeUpdate: function(){
       console.log('beforeUpdate');
     },
     updated: function(){
       console.log('updated');
     },
     beforeDestroy: function(){
       console.log('beforeDestroy');
     },
     destroyed: function(){
       console.log('destroyed');
     }
   });
 </script>

在这里插入图片描述

兰兰的风。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础day02总结

1.表单相关（1）操作(通过v-model)input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> f
复制链接

扫一扫

专栏目录