vue
使用vue,对message赋值,并把值显示到页面
<script>
new Vue({
el:'#use',
data:{
message :"helloworld"
}
});
</script>
data:用来定义数据
methods:用于定义的函数,可以通过return来返回函数值
click点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
{{message}}
<input type="button" @click = "fun01" value="按钮"/>
</div>
</body>
<script>
new Vue({
el:'#divid',
data:{
message:"hello"
},
methods:{
fun01:function () {
this.message = "你好";
}
}
})
</script>
</html>
keydown事件
对文本输入框做校验,使用键盘摁下事件,如果按下0-9,正常显示,其余阻止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
<input type="text" @keydown="fun01($event)"/>
</div>
</body>
<script>
new Vue({
el: "#divid",
data: {},
methods: {
fun01: function (e) {
var keycode = e.keyCode;
if (!(keycode >48 && keycode < 58)){
e.preventDefault();
}
}
}
});
</script>
</html>
mouseover
给指定区域大小的div中添加样式,鼠标移到div中,弹出窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs-2.5.16.js"></script>
<script src="axios-0.18.0.js"></script>
<style>
.box{
width: 50px;
height: 50px;
border: 2px;
background-color: red;
}
</style>
</head>
<body>
<div id="divid">
<div class="box" @mouseover = "fun01">
</div>
</div>
</body>
<script>
new Vue({
el:"#divid",
data:{},
methods:{
fun01:function () {
alert("hello");
}
}
});
</script>
</html>
v-text与v-html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
{{message}}
<div v-html = "message"></div>
<div v-text = "message"></div>
</div>
</body>
<script>
new Vue({
el:"#divid",
data:{
message:"<h1>hello</h1>"
}
})
</script>
</html>
v-bind和v-model
v-model
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
账号:<input type="text" v-model = "user.username"><br/>
密码:<input type="text" v-model = "user.password"><br/>
<input type="button" @click = "fun01" value="按钮">
{{user}}
</div>
</body>
<script>
new Vue({
el:"#divid",
data:{
user:{
username:'zs',
password:'123456'
}
},
methods:{
fun01:function () {
this.user = {
username:'ls',
password:'987654'
}
}
}
})
</script>
</html>
v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
<ul>
<li v-for = "(ele,index) in array">
{{index}}--{{ele}}
</li>
</ul>
<br/>
<ul>
<li v-for = "(ele,index) in users">
{{ele.username}}----{{index}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#divid",
data:{
array:['1','2','3','4'],
users:[
{username:'zs',age:'18'},
{username:'ls',age:'19'},
{username:'ww',age:'20'}
]
},
methods:{}
})
</script>
</html>
v-if v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="divid">
<span v-if = "flag">hello</span>
<span v-show = "flag">你好</span>
<input type="button" value="开关" @click = "fun01"/>
</div>
</body>
<script>
new Vue({
el:"#divid",
data:{
flag:true
},
methods:{
fun01:function () {
this.flag = !this.flag;
}
}
});
</script>
</html>
axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="divid">
{{user}}
</div>
</body>
<script>
var vue = new Vue({
el:'#divid',
data:{
user:[]
},
methods:{
fun01:function () {
axios.post('js/user.json',{}).then(response =>{
this.user = response.data;
})
}
},
created:function () {
this.fun01();
}
})
</script>
</html>