Vue:Vue框架入门(1)在html网页上双向修改数据

在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>

猜你喜欢

转载自blog.csdn.net/qq_42229253/article/details/81235042