Vue简介及简单使用

最新推荐文章于 2024-03-28 14:06:37 发布

最美是初见

最新推荐文章于 2024-03-28 14:06:37 发布

阅读量4.6k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43236850/article/details/103876045

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

`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

直接下载

开发版本：<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>
生产版本：<https://cdn.jsdelivr.net/npm/vue>

CDN:(Content Delivery Network内容分布式部署)

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

该方式要求具备上网环境

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

使用 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简单使用——效果展示

在这里插入图片描述

注意：

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

在这里插入图片描述

最美是初见

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue简介及简单使用

Vue简介及简单使用Vue基本介绍2012年出现，是中国人尤雨溪开发的，2016年3月加入阿里巴巴公司(该事件助推了Vue的发展)Vue是目前很火的一个前端框架，是前端三大主流框架之一（Vue、React、Angular）。Vue是一套构建用户界面的渐进式框架（用到哪一块就用哪一块，不需要全部用上）。与其他重量级框架不同的是，Vue 采用的是自底向上增量开发的设计。...
复制链接

扫一扫