v-for
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="say">nihao {{dj}}</button>
<!-- 简写的方法 如果即传参数又想获取dom对象 那么就需要$event dj就是vue中的dj -->
<button @click="dian('hello', $event, dj)">haha</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
dj:"点击"
},
methods:{
say:function(event){
//获取当前的vue中的数据
alert(this.dj)
//获取原生dom对象的数据（如果不传参数的话默认是一个参数是dom）
alert(event.target.innerHTML)
},
dian:function(value, event, cs){
//获取传过来的值
alert(value);
//cs打印出来就是点击
alert(cs);
//获取dom对象 event
alert(event.target.tagName);
}
}
})
</script>
</body>
</html>
事件修饰符 + 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<!-- stop 阻止单击事件继续传播-->
<div @click="todo">
<button @click.stop="doing">点击阻止单击事件</button>
</div>
<!-- prevent 阻止事件的默认行为 如 a 和 form -->
<a href="http://baidu.com" @click.prevent="doing">点击阻止单击事件</a>
<!-- once 事件只执行一次 -->
<button @click.once="add_num">增加{{num}}</button>
<h2>按键修饰符</h2>
<!-- 响应回车事件 -->
<input @keyup.enter="huiche"></input>
<!-- 先按住Ctrl + 再鼠标点击会触发 -->
<div v-on:click.ctrl="doSomething">Do something</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
dj:"点击",
num:0
},
methods:{
huiche:function(){
alert('页面响应了回车事件')
},
doSomething:function(){
alert('点击了ctrl')
},
doing:function(){
alert('点击了doing');
},
todo:function(){
alert('点击了todo');
},
add_num:function(){
this.num++
}
}
})
</script>
</body>
</html>
表单数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo">
<form action="#" @submit.prevent="tjsj">
姓名(文本)：
<input type="text" v-model="name">
<br><br>
性别(单选按钮)：
<input name="sex" type="radio" value="1" v-model="sex"/>男
<input name="sex" type="radio" value="0" v-model="sex"/>女
<br><br>
技能(多选框)：
<input type="checkbox" name="skills" value="java" v-model="skills">Java开发
<input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
<input type="checkbox" name="skills" value="python" v-model="skills">Python开发
<br><br>
城市(下拉框)：
<select name="citys" v-model="city">
<option value="bj">北京</option>
<option value="nj">南京</option>
<option value="cc">长春</option>
<option value="jl">吉林</option>
</select>
<br><br>
说明(多行文本)：
<textarea cols="30" rows="5" v-model="text_content" ></textarea>
<br><br>
<button type="submit">提交</button>
</form>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
name:'wml',
sex:'0',
skills:[
'java',
'vue'
],
city:'cc',
text_content:'多行文本'
},
methods:{
tjsj:function(){
alert(this.sex)
}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
