Vue.js框架入门之vue简介及其基本语法(一）

teng28

已于 2022-02-24 15:48:56 修改

阅读量1k

点赞数

分类专栏： Vue.js 文章标签： vue

于 2020-05-31 09:50:36 首次发布

本文链接：https://blog.csdn.net/weixin_43359799/article/details/106451423

版权

Vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue.js框架入门之vue简介(一）

Vue.js学了有一段时间了，最近也在准备面试，然后整理一下Vue.js相关的知识，温故而知新。

一、什么是Vue.js?

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：
```
  	解耦视图与数据
  	可复用的组件
  	前端路由
  	状态管理
  	虚拟DOM（Virtual DOM）
```

二、MVC、MVVM模式简介

1、MVC：Model(模型)+View(视图)+controller(控制器)

主要是基于分层的目的，让彼此的职责分开。View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。用户User通过控制器Controller来操作模板Model从而达到视图View的变化。

View ：用来把数据以某种方式呈现给用户
Model ：其实就是数据
Controller ：接收并处理来自用户的请求，并将 Model 返回给用户

在不考虑后台框架的前提下，MVC交互过程应该是这样的
在这里插入图片描述

学了MVC的框架算是对MVC模式有了新的认识

model：应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存存取等操作
view：视图部分，通常指jsp、html等用来对用户展示的一部分
controller：控制层通常用来处理业务逻辑，负责从试图读取数据，并向模型发送数据

在这里插入图片描述

view操作会触发controller去改变model，然后model再去改变视图，这么以来，三个部分代码都分开来写，逻辑就会清晰很多；mvvm就是基于这种设计理念，来创新的提出mvvm这种开发理念来处理前端开发，可以说mvvm就是相当于前端的mvc，下面就来说下mvvm。

2、MVVM：Model(模型)+View(视图)+ViewModel(视图模型)

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

MVVM模式的框架有：AngularJS、Vue.js和Knockout、Ember.js后两种知名度较低以及是早起的框架模式。

在这里插入图片描述
以上图中可看出三者之间的关系；可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离。

三、vue.js的安装

1、直接用 script引入

在vue官网直接下载vue.js并用

2、CDN引入

对于制作原型或学习，你可以这样使用最新版本：

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

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

3、NPM安装

NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

#最新稳定版

$ npm install vue

代码演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		Hello World!
	</body>
</html>

运行结果

在这里插入图片描述

如果控制台出现以上英文，则说明Vue.js开发环境已经安装成功！

四、Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

代码演示

<!DOCTYPE html>
<html lang="en">

<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>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>

</html>