一文带你快速入门Vue并了解Vue的常用指令！

原创已于 2024-11-15 19:13:23 修改 · 置顶 · 1.6k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #vue

于 2024-11-14 23:16:50 首次发布

前端技术专栏收录该内容

4 篇文章

订阅专栏

前一篇说完了前端三剑客，继续来学习Vue。作为一款前端开发主流框架，本篇将带你快速入门Vue并了解Vue的常用指令。
在这里插入图片描述

一、Vue概述

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
在这里插入图片描述

官网: https://cn.vuejs.org/

二、Vue开发环境搭建

1、安装Vue

官方提供了两种安装方式，一种是直接用<script>标签引入，还有一种是通过NPM，由于NPM通常需要配合命令行工具使用，所以这里我们选择第一种即直接用<script>引入。

直接下载并用<script>标签引入,vue会被注册为一个全局变量。

进入vue的官网下载

1）开发版本：vue.js

2）生产版本：vue.min.js

注：在开发环境下不要使用压缩版本（生产版本）。不然你就失去了所有常见错误相关的警告!

在VSCode下新建一个vue_basic文件夹，然后在该文件夹下再新建两个文件夹，一个用于存放编写的代码，另一个用于存放下载好的两个vue版本文件 (两个都下载是为了方便后期形成对比)，如下，我们先引入vue

在这里插入图片描述

运行并打开开发者工具（我的是按ctrl+shift+i），显示如下，如果是首次会出现两个提示

在这里插入图片描述

2、解决提示

针对第一个，下载vue开发者工具。我之前下过了，这里就不过多赘述，不清楚的网上自行找教程。下载完成后再刷新一下，就会发现只剩第二个提示。针对第二个，设置关闭生产提示即可。

在这里插入图片描述

设置关闭生产提示即可，如下

在这里插入图片描述

三、入门案例

开发环境搭建好以后，来写一个简单的入门案例测试一下。

1、示例

1）新建一个html文件，编写如下代码。

<!-- 一键引入html基本结构：！+tab -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <!--插值语法（双大括号表达式）-->
        <h1>Hello，{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
        // 创建 Vue实例
        new Vue({
            el:"#root", // id选择器，el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data中用于存储数据，数据供el所指定的容器去使用，这里值先暂时写出一个对象
                name:"Java"
            }
        })
    </script>
</body>
</html>

2）代码截图如下
在这里插入图片描述

3）在浏览器中运行，当Vue实例中name的内容改变时，浏览器中也会改变，如将上面的Java改为 Vue，运行后结果如下。
在这里插入图片描述

2、案例小结

1）必须要创建一个Vue实例，且要传入一个配置对象;
2）root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;
3）root容器里的代码被称为【Vue模板】;
4）一个容器只能被一个Vue实例接管，容器和vue实例是一对一关系，不能一对多，也不能多对一。
在这里插入图片描述

运行结果如下
在这里插入图片描述

5）真实开发中只有一个Vue实例，并且会配合着组件一起使用;

组件思想：将Vue实例拆分成一个个组件

在这里插入图片描述

6.{{xxx}}中的xxx为js表达式，且xxx可以自动读取到data中的所有属性;

使用插值语法（双大括号表达式），双括号里面是js表达式，目的是实现动态接管

js表达式和js代码（语句）的区别，js表达式是一种特殊的js代码。

7）一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;
在这里插入图片描述

四、Vue常用指令

1、概览

如下列举了vue的一些常用指令。

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

在这里插入图片描述

2、指令说明及示例

2.1 v-bind

为HTML标签绑定属性值，如设置href, css样式等。

2.2 v-model

在表单元素上创建双向数据绑定

以上两个方法的示例如下

在这里插入图片描述

运行结果
在这里插入图片描述

附：对应代码

<!-- 一键引入html基本结构：！+tab -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
        // 创建 Vue实例
        new Vue({
            el:"#root", // id选择器，el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data中用于存储数据，数据供el所指定的容器去使用，这里值先暂时写出一个对象
                url:"https://cloud.tencent.com/developer/user/10491946"
            }
        })
    </script>
</body>
</html>