Vue入门学习(1) 什么是双向绑定?

59 阅读 0 评论 39 点赞

我是靠谱客的博主诚心宝马，最近开发中收集的这篇文章主要介绍Vue入门学习(1) 什么是双向绑定?，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.IDEA创建一个vue项目

注:这里我们比较针对有SpringMVC基础的同学设定的, 所以开发工具我们直接使用IDEA即可, 写代码前我们的准备工作

1所需要的工具(vue.js)
2.还有我们的 CDN 后面会用到

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

3.新建一个项目
4.随便建立一个普通的文件夹即可

在这里插入图片描述

5.新建一个html来开始编写我们的vue代码
代码中的注释解释了这些关键字的作用
今天我们的目的就是详细讲解一下双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    
</head>
<body>

<!--view层 也就是模板-->
<div id = "app">
    {{message}}
</div>
<!--view层 也就是模板-->
<div id = "app2">
    {{message}}
</div>

<!-- 1导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    var vm  = new Vue({
        el:"#app", //元素
        // Model: 数据
        data:{
            message:"hello , vue!"
        }
    });
    var vm  = new Vue({
        el:"#app2",   //元素
        // Model: 数据
        data:{
            message:"hello , vue!"
        }
    });
</script>

</body>
</html>