第1集丨Vue 江湖 —— Hello Vue

最新推荐文章于 2023-09-26 20:18:02 发布

秋堂主

最新推荐文章于 2023-09-26 20:18:02 发布

阅读量140

点赞数

分类专栏： Vue2江湖文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/DUQGQG/article/details/131975643

版权

Vue2江湖专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，概括为以下三点：

Vue 是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.1 参考网址

1.2 下载

开发版和生产版
下载地址：Vue.js下载

二、Hello Vue

用VSCode新建一个简单的VUEJS工程，结构目录如下：

在这里插入图片描述

2.1 创建页面

新建index.html页面，引入vue.js
准备一个div容器，创建Vue模板
将Vue实例和容器绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器:称为Vue模板 
        两个花括号为插值语法，里面的为js表达式
    -->
    <div id="root">
        <h1>hello {{name.toUpperCase()}}!</h1>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false;

        // 创建Vue实例：容器和实例一对一
        new Vue({
            el:"#root",
            // data中用于存储数据，数据提供el所指定的的容器去使用。
            data: {
                name:'Vue'
            }
        });

    </script>
</body>
</html>