Vue入门笔记（二）

Vue入门笔记（二）

过滤器

Vue. 支持在{{   }}插值的尾部添加一小管道符" | " 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的,通过给 Vue 实例添 加选项 filters 来设置。
例子：

<div id="app">{{name | filter}}</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			name:yzy
		},
		filters:{
			filter:function(value){
				//value指的是name中的数据
				if(value.length<=3){
					return "已被过滤";
				}else{
					return value;
				}
			}
		}
	});
	//此时div中的值便会被过滤显示值为"已被过滤"
</script>

过滤器也可以串联,并非只能过滤一次如下代码

<div id="app">{{name | filter1 | filter2}}</div>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			name:yzy
		},
		filters:{
			filter1:function(value){
				//value指的是name中的数据
				if(value.length<=3){
					return "已被过滤";
				}else{
					return value;
			},
			filter2:function(value){
				//这里的value指的是修改过后的值 及"已被过滤"
				if(value=="已被过滤"){
					return "yzy";
				}else{
					return 0;
				}
			}
		}
	});
	//此时div中的内容经过了二次过滤显示值为 yzy
</script>

过滤器除了接收串联以外还接受参数
<div id="app">{{name | filter1("num1","num2")}}
注意:这里的字符串num1 和num2将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。

指令初识

指令（Directives）是 Vue扣 模板中最常用的一项功能，它带有前缀 v－，指令的主要职责就是当其表达式的值改变时，相应地 将某些行为应用到 DOM 上。

• v-if—给html中的标签内容增加一个限制条件

<div id="app" v-if="show">{{name}}</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			show:true,
			name:yzy
		}
	})
</script>
//此时show为true div中显示文本yzy
//当show为false时 div中不显示任何值

• v-bind—基本用途是动态更新 HTML 元素上的属性，比如 id、class 等。

<div id="app">
      <a v-bind:href="url">yzy</a>
</div>
<script>
    var app = new Vue({
      el: "#app",
      data: {
        url: "https://www.baidu.com",
      },
    });
</script>

• v-on—它用来绑定事件监听器，这样我们就可以做一些交互。

<div id="app">
      <p v-if="show">{{name}}</p>
      <button v-on:click="Click">{{date}}</button>
</div>
<script>
	var app = new Vue({
	      el: "#app3",
	      data: {
	        show: true,
	        name: "yzy",
	        date: "点击隐藏",
	      },
	      methods: {
	        Click: function () {
	          this.show = false;
	        },
	     },
	});
</script>
//可以在Click函数中再嵌套函数

语法糖

Vue扣 的 v-bind 和 v-on 指令都提供了语法糖， 也可以说是缩写， 比如 v-bind， 可以省略 v-bind, 直接写一个冒号 “:”。

<a v-bind:href＝"url">链接</a> 
	<img v-bind:src="imgUrl"> 
	//缩写为 
<a : href＝"url">链接</a> 
	<img : src="imgUrl">

v-on 可以直接用 “＠” 来缩写：

<button v-on : click＝"handleClose">点击隐藏</button>
<button @click＝"handleClose">点击隐藏</button>

---