vue基本指令

最新推荐文章于 2024-10-11 22:01:15 发布

alreadyRAY

最新推荐文章于 2024-10-11 22:01:15 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/alreadyRAY/article/details/90607875

vue 专栏收录该内容

14 篇文章

订阅专栏

指令

指令是一些特殊的标记，给HTML添加一些原来没有的功能

指令一：v-model

实现数据的双向绑定
把data中的值 和 表单元素中的value 绑定到一起，一方发生改变另一方也会跟着变化
v-model一般用在表单元素上（input、checkbox…）
例：

<div id='app'>
	<input type='text' v-model='num'>
	<input type='checkbox' v-model='isChecked'>
</div>

const vm = new Vue({
	el: '#app',
	data: {
		num: 0,
		isChecked: true
	}
})

双向数据绑定的原理

底层通过 Object.defineProperty()来实现的
- Object.defineProperty()是es5提出的一个方法，无法shim（兼容）IE8以下版本

例：

<input type='text' class='txt'>

let obj = {}
let tmp
const txt = document.querySelector('.txt')
//oninput事件 只有input的value值发生改变就会触发
txt.oninput = function(){
	console.log(this.value)
	obj.name = this.value
}
// 第一个参数：给哪个对象添加或者设置属性
// 第二个参数：要添加什么属性
// 第三个参数：属性的修饰符 对象格式
Object.defineProperty(obj,'name',{
	// 赋值时会调用set
	set: function(new){
		console.log('设置了',new)
		tmp = new
	},
	// 获取会调用get
	get: function(){
		console.log('获取了')
		return tmp
	}
})

指令二、v-text & v-html

v-text 相当于 innerText 不识别html标签
v-html 相当于innerHTML 识别html标签

指令三、v-bind

v-bind 动态数据绑定（单向） 
因为html的属性不能使用{{}}来动态读取数据，所以使用v-bind

例：

<div id='app'>
	<a v-bind:href='href'>click</a>
	//v-bind可以简写为 ：
	<a :href='href'>click</a>
</div>

const vm = new Vue({
	el: '#app',
	data: {
		href: 'www.baidu.com'
	}
})

操作样式

<style>
.bgc{
	background: red
}
.fz{
	font-size: 50px
}
</style>
<body>
//传统方式
<h3 class='red fz'>一个三级标题</h3>
//vue动态
<h3 :class='{red : isRed, fz : isFz}'>一个三级标题</h3>
//添加行内样式
<h3 :style='{color: "green", fontSize: fz + "px"}'></h3>
</body>

const vm = new Vue({
	el: '#app',
	data: {
		isRed: true,
		isFz: true,
		fz: 80
	}
})

指令四、v-on

用于注册事件、绑定事件。可简写为@
事件中读取data属性需要使用修饰符this,标签中可直接使用,
函数中的this指的就是vm实例
事件对象
	- 如果事件函数没有() @click='fn' 在事件处理函数里直接接受一个形参e即可
	- 如果事件函数有() @click='fn()' 使用$event字段

<div id='app'>
	<button v-on:click='clickBtn'>click</button>
	<button @click='clickBtn'>click</button>
	<button @click='fn($event,123)'>click</button>
</div>

const vm = new Vue({
	el: '#app',
	data: {
		name: 'jack'
	},
	methods: {
		clickBtn(){
			console.log(this.name + '点击了按钮')
		},
		fn(e,num){
			console.log('click',e,num)
		}
	}
})

指令五、v-for

遍历数据，根据数据里的每一项，创建（指令所在的）对应的标签
- 遍历数组 v-for='(item,index) in list'    item:元素 index:索引
- 遍历对象 v-for='(item,key) in obj'   item:属性值 key:键名/属性名  
- 遍历数字 v-for=‘item in 5’   item: 数字1开始
使用key值：
- 如果数组里的元素不是对象，而且不改变顺序，key可以取索引 :key='index'
- 如果数组里的元素是对象，key取对象里的固定属性，并且唯一

例：

//要跟key值 不然会报错
<h1 v-for='(item,key) in obj' :key='key'>hello {{ item.name}}</h1>

const vm = new Vue({
	el: '#app',
	data: {
		obj: {
			name: jack,
			age: 18
		}
	}
})

指令六、v-if & v-show

实现元素的隐藏和显示
1. 相同点：都能实现切换元素的显示和隐藏
2. 不同点：
	- v-if   显示：创建节点   隐藏：移除节点
	- v-show   显示：display：block   隐藏：display：none
3. 使用场景：
	- v-if通过不断的创建节点、移除节点来实现显示与隐藏，性能不好
	- 切换显示与隐藏频率低的用v-if
	- 切换显示与隐藏频率高的用v-show

例：

<h1 v-if='isShow'>我是v-if</h1>
<h1 v-show='isShow'>我是v-for</h1>

const vm = new Vue({
	el: '#app',
	data: {
		isShow: true
	}
})

其他指令：v-else-if 和 v-else

v-else-if：三种情况以上的判断

<h1 v-if='num >= 40'>第一个</h1>
<h1 v-else-if='num >= 30 && num < 40'>第二个</h1>
<h1 v-else>第三个</h1>

v-else：两种情况的判断

<h1 v-if='num >= 40'>第一个</h1>
<h1 v-else>第三个</h1>

其他指令：v-once

v-once作用：带有这个指令的标签中的内容只执行一次，执行完一次之后标签中的内容不再被更新
代码用处：第一次登录显示一次欢迎信息

<p>{{ num }}</p>
<p v-once>带once的{{ num }}</p>

其他指令：v-pre

v-pre作用：带有这个指令的标签中的内容不被解析，直接跳过，提高性能
代码：

<p>{{ num }}</p>
<p v-pre>带pre的{{ num }}</p>

其他指令：v-cloak

v-cloak作用：解决渲染的时候页面内容会闪的问题
代码用处：遮盖

<style>
[v-cloak]{display:none}
</style>
<p v-cloak>{{ num }}</p>