目录
一、模块语法中的指令
事件处理
v-on
内联事件处理器
方法事件处理器
事件参数
Event对象
同时传入参数和event对象
事件修饰符
阻止默认事件
编辑 阻止冒泡事件
.once
.enter
数组变化的侦测
变更方法
替换一个数组
计算属性 （computed）
计算属性缓存VS方法
Class绑定
绑定对象
多个对象绑定
绑定数组
三元运算符
数组和对象
Style绑定
一、模块语法中的指令
事件处理
v-on
我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click=”methodname” 或 @click=”handler”
事件处理器的值可以是
内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）
方法事件处理器：一个指向组件上定义的方法的属性名或者是路径。
内联事件处理器
<template><h2>事件处理</h2><h3>内联事件处理示例</h3><button v-on:click="count++">+1</button><button @click="count--">-1</button><p>{{count}}</p><br><p>内联事件处理非重点</p></template><script>export default{data () {return{count:0}}}</script>
结果如下：
方法事件处理器
<template><h2>事件处理</h2><p>方法事件处理</p><button @click="add">+1</button><p>{{count}}</p></template><script>export default{data () {return{count:0}},methods:{add(){//读取data里面的数据：this.属性名this.count++;console.log("click");}}}</script>
结果如下：
事件参数
事件参数可以获取event对象和通过事件传递参数。
Event对象
<template><h2>事件处理</h2><p>方法事件处理</p><button @click="add">+1</button><p>{{count}}</p></template><script>export default{data () {return{count:0}},methods:{//event对象add(e){this.count++;//Vue中的event对象，就是原生js的Event对象e.target.innerHTML="add"+this.count;}}}</script>
e.target.innerHTML="add"+this.count;: 这行代码修改了触发点击事件的元素（在这个例子中是 <button> 元素）的内部 HTML 内容。e.target 指的是触发事件的具体 DOM 元素，而 innerHTML 属性用于设置或获取该元素的 HTML 内容。这行代码将按钮的文本更改为 "add" 后跟当前的 count 值。
同时传入参数和event对象
<template><h2>事件传参</h2><div v-for="(value,index) in result" :key="index"><p @click="getname($event,value.name)">{{value.name}}-{{index}}</p><img :title="value.title"></div></template><script>export default{data () {return{result:[{name:"a" ,title :"a"},{name:"b" ,title :"b"},{name:"c" ,title :"c"}]}},methods:{getname(e,name){console.log(name);console.log(e);}}}</script>
结果如下
事件修饰符
在处理事件时调用event.preventDefault或event.stopPropagation（阻止默认事件和冒泡事件）是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不去处理DOM事件的细节会更好。
为解决这一问题，Vue为v-on提供了时间修饰符，常用如下：Stop,prevent,once,enter等等
阻止默认事件
<template><h1>事件修饰符</h1><a href="https://baidu.com" @click="g">百度</a><a href="https://baidu.com" @click.prevent>百度</a>
</template>
<script>
export default{data(){return{}},methods:{g(e){e.preventDefault();console.log("点击了");}}
}
</script>
可见效果是一样的，事件修饰符更加简洁与方便。
阻止冒泡事件
<template><h1>事件修饰符</h1><div @click="clickDiv"><p @click="clickP">测试冒泡</p></div>
</template>
<script>
export default{data(){return{}},methods:{g(e){e.preventDefault();console.log("点击了");},clickDiv(){console.log("点击了div标签");},clickP(){console.log("点击了p标签");}}
}
</script>
结果如图
以上代码的问题是：在点击子标签时，父标签也会跟着冒泡，需要阻止阻止。
<template><h1>事件修饰符</h1><div @click="clickDiv"><p @click.stop="clickP">测试冒泡</p></div>
</template>
<script>
export default{data(){return{}},methods:{g(e){e.preventDefault();console.log("点击了");},clickDiv(){console.log("点击了div标签");},clickP(){console.log("点击了p标签");}}
}
</script>
结果如图
.once
这个修饰符表示事件处理函数只会触发一次。在第一次触发之后，监听器将被移除，不再监听后续的事件触发。这在某些情况下很有用，比如你只想让用户点击一个按钮一次，或者防止表单重复提交等。
示例：<button v-on:click.once="doSomething">点击我（只响应一次）</button>
.enter
实际上，.enter 并不是Vue官方提供的一个标准事件修饰符。可能你指的是监听键盘的回车键（Enter key）事件。通常，这个可以通过检查键盘事件的keyCode或key属性来实现，但如果你是在说v-on:keyup.enter或v-on:keydown.enter这样的用法，那么这是Vue为键盘事件提供的一种便捷写法，用于监听特定的按键。
当使用.enter修饰符时，事件处理函数只会在用户按下回车键时触发。
示例：<input v-on:keyup.enter="submitForm" />
在上面的示例中，submitForm方法只会在用户在<input>元素中按下回车键时触发。
数组变化的侦测
变更方法
Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相应的更新。这些变更方法包括：
以push()方法为例：
<template><h3>数组侦测变化</h3><button @click="adddata">add data</button><p v-for="(vaule,index) in names" :key="index">{{vaule}}</p>
</template>
<script>
export default{data(){return{names:["iwen","weiyu","biaoge"]}},methods:{adddata(){//引起UI自动更新this.names.push("tfeng");}}
}
</script>
当点击按钮时将把元素添加在数组后面：
替换一个数组
变更方法，就是对调用它们的原数组进行变更。
相对的，也有一些不可变方法，例如filter(),concat()和slice（）,这些都不会更改原数组，而是返回一个新数组。
<template><h3>数组侦测变化</h3><button @click="adddata">add data</button><p v-for="(vaule,index) in names" :key="index">{{vaule}}</p>
</template>
<script>
export default{data(){return{names:["iwen","weiyu","biaoge"]}},methods:{adddata(){//不会引起UI自动更新this.names.concat(["Alice"]);console.log(this.names.concat(["Alice"]));}}
}
</script>
当点击按钮时，不会引起UI自动更新，实际上concat()方法已经将元素添加在数组后面了。
如果使用该函数，想使UI发生变化则
将本代码改成：this.names=this.names.concat(["Alice"]);
计算属性 （computed）
模板中的表达式虽然很方便，但也只能做一些简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此使用计算属性来描述响应式状态的复杂逻辑。
把模板语法里的复杂逻辑放在计算属性里，推荐操作形式：
<template><h3>计算属性</h3><p>{{EmptyIslength}}</p>
</template>
<script>
export default{data(){return{name:["1","2","3"]}},//计算属性computed:{EmptyIslength(){return this.name.length>0?"yes":"no"}}
}
</script>
计算属性缓存VS方法
计算属性：计算属性值会基于其响应式依赖（以上为例就是name数组）被缓存。一个计算属性仅在其响应式依赖更新时才重新计算。
方法：方法调用总是在重渲染发生时再次执行函数。
Class绑定
绑定对象
相当于：:class="Object"，Object:{active:Isactive,'text-dangger':hasError}
后面有单引号的原因是 ' - ' 符号不能包含在变量名内。
<template><h3 :class="{active:IsActive,'text-danger':hasError}" @click="hasError=false" >Class样式绑定</h3>
</template><script>
export default {data(){return{hclass: "my-class",// 这里可以自定义你想要的类名IsActive:true,hasError:true}}
}
</script>
<style>
.active{color: rebeccapurple;
}
.text-danger{font-size: 100px;
}
</style>
结果如下
多个对象绑定
<template><h3 :class="{'active':IsActive,'text_danger':hasError}" @click="hasError=false" >Class样式绑定</h3><h3 :class="classObject" >Class样式绑定</h3>
</template><script>
export default {data(){return{hclass: "my-class",// 这里可以自定义你想要的类名IsActive:true,hasError:true,classObject:{active:true,text_danger:true}}}
}
</script>
<style>
.active{color: rebeccapurple;
}
.text_danger{font-size: 100px;
}
</style>
绑定数组
<template><h3 :class="{'active':IsActive,'text_danger':hasError}" @click="hasError=false" >Class样式绑定</h3><h3 :class="classObject" >Class样式绑定</h3><h3 :class="[arrayActive,arrhasError]" >Class样式绑定</h3>
</template><script>
export default {data(){return{hclass: "my-class",// 这里可以自定义你想要的类名IsActive:true,hasError:true,classObject:{active:true,text_danger:true},arrayActive:"active",arrhasError:"text_danger"}}
}
</script>
<style>
.active{color: rebeccapurple;
}
.text_danger{font-size: 100px;
}
</style>
三元运算符
<template><h3 :class="{'active':IsActive,'text_danger':hasError}" @click="hasError=false" >Class样式绑定</h3><h3 :class="classObject" >Class样式绑定</h3><h3 :class="[arrayActive,arrhasError]" >Class样式绑定</h3><h3 :class="[IsActive?'active':'']" >Class样式绑定</h3>
</template><script>
export default {data(){return{hclass: "my-class",IsActive:true,hasError:true,classObject:{active:true,text_danger:true},arrayActive:"active",arrhasError:"text_danger"}}
}
</script>
<style>
.active{color: rebeccapurple;
}
.text_danger{font-size: 100px;
}
</style>
数组和对象
<template><h3 :class="{'active':IsActive,'text_danger':hasError}" @click="hasError=false" >Class样式绑定</h3><h3 :class="classObject" >Class样式绑定</h3><h3 :class="[arrayActive,arrhasError]" >Class样式绑定</h3><h3 :class="[IsActive?'active text_danger':'']" >Class样式绑定</h3><h3 :class="[IsActive?'active':'',{text_danger : hasError}]" >Class样式绑定</h3>
</template><script>
export default {data(){return{hclass: "my-class",// 这里可以自定义你想要的类名IsActive:true,hasError:true,classObject:{active:true,text_danger:true},arrayActive:"active",arrhasError:"text_danger"}}
}
</script>
<style>
.active{color: rebeccapurple;
}
.text_danger{font-size: 30px;
}
</style>
温馨提示：
数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行。
Style绑定
和class绑定类似：绑定对象，绑定数组。