1.前端框架—Vue入门

最新推荐文章于 2024-10-05 09:50:31 发布

喵先生呢

最新推荐文章于 2024-10-05 09:50:31 发布

阅读量282

点赞数

分类专栏： # 前端-Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45267102/article/details/108984781

版权

前端-Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

Vue入门

Vue入门

1. 使用Vue的三种方案

1.1 下载安装

下载地址：https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，得到vue.js文件，引入下载的vue.js就可以使用Vue了

1.2 使用CDN

或者也可以直接使用公共的CDN服务

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.3 推荐npm安装

npm是什么？

npm（Node Package Manager）意思是 node 的包管理器，它是随着 NodeJs 安装时一起被安装的；
无论是在前端还是在前端开发中都会使用到 npm 包管理器。（前端框架开发react、Vue…，后台 node 开发）；

安装

去官网下载对应操作系统的 nodeJS，官网地址：https://nodejs.org/en/download/

npm简单命令使用

npm -v 查看 npm 的版本

在idea的左下角，有个Terminal按钮，点击打开控制台：

在这里插入图片描述

进入hello-vue目录，先输入：npm init -y 进行初始化

在这里插入图片描述

安装Vue，输入命令：npm install vue --save安装Vue

在这里插入图片描述

然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。

2. vue入门案例

2.1 HTML模板

在hello-vue目录新建一个01.HelloVue.html我们编写一段简单的代码：

<body>
    <div id="app">
        <h2>
            {{name}}非常帅！
        </h2>
    </div>
</body>

2.2 vue声明式渲染

然后我们通过Vue进行渲染：

<script src="node_modules/vue/dist/vue.js" ></script>
<script>
        // 创建vue实例
        var vue = new Vue({
            // el即element，该vue实例要渲染的页面元素
            el:"#app",
            
            // 渲染页面需要的数据
            data:{
                name:"涛哥"
            }
        });
</script>

首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name：这里我们指定了一个name属性

页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

2.3 双向绑定

02.双向绑定.html

我们在data添加了新的属性：num
在页面中有一个input元素，通过v-model与num进行绑定。
同时通过{{num}}在页面输出

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">++</button>
    <h2>
        {{name}}非常帅！有{{num}}位女神为他着迷。
    </h2>
</div>

</body>
<script>
    var vue = new Vue({
       el:"#app",
       data:{
           name:"涛哥",
           num:4
       }
    });

</script>
</html>

效果：

在这里插入图片描述

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。

2.4 事件处理

03.事件处理.html

<!--我们在页面添加一个按钮-->
<button v-on:click="num++">点我</button>

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
普通click是无法直接操作num的。
效果：

在这里插入图片描述

1.前端框架—Vue入门

文章目录

Vue入门

1. 使用Vue的三种方案

1.1 下载安装

1.2 使用CDN

1.3 推荐npm安装

2. vue入门案例

2.1 HTML模板

2.2 vue声明式渲染

2.3 双向绑定

2.4 事件处理

☆