Vue框架之双向绑定事件
首先介绍下Vue框架的语法
vue通过 {{temp}} 来渲染变量
{{count+100}} # 求和
v-text # 为标签插入text文本
v-html # 为标签插入html
v-show # 根据布尔值判断，显示与隐藏，
v-if # if判断语句，根据真假值来显示对应的内容
v-else # 与v-if连用
v-for # for循环，如果对象是列表的话，可以显示其索引，字典默认显示value值
v-model #这是一个双向绑定事件（白话：就是我这边输入，就可以直接获取到值，数据修改值后我页面可以立即变更，中间省去很多的查找标签的内容）
注意事项：在Vue中的this代表的是window，在前端定义的变量以及函数都是定义在window中。
Vue框架双向绑定实例（input输入页面实时显示）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="myapp"> 首先要先定义一个div标签也就是说要对操作的标签设置一个父标签
<input type="text" v-model="message"> 绑定一个双向事件
<p>{{ message }}</p> 这个是和绑定的双向事件同名
</div>
<script>
new Vue({ 通过new定义一个Vue的方法
el:'#myapp', 使用el 找到设置的标签，这个方法只支持id属性
data:{ data 是一个json数据
message:'' 找到定义的变量然后设置成一个空字符串，这个要和绑定的那个名称一样
}
})
</script>
</body>
</html>
Vue框架双向绑定实例（下拉选择内容然后点击绑定的button按钮页面显示选择的内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
</head>
<body>
<div id="int">
<input type="text" v-model="message">
<!--v-model是实现双向绑定-->
<p>{{message}}</p>
<input type="button" value="clicke me" v-on:click="butText" >
<select v-model="sel">
<option value="111">111</option>
<option value="222">2222</option>
<option value="333">3333</option>
<option value="444">4444</option>
</select>
</div>
<script>
var na = new Vue({
el:'#int',
data:{
message:'',
sel:'111'
},
methods:{
butText:function () {
alert(this.sel)
}
}
});
</script>
</body>
</html>