Vue相关基础知识(指令、过滤器、监听器)

Vueday4

文章目录

• Vueday4

Vue特性:

• 数据驱动视图

  • 当页面数据发生变化时，页面会自动重新渲染

  • 数据驱动视图是单向的数据绑定

• 双向数据绑定

  • 不需要手动操作DOM元素，来获取表单元素最新的值
  • 在网页中form表单负责采集数据，Ajax负责提交数据
  • js数据的变化，会被自动渲染到页面上
  • 页面上表单采集的数据发生变化时，会被vue自动获取到，并更新到js数据中

MVVM

Model 表示当前页面渲染时所依赖的数据源

View 表示当前页面所渲染的DOM结构

ViewModel 表示vue的实例，它是MVVM的核心

ViewModel作为MVVM的核心，将页面的数据源Model和页面结构View连接在了一起

内容渲染指令

渲染DOM元素的文本内容

• v-text

  会覆盖标签内原有内容

• {{ }}插值表达式

  内容占位符，使用最多

• v-html

  可以渲染包含HTML标签的字符串

属性绑定指令

注:插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

为元素的属性动态绑定属性值则需要用到v-bind属性绑定指令

v-bind指令可以简写为:

事件绑定指令

v-on可以被简写为@

在绑定事件处理函数的时候 可以使用小括号实现传参

事件对象$event

vue提供了内置变量，名字叫做$event 它就是原生DOM的事件对象e

事件修饰符

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

其中.prevent就是vue提供的阻止默认行为

双向绑定指令

v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据

• input输入框

• textarea

• select

与表单结合使用

V-model指令的修饰符

• .number

  自动将用户输入值转为数值类型

• .trim

  自动过滤用户输入的首尾空白字符串

• .lazy

  在“change"时而非"input"时更新

条件渲染指令

• v-show:动态为元素添加或移除display:none样式来实现元素的显示和隐藏

• v-if:每次动态创建或移除元素，实现元素的显示和隐藏

• 只要用到了v-for指令那么一定要绑定一个==:key属性==

• 尽量将id作为key的值(key值的类型需要是字符串或数字类型，不可重复)

过滤器(2.0版本)

1. 要定义到filters节点下，本质是一个函数
2. 过滤器函数中一定要有return值
3. 在过滤器的形参中就可以获取到管道符前面的值
4. 若全局过滤器和私有过滤器名字一致，则按照就近原则

私有过滤器和全局过滤器

若希望在多个vue实例之间共享过滤器则可以通过如下方式

首字母大写

1.第一个参数是全局过滤器的"名字"
2.第二个参数是全局过滤器的“处理函数”

Vue.filter('capitalize',function(str){
	return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

侦听器

watch侦听器

允许开发者监听数据的变化，从而针对数据的变化做特定的操纵

1. 方法格式的侦听器
   • 缺点1:无法在刚进入页面的时候，自动触发
   • 缺点2:如果侦听的是一个对象，若对象中的属性发生了变化，不会触发侦听器

const vm = new Vue({
	el:"#app",
	data:{username:''},
	watch:{
	// 监听username值的变化
	// newVal是变化后的新值，oldVal的变化之前的旧值
        username(newVal,oldVal){
            console.log(newVal,oldVal)
        }
	}
})

2. 对象格式的侦听器
   • 好处1:可以通过immediate选项让侦听器自动触发
   • 好处2:可以通过deep选项，让侦听器深度监听对象中每个属性的变化

const vm = new Vue({
	el:"#app",
	data:{username:'admin'},
	watch:{
		//定义对象格式的侦听器
		username:{
			//侦听器的处理函数
			handler:function(newVal,oldVal){
				console.log(newVal,oldVal)
			},
			//一进页面先触发一次handler，默认值是false
			immediate:true
			//监听对象中每个属性是否变化,开启深度监听
			deep:true
		}
	}
})

const vm = new Vue({
	el:"#app",
	data:{
		info{
			username:'admin'
		}
	},
	watch:{
		//如果要侦听的是对象的子属性变化则包裹一层单引号
		'info.username'(newVal){
			console.log(newVal)
		}
	}
})