vue学习2

最新推荐文章于 2024-05-29 17:10:32 发布

风飞叶

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量71

点赞数

分类专栏： vue

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
过滤器调用时格式 {{ name | 过滤器的名称}}

1.可用于替换元素
如下，将善良替换成美丽，动人

<body>
		<div id="app">
			<p>{{ msg | msgFormat('美丽', '动人') | test}}</p>
		</div>
		<script type="text/javascript">
			//定义一个过滤器，叫 msgFormat，要在 Vue实例之前定义
			Vue.filter('msgFormat', function(msg, arg, arg2){
				//字符串replace方法，第一个参数，除了写一个字符串还可以写一个正则
				 return msg.replace(/善良/g, arg +arg2)//g是指全局匹配
			})
			
			Vue.filter('test', function(msg){
				return msg + '+++++++++'
			})
			var vm=new Vue({
				el:'#app',
				data:{
					msg: '曾经我是一个善良的少年，善良的我'
				},
				methods:{}，
			})
		</script>
	</body>

私有过滤器

HTML代码


<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

 filters:{
                // 定义私有过滤器私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
                dateFormat: function(dateStr, pattern)
                {
                    var dt = new Date(dateStr) //转化
                    
                    var y = dt.getFullYear()
                    var m = (dt.getMonth()).toString().padStart(2, '0')  //用String的padStart方法补齐 2是指填充到两位，0指用0填充
                    var d = (dt.getDate()).toString().padStart(2,'0')
                    if (pattern.toLowerCase()=='yyyy-mm-dd')
                    {
                        return `${y}-${m}-${d}`
                    }else
                    {
                        var hh = dt.getHours()
                        var mm = dt.getMinutes()
                        var ss = dt.getSeconds()
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss} 私有`
                    }
                }
            },

全局过滤器


// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

筛选

2.x版本中手动实现筛选的方式：

筛选框绑定到 VM 实例中的 searchName 属性：


<hr> 输入筛选名称：

<input type="text" v-model="searchName">

在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个过滤的methods 方法，同时，把过滤条件searchName传递进去：


<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>

search 过滤方法中，使用数组的 filter 方法进行过滤：


search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}

自定义修饰符

2.x中自定义键盘修饰符

	
			//自定义全局按键修饰符
			Vue.config.keyCodes.f2 = 113

自定义指令

自定义全局和局部的


    // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }

使用方法


<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

Vue实例的生命周期

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：
创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的
数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated：实例更新完毕之后调用此函数，此时 data 中的状态值和
界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue
实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

本文转载于这个博客，可跳转阅读
https://blog.csdn.net/qq_42068550/article/details/89636098

风飞叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习2

过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；过滤器调用时格式 {{ name | 过滤器的名称}}1.可用于替换元素如下，将善良替换成美丽，动人<body> <div id="app"&...
复制链接

扫一扫