目录
数据绑定
1.内容绑定
使用 {{}},将 data 中的数据显示成内容(开始标签与结束标签之间)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<span>{{msg}}</span>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
msg: 'hello',
}
})
</script>
</body>
</html>
2.属性绑定
将data中的数据作为某个元素的属性的值
使用 v-bind:属性名=“data中的数据” 指令,属性可以是内置,也可以是自定义
v-bind:缩写为 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:id="id">{{title}}</p>
<a :href="url">CSDN</a>
<img :src="img_url" alt="">
</div>
<script src="./vue.js"></script>
<script>
var ap=new Vue({
el:'#app',
data:{
id:'p1',
title:'今天是2月8号',
url:'http://www.baidu.com',
img_url:'./imgs/1.jpg'
}
})
</script>
</body>
</html>
3.双向绑定
使用 v-model 指令,v-model 指令只适用于表单控件,r如:<inout>、<textarea>、<select>等控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script src="./vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
msg:'hello'
}
})
</script>
</body>
</html>
- data 中变量的值发生变化,页面从新渲染
- 从页面中改变值,data 中对应的变量值也发生变化
<div id="app">
<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
</div>
- 设置多个单选框的v-model值一样时,就可以不用写 name 属性
- 选择某个单选框后,此单选框的 vlue 属性值会赋值给 gender 属性
- 设置 gender 属性的值为某个单选框的 value 值,此单选框就会默认选中
事件
1.事件绑定
使用 v-on: 指令为元素注册事件
v-on:缩写为 @
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="clickMe">click</button>
<button @click="click1">click1</button>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
clickMe: function () {
console.log('heihei')
},
click1:function(){
console.log('click1')
}
}
})
</script>
</body>
- methods 中供所有开发者定义自己的函数