什么是指令
指令就是在Vue中,使用 v- 前缀的html特殊属性
指令就是用来扩展在Vue中标签的功能
语法:写在开标前 v-指令 = " 指令值 "
v-model指令
就是在表单元素中进行双向绑定
可以用于不同的表单元素
{
input文本类型:绑定的是当前元素的value属性,并自动监听input事件
复选框:自动监听change事件,并设置true或者false
下拉列表:自动监听change事件,并且得到对应的value
}
<div id = "demoDiv">
<input type="text" v-model="inputval">
<h1>{{inputval}}</h1>
//h1标签的内容会和input标签里的内容同步改变
</div>
Vue.createApp({
data(){
return{
inputval:""
}
}
}).mount("#demoDiv")
文本和复选框的双向绑定
<div id = "demoDiv">
<input type="checkbox" v-model="inputval">
<h1>{{inputval}}</h1>//初始显示为“你好”,当复选框为选中状态后变为“true”,未选中是“false”
//给复选框绑定任何数据 再勾选的时候 就会修改成布尔值
</div>
Vue.createApp({
data(){
return{
inputval:"你好"
}
}
}).mount("#demoDiv")
什么是双向绑定
视图变模型变:Dom监听(Dom Listener)就是view页面改变---》 dom监听---》通知模型改变
模型变视图变:数据绑定 data数据改变---》数据绑定触发 ---》页面视图改变
双向绑定原理
在Vue中是基于数据劫持或数据代理,配合发布订阅者模式完成的
数据劫持/数据代理:
Vue2 在Vue的data在初始化的时候就会吧里面的数据使用Object.defineProperty()监听起来,但任何一个方面(视图或者模型)改变了,他就会通知另外一方进行改变
Vue3 中使用的是Proxy来完成
发布订阅者模式
1 对 多的关系
v-show指令
使用css方式控制元素的显示和隐藏 true就是显示,false就是隐藏
<div id="demoDiv">
<h1 v-show="bool">登录</h1>
<h1 v-show="booltwo">欢迎</h1>
//绑定的属性值为true的显示,为false的隐藏
</div>
Vue.createApp({
data(){
return{
bool:false,
booltwo:true
}
}
}).mount("#demoDiv")
v-on指令
在Vue中进行dom事件绑定的
语法:
1.传统写法 v-on:事件名不加on onclick ----》v-on:click="函数"
2.简写 @时间名不加on onclick ----》@click="函数"
事件处理:
1.调用函数方式
2.内联事件方式
{{n}}
函数要写在methods中
<div id="demo">
<button v-on:click="fun()">点我</button>
//点击button后在执行fun()里面的代码
//在控制台输出"再函数中使用data数据需要this.变量名"和data里的text的值:“你好”
</div>
Vue.createApp({
data(){
return{
text:"你好"
}
},
//函数写在methods里面
methods:{
fun(){
console.log("在函数中使用data的数据需要this.变量名",this.text)
}
}
}).mount("#demo")
v-for指令
把data数据遍历展示
语法:v-for="(遍历的值,遍历的下标)in 你要遍历的数据"
<div id="demo">
<ul>
<li v-for="(v,i) in arr">{{v}}-------{{i}}</li>
</ul>
<table>
<tr v-for="(v,i) in arrObj">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
</div>
Vue.createApp({
data(){
return{
arr:["VN","CM","NOC","QWE"],
arrObj:[
{name:"one",age:111},
{name:"two",age:222},
{name:"three",age:333},
{name:"four",age:444}
]
}
}
}).mount("#demo")
结果:
v-bind指令
给html属性插变量
<div id="demo">
//传统写法
<a v-bind:href="ahref">{{text}}</a>
//简写
<a :href="ahref">{{text}}</a>
</div>
Vue.createApp({
data(){
return {
text:"点我去百度",
ahref:"http://www.baidu.com"
}
}
}).mount("#demo")
v-if全家桶
作用:对页面的dom元素进行添加和移除 (true添加 false移除)
v-show与v-if的区别:
1.代码不同
2.v-show是通过css的方式进行显示和隐藏,v-if是对dom元素的添加和移除
3.v-show在初始化可能更消耗性能,v-if则相对好一点
4.v-show在频繁切换的时候性能更好,v-if更浪费
v-if 和 v-else
<div id="demo">
<h1 v-if="ck">如果ck的值为true,显示我</h1>
<h1 v-else>如果ck的值为false,显示我</h1>
</div>
Vue.createApp({
data(){
return{
ck:true
}
}
}).mount("#demo")
v-else-if
<div id="demo">
<select v-model="select">
<!--与data里的select属性进行双向绑定-->
<option value="吃">吃</option>
<option value="喝">喝</option>
<option value="睡">睡</option>
<option value="跑">跑</option>
<!--option的value值是发给后台的,标签间的内容是展示给用户的-->
</select>
<h1 v-if="select=='吃'">吃</h1>
<!--如果select的值为‘吃’,则我显示-->
<h1 v-else-if="select=='喝'">喝</h1>
<!--如果select的值为‘喝’,则我显示-->
<h1 v-else-if="select=='睡'">睡</h1>
<!--如果select的值为‘睡’,则我显示-->
<h1 v-else-if="select=='跑'">跑</h1>
<!--如果select的值为‘跑’,则我显示-->
<h1 v-else>你什么都没选</h1>
<!--如果前面的条件都不满足,则我显示-->
</div>
Vue.createApp({
data(){
return{
select:""
}
}
}).mount("#demo")
v-html指令
作用:把字符串标签渲染到页面
<div id="demo">
<div v-html="text">
</div>
</div>
Vue.createApp({
data(){
return{
text:"<h2>我是通过v-html渲染出来的标签</h2>"
}
}
}).mount("#demo")
结果:
v-text指令
作用:向页面插入变量(作用与{{ }}相同)
<div id="demoDiv">
<h1>{{text}}</h1>
<h1 v-text="text"></h1>
</div>
Vue.createApp({
data(){
return {
text:"我是初始值"
}
},
}).mount("#demoDiv")
结果:
v-once指令
作用:一次性插值
<div id="demoDiv">
<input type="text" v-model="text">
<h1>{{text}}</h1>
<h1 v-once>{{text}}</h1>
<!--页面初次加载以后,不管绑定的值有没有改变,v-once里的值都不再变化-->
</div>
Vue.createApp({
data(){
return {
text:"我是初始值"
}
},
methods:{
}
}).mount("#demoDiv")
事件对象与修饰符
事件对象 —— $event
谁出发这个事件,事件对象就指向谁。
事件对象中包含触发这个事件元素相关信息
<div id="demoDiv"> <input type="text" @keydown="fun($event)"> </div>
<script> Vue.createApp({ data(){ return { } }, methods:{ fun(e){ if(e.keyCode==13){ //当点击的那个按钮的keyCod值为13时执行 console.log("aaaaa"); } } } }).mount("#demoDiv") </script>
修饰符
就是对事件的细节进行约束
按键修饰符
.up .down .left .right .ctrl .enter .delete .space .esc ......
<div id="demoDiv"> <input type="text" @keydown.enter="fun()">
<!--只有在点击回车键时触发--> </div>
<script>
Vue.createApp({
data(){
return {
}
},
methods:{
fun(){
console.log("aaaaaa");
}
}
}).mount("#demoDiv")
</script>
事件修饰符
.stop -- 阻止事件冒泡
.prevent -- 阻止事件默认行为
.captrue -- 设置捕获
.self -- 只触发自己范围的事件,不包含子元素
.once -- 事件只触发一次
v-model修饰符
.trim 去除输入框收尾的空格
<div id="demoDiv">
用户名:<input type="text" v-model.trim="text">
<button @click="fun()">点我</button>
</div>
<script>
Vue.createApp({
data(){
return {
text:""
}
},
methods:{
fun(){
console.log(this.text);
}
}
}).mount("#demoDiv")
</script>
.number修饰符
把输入框接收的数据转成number类型
<div id="demoDiv">
第一位:<input type="text" v-model.number="text">
第2位:<input type="text" v-model.number="textb">
<button @click="fun()">点我</button>
</div>
<script>
Vue.createApp({
data(){
return {
text:"",
textb:""
}
},
methods:{
fun(){
console.log(this.text+this.textb);
}
}
}).mount("#demoDiv")
</script>
.lazy修饰符
默认情况下,只要给输入框绑定了v-model那么修改内容的时候,边修改内容会跟着变
但是有时候,我们想修改完成后内容再变,当change事件的时候才会修改内容
<div id="demoDiv">
<input type="text" v-model.lazy="text">
<h1>{{text}}</h1>
</div>
<script>
Vue.createApp({
data(){
return {
text:""
}
}
}).mount("#demoDiv")
</script>