扩展了 普通html属性的功能(用法同自定义属性)
用法:
v-指令名=“值”
<div v-xxx="值">
总结:
<元素 v-指令=“xxx”>
指令的值需要写在引号中:
1.也是js环境
2.里面可以写表达式 不能写语句
3.全局函数 只能使用白名单中
相当于模板中的语法
- v-model将表单控件的value 属性 与 vue中的 数据 进行双向绑定
- v-text将元素 的文本内容 与 一个vue的数据进行绑定
- v-html渲染富文本数据(不管是v-text还是{{}}都不会渲染富文本数据)
- v-bind:属性将一个普通的任意标签的属性(可以是自定义属性)的值,与vue一个数据进行绑定
- v-on:事件将vue元素的事件与vue的方法进行绑定
1.v-mode
例1
<div id="app">
<input type="text" v-model="a"> //v-model
<hr>
{{a}}
</div>
const vm = new Vue({
el:"#app",
data:{
a:"双向绑定的数据"
}
})
例2
<div id="app">
<input type="checkbox" v-model="b">
<div class="box" v-show="b"></div>
</div>
const vm = new Vue({
el:"#app",
data:{
b:true
}
})
例3
<div id="app">
red: <input type="checkbox" value="red" v-model="c">
orange: <input type="checkbox" value="orange" v-model="c">
yellow: <input type="checkbox" value="yellow" v-model="c">
green: <input type="checkbox" value="green" v-model="c">
<hr>
{{c}}
</div>
const vm = new Vue({
el:"#app",
data:{
c:[]
}
})
2.v-text
将元素 的文本内容 与 一个vue的数据进行绑定
<div id="app">
<div class="box" v-text="a"></div>
</div>
const vm = new Vue({
el:"#app",
data:{
a:"abcdefg"
}
})
4.v-bind:属性
将一个普通的任意标签的属性(可以是自定义属性)的值,与vue一个数据进行绑定
简写:
:属性
例1
<div id="app">
<div :class="a"></div> //:class
</div>
const vm = new Vue({
el:"#app",
data:{
a:"yellow"
}
})
例2(自定义属性)
<div id="app">
<div :aaa="b"></div>
</div>
const vm = new Vue({
el:"#app",
data:{
b:"ccc"
}
})
5.v-on:事件
例1
<div id="app">
<!-- <button v-on:click="fn">按钮</button> -->
<button @click="fn">按钮</button>
</div>
const vm = new Vue({
el:"#app",
methods:{
fn(){
alert(1)
}
}
})
点击后:
例2
<div id="app">
<button @click="fn">{{a?"隐藏":"显示"}}</button>
<div class="box" v-show="a"></div>
</div>
const vm = new Vue({
el:"#app",
data:{
a:true
},
methods:{
fn(){
this.a = !this.a
}
}
})
点击后:
再点击:
事件修饰符
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture(捕获) 捕获阶段就提前触发
.self 只能自己触发 其后代元素无法触发
.once 只触发一次