4-1-事件形参
<div id="app">
<button type="button" @click="getText">开始按钮</button>
<button type="button" @click="getText">结束按钮</button>
<table>
<tr>
<td>5732</td>
<td>张三</td>
<td>
<button type="button"@click="getText">查询</button>
<button type="button"@click="getText">修改</button>
<button type="button"@click="getText">删除</button>
</td>
</tr>
</table>
</div>
<script>
const { createApp } = Vue
createApp({
methods:{
getText(event){
// alert(event.target.innerHTML)
// console.log(event)
console.log(event.target.innerText)
}
}
}).mount("#app")
</script>4-2-事件修饰符
<a href="javascript:;">访问XXX地址</a>
<div id="app">
<form action="https://www.163.com">
<button type="submit" @click="go">提交</button>
</form>
</div>
<script>
const {createApp}=Vue
createApp({
methods:{
go(event){
event.preventDefault()//阻止默认事件
}
}
}).mount("#app")
</script>或者
<a href="javascript">访问XXX地址</a>
<div id="app">
<form action="https://www.163.com">
<button type="submit" @click.prevent="go">提交</button>
</form>
</div>
<script>
const {createApp}=Vue
createApp({
methods:{
go(event){
}
}
}).mount("#app")
</script>4-3-阻止冒泡事件
style定义颜色格式：
<style>
#red{
width: 200px;
height: 300px;
border: 1px solid red;
}
#green{
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>阻止点击后事件的两种方式其一：
<div id="app">
<div id="red" @click="goRed()">
<div id="green"@click.stop="goGreen"></div>
</div>
</div>
<script>
const {createApp}=Vue
createApp({
methods:{
goRed(){
alert("Red")
},
goGreen(event){
alert("Green")
// event.stopPropagation()
}
}
}).mount("#app")
</script>其二：.stop：停止事件冒泡 event.stopPropagation():
<div id="app">
<div id="red" @click="goRed()">
<div id="green"@click="goGreen"></div>
</div>
</div>
<script>
const {createApp}=Vue
createApp({
methods:{
goRed(){
alert("Red")
},
goGreen(event){
alert("Green")
event.stopPropagation()
}
}
}).mount("#app")
</script>5-双向数据绑定
<div id="app">
<h1>双向数据绑定</h1>
<p>
用户姓名：<input type="text" v-model="user.username">
</p>
<p>
用户密码：<input type="text" v-model="user.password">
</p>
<p>
性别：<input type="radio" v-model="user.gender" value="man">男
<input type="radio" v-model="user.gender" value="woman">女
</p>
<p>
爱好：<input type="checkbox" name="hobbys" v-model="user.hobbys" value="sport">运动
<input type="checkbox" name="hobbys" v-model="user.hobbys" value="read">读书
</p>
<p>
学历：
<select v-model="user.education">
<option value="专科">专科</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
</p>
<p>
用户描述：<textarea v-model="user.describ"></textarea>
</p>
<p>
<button type="button"@click="show">显示绑定数据</button>
</p>
</div><script>
const { createApp } = Vue //获取Vue全局对象用于挂载到id值为app元素上
createApp({
data(){
return{
user:{
gender:'man',
hobbys:['sport','read'],
education:'专科'
}
}
},
methods:{
show(){
alert(JSON.stringify(this.user))
this.user.username='admin'
this.user.password='admin123'
this.user.gender='woman'
}
}
}).mount("#app")
</script>6-绑定元素的文本与HTML
1.绑定文本：v-text；
2.绑定 HTML：v-html；
3.示例：
<div id="app">
<h1>绑定元素的文本与HTML的演示</h1>
<p v-text="link1"></p>
<p v-html="link2"></p>
</div>
<script>
const { createApp } = Vue //获取Vue全局对象用于挂载到id值为app元素上
createApp({
data(){
return{
link1:'<a href="https://www.163.com">网易</a>',
link2:'<a href="https://www.163.com">网易</a>'
}
}
}).mount("#app")
</script>7-绑定Class与Style
1.理解：在应用界面中，某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术。
2.class 绑定：语法：
:class='类选择器名称'
表达式是字符串:'类选择器名称'
表达式是对象:{'类选择器名称 1':布尔值1,'类选择器名称 2':布尔值 2}
表达式是数组:['类选择器名称 1','类选择器名称 2']
3.Style 绑定：语法：
:style='样式规则的值'
表达式是字符串:'样式规则的值'
表达式是对象:{样式规则名称 1:样式规则的值 1,样式规则名称 2:样式规则的值 2}
表达式是数组:[样式规则 1，样式规则 2]
4.示例：
<style>
.btn1{
width: 100px;
height: 30px;
font-size: 16px;
color: #999;
}
.btn2{
background-color: #0aed30;
border-left:solid 1px #ccc;
border-top: solid 1px #ccc;
border-right:solid 2px #666;
border-bottom: solid 2px #666;
}
</style>body部分代码：
<div id="app">
<button type="button" :class="className1">绑定样式</button>
<button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
<button type="button" :class="[className1,className2]">绑定数组样式</button>
<button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式中含逻辑运算</button>
<hr>
style绑定样式<br>
<button type="button" :style="style1">按钮1</button>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
className1:"btn1",
className2:"btn2",
btn1_choose:true,
btn2_choose:true,
style1:{width:'100px',height:'30px',fontSize:'16px',color:'green'}
}
}
}).mount("#app")
</script>8-条件渲染
v-if，v-else，v-show用法：
<body>
<div id="app">
<p>
<a href="#" v-if="user.username=='admin'">编辑</a>
<a href="#" v-else>详情</a>
</p>
<p>
<a href="#" v-if="user.username=='admin'">编辑</a>
<a href="#" v-if="user.username!='admin'">详情</a>
</p>
<p>
<a href="#" v-show="user.username=='admin'">编辑</a>
<a href="#" v-show="user.username!='admin'">详情</a>
</p>
<p>
<button type="button" @click="change">切换成Guest</button>{{user.username}}
</p>
</div>
</body><script>
const {createApp} = Vue
createApp({
data(){
return{
user:{
username:'admin'
}
}
},
methods:{
change(){
if(this.user.username==='admin'){
this.user.username='guest'
event.target.innerText='切换成Admin'
}else{
this.user.username='admin'
event.target.innerText='切换成Guest'
}
}
}
}).mount("#app")
</script>9-列表渲染
1.功能：实现循环遍历指定的数组。
2.用法：v-for="(item,index) in 数组"
3.示例：
<div id="app">
<ul>
<li v-for="(u,index) in user">
{{index}}-{{u.id}}-{{u.name}}-{{u.age}}
</li>
</ul>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
user:[
{id:1,name:'tom',age:18},
{id:2,name:'jack',age:19},
{id:3,name:'scout',age:20},
{id:4,name:'rookie',age:22},
]
}
}
}).mount("#app")
</script>10-计算属性
1.说明：在 computed 属性对象中定义计算属性的方法；
在页面中使用{{方法名}}来显示计算的结果。
2.计算属性高级：通过 getter/setter 实现对属性数据的显示和监视；
计算属性存在缓存, 多次读取只执行一次 getter 计算。
<div id="app">
姓:<input type="text" v-model="firstName1">
名:<input type="text" v-model="lastName1">
姓名：<input type="text" v-model="username1"><br><br>
姓:<input type="text" v-model="firstName2">
名:<input type="text" v-model="lastName2">
姓名：<input type="text" v-model="username2"><br><br>
</div><script>
const {createApp} = Vue
createApp({
data(){
return{
firstName1:'',
lastName1:'',
firstName2:'',
lastName2:'',
}
},
computed:{//计算属性
username1(){
return this.firstName1+''+this.lastName1
},
username2:{
get(){
return this.firstName2+''+this.lastName2
},
set(val){//张山
let strArr=val.split("")//['张','山']
this.firstName2=strArr[0]
this.lastName2=strArr[1]
}
}
}
}).mount("#app")
</script>11-监视属性
1.通过 Vue 对象的 $watch() 或 watch 配置来侦听指定的属性；
2.当属性变化时, 回调函数自动调用, 在函数内部进行计算：
3.示例：
<div id="app">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名：<input type="text" v-model="username"><br><br>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
firstName:'',
lastName:'',
username:''
}
},
watch:{
username(newVal,oldVal){//参数1：新的数据，参数2：老的数据
if(newVal!=''){
let strArr = newVal.split("")
this.firstName = strArr[0]
this.lastName = strArr[1]
}else{
this.firstName=''
this.lastName=''
}
}
},
firstName:function() {
this.username = this.lastName + ' ' + this.firstName
},
lastName: function () {
this.username = this.lastName + ' ' + this.firstName
}
}).mount("#app")
</script>12.补充
在Vue.js中，`v-`前缀用于指令（Directives），它们是特殊的标记，用于将HTML元素绑定到底层Vue实例的数据上。以下是一些常用的Vue指令：
1. **v-bind**: 动态地绑定一个或多个属性，或一个组件prop到表达式。
- 简写为 `:` 例如：`:src="imageSrc"`。
2. **v-model**: 在表单控件元素上创建双向数据绑定。
- 例如：`v-model="inputValue"`。
3. **v-for**: 用于基于源数据多次渲染一个元素或模板块。
- 例如：`v-for="item in items"`。
4. **v-if**: 条件性地渲染一块内容。
- 例如：`v-if="isVisible"`。
5. **v-else**: 作为`v-if`的补充，表示else条件。
- 例如：`v-else`。
6. **v-else-if**: 作为`v-if`的补充，表示else-if条件。
- 例如：`v-else-if="anotherCondition"`。
7. **v-show**: 根据表达式的真假值切换元素的显示。
- 例如：`v-show="isVisible"`。
8. **v-on**: 监听 DOM 事件并在触发时执行一些 JavaScript 代码。
- 简写为 `@` 例如：`@click="doSomething"`。
9. **v-once**: 只渲染元素和组件一次。随后的重新渲染将忽略这些元素和组件。
- 例如：`v-once`。
10. **v-cloak**: 这是一个特殊指令，用于在Vue.js应用完全渲染之前保持原始内容。
- 例如：`v-cloak`。
11. **v-text**: 更新元素的文本内容。
- 例如：`v-text="message"`。
12. **v-html**: 更新元素的HTML内容。
- 例如：`v-html="htmlContent"`。
以上指令都有特定的用法和场景，可以根据实际的业务需求进行选择和使用。在Vue 3中，大部分指令和Vue 2中保持一致，但有的指令可能已经被废弃或有了新的替代方式。
13.结语
初涉博客，拙笔记录Vue学习之点滴。
步履或深或浅，心境或喜或疲。
愿持之以恒，不断前行。
望诸君不吝赐教，共同进步。
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
