目录
1 v-on
可以用
v
-
on
指令监听
DOM
事件,并在触发时运行一些
JavaScript
代码
click:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<!-- 显示message,下面的JS语句的-->
<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
},
methods:{
fun1:function(msg){
alert("Hello");
this.message = msg;
}
}
});
</script>
</html>
keydown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
传统JS:<input type="text" onkeydown="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/* $event 它是vue中的事件对象 和我们传统js的event对象是一样的 */
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不让键盘的按键起作用
event.preventDefault();
}
}
}
});
//传统js的键盘按下事件
function showKeyCode(){
//event对象和我们的document对象以及window对象是一样的,可以不用定义直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不让键盘的按键起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回车");
// }
}
</script>
</html>
mouseover:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
<!--<div onmouseover="divmouseover()" id="div">
<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/**
* @事件名称 就是 v-on:事件名称的简写方式
* @mouseover它就等同于v-on:mouseover
*/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
event.stopPropagation();
}
}
});
//传统的js方式
function divmouseover(){
alert("鼠标移动到了div上了");
}
function textareamouseover(){
alert("鼠标移动到了textarea上了");
event.stopPropagation();
}
</script>
</html>
事件修饰符
Vue.js
为
v-on
提供了事件修饰符来处理
DOM
事件细节,如:
event.preventDefault()
或
event.stopPropagation()
。
Vue.js
通过由点
(.)
表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!-- <form action="http://www.itheima.com" method="post" onsubmit="return checkForm()">-->
<!-- <input type="submit" value="提交">-->
<!-- </form>-->
<hr/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠标悬停在div上了");
},
fun2:function(event){
alert("鼠标悬停在textarea上了");
}
}
});
//传统js方式
function checkForm(){
alert(1);
//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上 return 方法名称
return false;
}
</script>
</html>
按键修饰符
Vue
允许为
v-on
在监听键盘事件时添加按键修饰符
全部的按键别名:
.enter
.tab
.delete
(
捕获
"
删除
"
和
"
退格
"
键
)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" @keydown.enter="fun1">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("按下的是回车");
}
}
});
</script>
</html>
v-text与v-html的区别
v-text展示效果: <strong>Hello</strong> Vue!
v-html展示效果: Hello Vue!
总结:v-text和{{}}表达式渲染数据,不解析标签。
v-html不仅可以渲染数据,而且可以解析标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//传统js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
v-bind
插值语法不能作用在
HTML
特性上,遇到这种情况应该使用
v-bind
指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用户名:<input type="text" name="username" v-model="user.username"><br/>
密码:<input type="text" name="password" v-model="user.password"><br/>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"笔记本电脑",price:5000 },
{ id:2,name:"手机",price:3000 },
{ id:3,name:"电视",price:4000 }
]
}
})
</script>
</html>
v-if与v-show
v-if
是根据表达式的值来决定是否渲染元素
v-show
是根据表达式的值来切换元素的
display css
属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>
点击切换后:
VueJS生命周期
每个
Vue
实例在被创建之前都要经过一系列的初始化过程
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
// vm.message = "good...";
vm.$destroy();
</script>
</html>