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>