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

最新推荐文章于 2024-07-21 00:28:55 发布

听雪闻歌

最新推荐文章于 2024-07-21 00:28:55 发布

阅读量641

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42229253/article/details/81235042

版权

VUE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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