学习Vue系列—认识Vue

最新推荐文章于 2024-11-09 21:44:05 发布

前端may

最新推荐文章于 2024-11-09 21:44:05 发布

阅读量128

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45316677/article/details/118195363

版权

Vue简介

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

Vue的特点和在Web开发中常见的高级功能

解耦视图和数据
双向数据绑定
可复用的组件
前端路由技术
状态管理
虚拟DOM

Vue的安装使用

使用Vue的方式有很多

直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载和引入

<!--开发环境 --> 
 https://vuejs.org/js/vue.js
<!-- 生产环境--> 
 https://vuejs.org/js/vue.min.js

NPM安装

体验Vue

<!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>
    <!--直接CDN引入-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- 视图-->
    <div id="app">
        <p>{{ str1 }}</p>
    </div>
    <!--数据-->
    <script>
        // Vue的代码始于一个Vue对象, 这个对象专门用来管理某个盒子的内部数据
        new Vue({
            el:"#app", // 表示要管理的id为app的div
            data:{  // data存放的是这个app中需要用到的数据
                str1:"开始学习Vue"
            }
        })
        // el  data 都是固定写法  
        // Vue的特点就是通过数据控制界面
    </script>
</body>
</html>