Vue快速入门

最新推荐文章于 2024-07-24 12:54:56 发布

残忍恶汉！

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量106

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_44705486/article/details/92702829

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue简单入门

1.基础配置

下载Node.js,传送门:https://nodejs.org/en/download/

在控制台输入node -v显示如下界面，则安装成功
在这里插入图片描述

2.创建IDEA工程

IDEA创建一个静态web工程

打开左下角的终端：
在这里插入图片描述
通过npm安装，输入命令：npm init -y
项目下会出现一个package.json文件
安装Vue，输入命令:npm install vue --save
项目中会出现一个node_modules目录，结构如下图

新建一个html，引入vue.js

  <!--引入vue.js--> 
  <script src="./node_modules/vue/dist/vue.js"></script>

下面开始敲代码！

3.快速入门

1.入门demo

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

<div id="test">

    {{name}}最帅

</div>

<!--引入vue.js-->
<script src="./node_modules/vue/dist/vue.js"></script>

<script>

    var app = new Vue({

        el: "#test",
        data: {

            name: "博主"

        }

    })
    
</script>
</body>
</html>

页面效果：
在这里插入图片描述

4.双向绑定

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

<div id="test">
	<!--试试看修改文本框内容-->
    <input type="text" v-model="name">

    {{name}}最帅

</div>

<!--引入vue.js-->
<script src="./node_modules/vue/dist/vue.js"></script>

<script>

    var app = new Vue({

        el: "#test",
        data: {
            name: "博主"
        }

    })

</script>

</body>
</html>