vue
Use vue to assign a value to the message and display the value to the page
<script>
new Vue({
el:'#use',
data:{
message :"helloworld"
}
});
</script>data: used to define data
methods: used to define the function, you can return the function value by return
click click event
<!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 event
Check the text input box, use the keyboard to press the event, if you press 0-9, it will be displayed normally, and the rest will be blocked
<!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
Add a style to the div of the specified area size, move the mouse to the div, and pop up the window
<!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 and 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>