4,双向绑定
1，在表单中使用双向数据绑定
你可以用v-model 指令在表单, , 及下拉框元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据，并对一些极端场景经行处理。
注意：v-model 会忽略所有表单元素的value，checked，selected特性的初始值而总是将Vue 实例的数据作为数据的来源，你应该通过JavaScript在组件的data选项中声明初始值！
1，单行文本
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
输入的文本：<input type="text" value="hello" v-model="message">{
{message}}
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素，绑定
el:"#app",
data:{
message:"java"
}
});
</script>
</body>
</html>
2,多行文本
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
输入的文本：<textarea v-model="message">
</textarea>{
{message}}
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素，绑定
el:"#app",
data:{
message:"java"
}
});
</script>
</body>
</html>
3,单选按钮
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
<!--单选按钮-->
性别：
<input type="radio" name="sex" value="男" v-model="sexed" >男
<input type="radio" name="sex" value="女" v-model="sexed">女
<br><p>选中了谁: {
{sexed}}</p>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素，绑定
el:"#app",
data:{
sexed:"男"
}
});
</script>
</body>
</html>
4，下拉框
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
<!--下拉框-->
下拉框
<select v-model="op">
<option value="" disabled>。。。请选择。。。</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
//el:元素，绑定
el:"#app",
data:{
op:""
}
});
</script>
</body>
</html>
注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项
5,组件
1，代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1,View层，模板-->
<div id="app">
<!--v-for:循环
v-bind：绑定
item：相当于是实参
zp2：相当于形参
-->
<zp v-for="item in items" v-bind:zp2="item"></zp>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//定义一个Vue组件，component
Vue.component("zp",{
props:['zp2'],
//template：模板的意思
template:'<li>{
{zp2}}</li>'
});
var vm=new Vue({
//el:元素，绑定
el:"#app",
data:{
items: ["java","linux","前端"]
}
});
</script>
</body>
</html>