目录
一:插值表达式{ {xxx}}:
在模板中输出变量,在插值表达式中是可以写javascriptbiao表达式的,
例如{
{1+2}},但是不可以写语句。
<!-- 插值表达式 -->
<h2>插值表达式</h2>
<div>
<div>{
{message}}</div>
<div>{
{message+'信息'}}</div>
<div>{
{num+1}}</div>
<div>{
{count>5?'大于5':'小于等于5'}}</div>
</div>
二:指令以及修饰符:
指令:带有v-前缀的特殊属性attribute
-
v-text 相当于插值表达式{ {}}
-
v-html 渲染html标签
-
v-show 条件渲染相当于css的display:none/block
-
v-if 条件渲染 显示隐藏的过程是数据/组件被销毁并重建
-
v-else 搭配v-if或者v-else-if使用
-
v-else-if 搭配v-if或者v-else-if使用
-
v-for 用于遍历数组
-
v-on 绑定事件监听器, 事件类型由参数指定
-
缩写 @
-
修饰符
-
.left 点击鼠标左键时触发
-
.right 点击鼠标右键时触发
-
.middle 点击鼠标中键时触发
-
.once 只触发一次的回调
-
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调
-
.stop 调用event.stopPropagation() 阻止事件冒泡
-
.prevent 调用event.preventDefault() 阻止默认事件
-
.capture 添加事件侦听器时使用capture模式
-
.{keyAlias} 仅当事件是从特定键触发时才触发回调
-
-
-
v-bind 绑定属性
-
缩写 :
-
-
v-model 用在表单组件或者组件上的数据双向绑定
-
修饰符
扫描二维码关注公众号,回复: 13458324 查看本文章-
.lazy 监听change而不是input事件( v-model 是每次修改都会绑定值,添加了 lazy 就只会在回车后或者失去焦点后绑定)
-
.number 输入字符串转为有效的数字(默认以 string 类型保存在 data 中,通过 number 修饰符可以以 number 类型存入 data 中)
-
.trim 输入首尾空格过滤
-
-
-
v-once 只渲染元素和组件一次
代码:
<h2>指令</h2>
<!-- v-text 相当于{
{}} -->
<div v-text="message"></div>
<!-- v-html 可用于渲染html标签 -->
<div v-html="contentHtml"></div>
<!-- v-show 条件渲染 -->
<div v-show="count>5">v-show</div>
<div @click="count=2">点击改变count</div>
<!-- v-if v-else-if v-else 条件渲染 -->
<div v-if="name=='张三'">张三</div>
<div v-else-if="name=='李四'">李四</div>
<div v-else>其他</div>
<!-- v-on 绑定事件 -->
<div v-on:click="name='王五'">点击改变name</div>
<!-- v-for 用于数组的遍历 -->
<div>
<span v-for="item in arr" :key="item.id">{
{item}}</span>
</div>
<!-- v-on 绑定事件 -->
<div v-on:click="arr.push('梨')">点击数组增加</div>
<!-- v-bind -->
<div v-bind:title="hoverTitle">标题</div>
<!-- v-model -->
<input type="text" v-model="count">
<!-- v-once -->
<div v-once>{
{count}}</div>
<div @click="count++">点击改变count</div>
<h2>指令缩写 及 修饰符</h2>
<!-- v-on 缩写是@ -->
<div v-on:click="arr.push('牛奶')">点击数组增加</div>
<div @click="arr.push('包子')">点击数组增加</div>
<!-- v-on 修饰符 -->
<div>
<span v-for="item in arr" :key="item.id">{
{item}}</span>
</div>
<!-- .left 点击鼠标左键时触发 -->
<div @click.left="arr.push('左键')">点击鼠标左键触发</div>
<!-- .right 点击鼠标右键时触发 -->
<div @click.right="arr.push('右键')">点击鼠标右键触发</div>
<!-- .middle 点击鼠标中键时触发 -->
<div @click.middle="arr.push('中键')">点击鼠标中键触发</div>
<!-- .once 点击回调,只触发一次 -->
<div @click.once="onceFun()">once只触发一次回调</div>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 -->
<button @click.A="rFun">11</button>
<input type="text" @click.9="rFun">
<!-- 由于事件冒泡,点击button后btnclick和divclick事件都会触发 -->
<div @click="divClick">
点击<button type="button" @click="btnClick">按钮1</button>
</div>
<!-- .stop 调用event.stopPropagation() 阻止事件冒泡 -->
<div @click="divClick">
点击
<button type="button" @click.stop="btnClick">.stop按钮1</button>
</div>
<!-- .self 只当事件是从侦听器绑定的元素本身触发时才触发回调 -->
<div @click.self="divClick">
点击
<button type="button" @click="btnClick">.self按钮1</button>
</div>
<!-- .prevent调用event.preventDefault():阻止默认事件 -->
<form action="https://www.baidu.com/">
<input type="submit" value="prevent提交" @click.prevent="subClick"/>
</form>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 监听某个按键(回车)的点击 -->
<input type="text" @keyup.enter="keyUpFun"/>
<h3>v-bind</h3>
<!-- v-bind 缩写是: -->
<div v-bind:title="hoverTitle">v-bind</div>
<div :title="hoverTitle">v-bind</div>
<h3>v-model</h3>
<!-- v-model修饰符 -->
<!-- .lazy 监听change而不是input事件 v-model 是每次修改都会绑定值,添加了 lazy 就只会在回车后或者失去焦点后绑定 -->
<input type="text" v-model.lazy="message" @change="messFun()">
<!-- .number 默认以 string 类型保存在 data 中,通过 number 修饰符可以以 number 类型存入 data 中 -->
<!-- input 的类型为 number 只能输入数字,如果没有修饰符,保存到 data 中仍然是 string 类型 -->
<input type="number" v-model.number='message'/>
<!-- .trim 去除字符串两边的空字符 -->
<input type="text" v-model.trim='message'/>
onceFun(){
alert('22')
},
rFun(){
alert('RRR')
},
divClick(){
alert('11====点击了divClick')
},
btnClick(){
alert('22====点击了btnClick')
},
subClick(){
alert(1)
},
keyUpFun(){
alert('KEYup')
},
三:.self 和 .stop的区别 以及.capture
- .stop 阻止事件冒泡 不阻止冒泡的话,先冒里面的元素,再冒外面的元素
- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡行为
- .capture 事件捕捉。事件捕捉:在事件冒泡发生时,我们只想让某个div执行他的事件
注意:如果我们在div2上使用.capture,在div3上使用.stop,点击div3的区域会发现先执行div2的事件在执行div3的事件,
也就是可以理解为
.capture的优先级>.stop
代码:
//html代码块
<h2>.stop和.self的区别 以及.capture</h2>
<!-- 注:.stop 阻止冒泡,不阻止冒泡的话:先冒里面的那个元素,再冒外面的元素 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
<!-- .self 事件捕捉:在事件冒泡发生时,我们只想让某个div执行他的事件 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
// js代码块
div1Handler() {
alert('这是触发了 inner div 的点击事件')
},
btnHandler() {
alert('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
alert('触发了连接的点击事件')
},
div2Handler() {
alert('这是触发了 outer div 的点击事件')
},
完整代码:
<template>
<!-- 插值表达式 以及 v-bind指令学习 -->
<div class="base02">
<home-back></home-back>
<!-- 插值表达式 -->
<h2>插值表达式</h2>
<div>
<div>{
{message}}</div>
<div>{
{message+'信息'}}</div>
<div>{
{num+1}}</div>
<div>{
{count>5?'大于5':'小于等于5'}}</div>
</div>
<!-- 指令 -->
<div>
<!-- ===================================================================================== -->
<h2>指令</h2>
<!-- v-text 相当于{
{}} -->
<div v-text="message"></div>
<!-- v-html 可用于渲染html标签 -->
<div v-html="contentHtml"></div>
<!-- v-show 条件渲染 -->
<div v-show="count>5">v-show</div>
<div @click="count=2">点击改变count</div>
<!-- v-if v-else-if v-else 条件渲染 -->
<div v-if="name=='张三'">张三</div>
<div v-else-if="name=='李四'">李四</div>
<div v-else>其他</div>
<!-- v-for 用于数组的遍历 -->
<div>
<span v-for="item in arr" :key="item.id">{
{item}}</span>
</div>
<!-- v-on 绑定事件 -->
<div v-on:click="name='王五'">点击改变name</div>
<!-- v-on 绑定事件 -->
<div v-on:click="arr.push('梨')">点击数组增加</div>
<!-- v-bind -->
<div v-bind:title="hoverTitle">标题</div>
<!-- v-model -->
<input type="text" v-model="count">
<!-- v-once -->
<div v-once>{
{count}}</div>
<div @click="count++">点击改变count</div>
<!-- ===================================================================================== -->
<h2>指令缩写 及 修饰符</h2>
<h3>v-on</h3>
<!-- v-on 缩写是@ -->
<div v-on:click="arr.push('牛奶')">点击数组增加</div>
<div @click="arr.push('包子')">点击数组增加</div>
<!-- v-on 修饰符 -->
<div>
<span v-for="item in arr" :key="item.id">{
{item}}</span>
</div>
<!-- .left 点击鼠标左键时触发 -->
<div @click.left="arr.push('左键')">点击鼠标左键触发</div>
<!-- .right 点击鼠标右键时触发 -->
<div @click.right="arr.push('右键')">点击鼠标右键触发</div>
<!-- .middle 点击鼠标中键时触发 -->
<div @click.middle="arr.push('中键')">点击鼠标中键触发</div>
<!-- .once 点击回调,只触发一次 -->
<div @click.once="onceFun()">once只触发一次回调</div>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 -->
<button @click.A="rFun">11</button>
<input type="text" @click.9="rFun">
<!-- 由于事件冒泡,点击button后btnclick和divclick事件都会触发 -->
<div @click="divClick">
点击<button type="button" @click="btnClick">按钮1</button>
</div>
<!-- .stop 调用event.stopPropagation() 阻止事件冒泡 -->
<div @click="divClick">
点击
<button type="button" @click.stop="btnClick">.stop按钮1</button>
</div>
<!-- .self 只当事件是从侦听器绑定的元素本身触发时才触发回调 -->
<div @click.self="divClick">
点击
<button type="button" @click="btnClick">.self按钮1</button>
</div>
<!-- .prevent调用event.preventDefault():阻止默认事件 -->
<form action="https://www.baidu.com/">
<input type="submit" value="prevent提交" @click.prevent="subClick"/>
</form>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 监听某个按键(回车)的点击 -->
<input type="text" @keyup.enter="keyUpFun"/>
<h3>v-bind</h3>
<!-- v-bind 缩写是: -->
<div v-bind:title="hoverTitle">v-bind</div>
<div :title="hoverTitle">v-bind</div>
<h3>v-model</h3>
<!-- v-model修饰符 -->
<!-- .lazy 监听change而不是input事件 v-model 是每次修改都会绑定值,添加了 lazy 就只会在回车后或者失去焦点后绑定 -->
<input type="text" v-model.lazy="message" @change="messFun()">
<!-- .number 默认以 string 类型保存在 data 中,通过 number 修饰符可以以 number 类型存入 data 中 -->
<!-- input 的类型为 number 只能输入数字,如果没有修饰符,保存到 data 中仍然是 string 类型 -->
<input type="number" v-model.number='message'/>
<!-- .trim 去除字符串两边的空字符 -->
<input type="text" v-model.trim='message'/>
<!-- ===================================================================================== -->
<h2>.stop和.self的区别 以及.capture</h2>
<!-- 注:.stop 阻止冒泡,不阻止冒泡的话:先冒里面的那个元素,再冒外面的元素 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
<!-- .self 事件捕捉:在事件冒泡发生时,我们只想让某个div执行他的事件 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
</div>
</div>
</template>
<script>
import Back from "@/components/common/back.vue"
export default {
data(){
return {
message:'message',
num:1,
count:8,
contentHtml:'<p>这里是指令学习<b>学习巩固</b><p/>',
name:'张三',
arr:['苹果','香蕉','橘子'],
hoverTitle:'鼠标滑过',
}
},
components:{
'home-back':Back
},
methods:{
onceFun(){
alert('22')
},
rFun(){
alert('RRR')
},
divClick(){
alert('11====点击了divClick')
},
btnClick(){
alert('22====点击了btnClick')
},
subClick(){
alert(1)
},
keyUpFun(){
alert('KEYup')
},
messFun(){
console.log(this.message)
},
// .stop和.self的区别
div1Handler() {
alert('这是触发了 inner div 的点击事件')
},
btnHandler() {
alert('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
alert('触发了连接的点击事件')
},
div2Handler() {
alert('这是触发了 outer div 的点击事件')
},
}
}
</script>
<style scoped lang="stylus">
.base02
margin-top 30px
margin-left 50px
h2
margin-top 20px
</style>