Vue简介及简单使用

Vue简介及简单使用

Vue基本介绍

  • 2012年出现，是中国人 尤雨溪 开发的，2016年3月 加入阿里巴巴公司(该事件助推了Vue的发展)

  • Vue是目前很火的一个前端框架，是前端三大主流框架之一（Vue、React、Angular）。

  • Vue是一套构建用户界面的渐进式框架（用到哪一块就用哪一块，不需要全部用上）。与其他重量级框架不同的是，Vue 采用的是自底向上增量开发的设计。

  • Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合，有配套的第三方类库。

  • Vue是一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目。

  • 内部集成了许多基础技术，例如html、css、javascript、ajax、node等，当然还有Vue本身高级技术体现，例如组件、过滤器、指令、路由、webpack等等。

  • 提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。

  • Vue兼具React和Angular的优点，并剔除了它们的缺点，支持所有兼容ECMAScript 5的浏览器，IE9以上

##学习Vue前的技术准备

  • 掌握 HTML + CSS + JS基本网页制作能力
  • 了解Node基础概念、包、模块化，会用 npm维护项目中的包即可
  • ES6基础语法要会用

获取Vue

网址：

https://cn.vuejs.org 官方地址(服务器在外国，访问速度慢)

https://vue.docschina.org/ 官方地址镜像(服务器在中国，访问速度快)

最新稳定版本：2.6.11

  1. 直接下载
  • 开发版本：<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>
  • 生产版本：<https://cdn.jsdelivr.net/npm/vue>
  1. CDN:(Content Delivery Network内容分布式部署)

在应用中通过script标签直接引入一个完整路径名的Vue文件包

该方式要求具备上网环境

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. 使用 npm下载（默认安装最新稳定版）
npm install vue

注意：

Vue 不支持 IE8 及其以下版本

Vue简单使用

Vue简单使用——示例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 创建一个供vue操控的标签容器(推荐div) -->
    <div id="app">
        {{city}} ------------{{weather}}
    </div>
    <script src="./vue.js"></script>
    <script>
        // 实例化Vue对象
        var vm = new Vue({
            // el:'选择器',// el为固定名称,理解为element,使得Vue实例与标签容器联系
            el: '#app',
            //data也是固定名称
            data: {
                city: '北京',
                weather: '阳光灿烂,你我都好'
            }
        });
    </script>
</body>

</html>

Vue简单使用——效果展示

在这里插入图片描述

注意：

  1. Vue需要有目标操作容器，可以是div、p、span等等标签，推荐div，所有被Vue处理的内容都放到该容器中
  2. {{}} 是Vue内容，浏览器上看不到，最终要被解析掉
  3. {{}}双花括号是Vue语法
  4. el、data 是Vue内部固定的标志名称
  5. data内部可以声明一个或多个数据供使用
  6. el:’#app’ 是通过id="app"联系容器，也可以通过其他“选择器”联系
  7. 模板中所有内容需要体现到div容器里边

Vue-MVVM设计模式

  • 前端MVVM设计模式，主要把每个页面分成了M（Model）、V（View）、VM（ViewModel）。VM是其中核心，是M和V之间的调度者。
  • M，保存的是每个页面中单独的数据。
  • V，每个页面的html结构。
  • VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。
  • 前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）

在这里插入图片描述