在html网页上双向修改数据
1、Vue双向绑定,此方法,解决了前端和后端交互最复杂的一步
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--1、创建一个视图容器,两种方式。<br>是换行、input输入框-->
<div id='app'>
<span v-text='message'> </span> <br>
{{message}} <br>
<input type='text' v-model='message'> <!--通过视图输入框去改变数据-->
</div>
<!--2、引入框架-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!--3、编辑脚本,作为桥梁把数据扔到html页面上-->
<script>
//建立全局变量vm,在网页上右键审查元素,输入vm可获取vm参数,然后输入vm.message回车即可访问message
var vm=new Vue({
//挂载视图,把显示的绑过来
el: '#app',
//定义数据,把数据源绑过来
data:{
message:'欢迎进入机器学习和深度学习的世界!'
}
})
</script>
</body>
</html>