Vue基础

最新推荐文章于 2025-12-17 14:07:30 发布

原创最新推荐文章于 2025-12-17 14:07:30 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

双向绑定

首先下载js,jav包,这个是可以在官网下载的,然后移动到和新建的html文件同路径下.之后在代码中script这段.如图:

2.配置好后,外面可以简单测试一下,创建js代码段,写Vue代码

<script>
        //创建一个实列
        new Vue({
            el:"#try",//将id为try的管理权交给Vue
            data:{  //双向绑定
                first:"hello Vue!!!"
            }
        });
    </script>

3.添加网页内容,并命名id

<div id="try">
        {{first}}
    </div>

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
    <div id="try">
        {{first}}
    </div>
    <script>
        //创建一个实列
        new Vue({
            el:"#try",//将id为try的管理权交给Vue
            data:{  //双向绑定
                first:"hello Vue!!!"
            }
        });
    </script>
</body>
</html>

5.要注意的是 id后面的try为变量,可以随意命名,但是要和el:""里的内容一致