vue的基本介绍

什么是vue？

为什么使用vue？

vue优点

缺点

对于Vue是一套渐进式框架的理解（面试题）？

SPA(单页面应用)

相对复杂

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

vue的下载及引入

练习

vue的使用

实例化vue

定义数据和方法

设计模式

mvc设计模式

MVVM设计模式

vue的基本介绍

什么是vue？

1.渐进式javascript框架
2.作者:尤雨溪个人开发
3.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

为什么使用vue？

一个完整的页面:HTML(基本视图)+CSS(样式)+js(交互).通常情况下对于HTML我们又称之为视图结构
视图结构组成: 内容(标签)和数据(文本内容和属性值)
而刚好vue只关注视图层.将数据和内容进行拆分
内容交给HTML进行处理,数据交给后端进行处理.
优势:
1.适用于前后端分离
2.用户体验更优

vue优点

vue的两个核心:组件化应用和数据驱动

轻量级框架大小33.46KB min+gzip
双向数据绑定

模型层数据的改变会更新到视图层,视图层数据的更新会同步到模型层

提供了基本的指令

使用指令可以解决有些特殊的复杂的逻辑

客户端路由

可以做到页面和地址实现一一对应的关系

数据驱动

可以做到页面和地址实现一一对应的关系

缺点

不支持 IE8及以下浏览器
首屏加载速度慢

在首次加载项目时,会将所有的静态资源全部加载过来,eg:CSS js img font

不利于SEO优化

因为在百度搜索引擎中检索不到js

对于Vue是一套渐进式框架的理解（面试题）？

渐进式代表的含义是：主张最少。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用MVVM和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

SPA(单页面应用)

PA:single page application 单页面应用

MPA:multi page application 多页面应用

单页面（SPA）和多页面（MPA）的区别？

	单页面（SPA）	多页面（MPA）
刷新方式	页面局部刷新或更改	整页刷新
url 模式	a.com/#/pageone a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用户体验	页面片段间的切换快，用户体验良好	页面切换加载缓慢，流畅度不够，用户体验比较差
转场动画	容易实现	无法实现
数据传递	容易	依赖 url传参、或者cookie 、localStorage等
搜索引擎优化(SEO)	需要单独方案、实现较为困难、不利于SEO检索，可利用服务器端渲染(SSR)优化	实现方法简易
适用范围	高要求的体验度、追求界面流畅的应用	适用于追求高度支持搜索引擎的应用
开发成本	较高，常需借助专业的框架	较低，但页面重复代码多
维护成本	相对容易	相对复杂

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI （视图template的内容）与用户的交互，避免页
面的重新加载。

优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

vue的下载及引入

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

直接通过script引入

<script src="vue.js"></script>

1.npm init   #初始化package.json
2.npm i vue -S  或者 npm i vue --save   #下载vue模块,并且保存到package.json文件

教手架

练习

<!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><!-- 1.引入vue  cdn--><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>--><!-- 2.引入vue  script --><!-- <script src="./vue.js"></script> --><!-- 3.引入vue npm --><script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h2>购买的商品为:{{name}}</h2><div>单价:<input type="text"  v-model="price"></div><div>数量:<input type="text"  v-model="num"></div><div>总价:{{price*num}}</div></div><script>// 实例化vue对象let vm =  new Vue({el:'#app',data:{name:'iphone13',price:6999.00,num:1,}})</script>
</body>
</html>

vue的使用

实例化vue

* 1.实例化vue需要接收一个参数
* 2.接收参数为:Object
* 3.该对象中会有很多选项: el data
* 4.不能将vue实例化挂载到HTML或者body上,将vue实例挂载到正常的元素节点上
* 5.任何CSS选择器都可以作为vue实例的挂载点,但是建议使用id选择器
* 6.一个页面中建议只有一个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><!-- 1.引入vue  --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><h2>{{title}}</h2><div>{{name}}</div></div><!-- <div class="app1"><h2>{{title}}</h2><div>{{name}}</div></div> --><script>// 3.实例化vue/*** 1.实例化vue需要接收一个参数* 2.接收参数为:Object* 3.该对象中会有很多选项: el data* 4.不能将vue实例化挂载到HTML或者body上,将vue实例挂载到正常的元素节点上* 5.任何CSS选择器都可以作为vue实例的挂载点,但是建议使用id选择器* 6.一个页面中建议只有一个vue实例化*///    注释: 将vue实例挂载到id等于app的div元素上 let vm =  new Vue({el:'#app',//el:elementdata:{//数据|属性   主要存放数据name:'哈哈哈',title:"vue基础学些",}});//    console.log(vm.$el);//    new  Vue({//        el:'.app1',//        data:{//             name:'哈哈哈',//             title:"vue基础学些",//        }//    })</script>
</body>
</html>

mustache语法

采用{{}}来解析data选项中的属性, 向{{}}我们把它称之为mustache语法

定义数据和方法

数据

<!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><!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建dom元素 --><div id="app"><!-- 总结:在{{}}可以直接写js语法 --><!-- 直接展示data中属性值 --><div>name的值为:{{name}}</div><div>num的值为:{{num}}</div><!-- 字符串拼接  --><div>{{'hello'+name}}</div><!-- 计算 --><div>{{1+1}}</div><!-- 判断  --><div>{{age >= 18 ? '已成年' : '未成年'}}</div><!-- 数组  --><p>{{arr}}</p><!-- 对象 --><div>{{obj}}</div></div><script>let  vm = new Vue({el:'#app',data:{//属性name:'vue',num:10,age:20,arr:['贾玲','沈腾','关晓彤'],obj:{name:'杨志远',age:20,girlFriend:'翠花',}}})</script></body>
</html>

方法

<!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><!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 调用自调用方法 --><div>{{foo()}}</div><!-- 调用系统方法 --><div>{{price.toFixed(2)}}</div><div>{{fn()}}</div></div><script>// vue实例的选项: el ,data, methodsnew Vue({el:'#app',data:{//属性name:'vue',price:30.00,},methods:{//方法foo(){console.log(this.name);},fn:function(){console.log('调用了');},}})</script>
</body>
</html>

设计模式

mvc设计模式

M:Model 模型层作用:处理数据逻辑,一般跟数据库交互

V:View 视图层作用:展示页面及渲染数据

C:Controller 控制器作用:处理业务逻辑,为view和model的中间件

MVVM设计模式

Model–View–ViewModel （MVVM）是一个软件架构设计模式MVVM 源自于经典的 Model–View–Controller（MVC）模式（大部分后端模式）

MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

M:Model 模型层作用:处理数据及逻辑

V:View 视图层作用:展示内容和渲染数据

ViewModel: 视图模型层, 作用:作为model和view的中间件

（1）View 层
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS来构建。
（2）Model 层
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
（3）ViewModel 层ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。MVVM 框架实现绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。这样 View 层展现的不是Model 层的数据，而是 ViewModel 的数据，由 ViewModel负责与 Model 层交互，这就完全解耦了 View 层和 Model
层，这个解耦是至关重要的，它是前后端分离方案实施的重
要一环。

初识vue的使用和设计模式相关推荐

渣渣枫初识Vue与Element
渣渣初学Vue与Element 一.Vue 1.初识Vue 2.Vue的入门 3.Vue入门升级 4.小结二.Vue常用指令 1.常用指令 2.文本插值 3.绑定属性 4.条件渲染 5.列表渲染 6 ...
01 【Vue简介初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网英文官网中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue2学习笔记:第一章一.初识Vue 1. Vue的特点 2. Vue实例中的el和data 3.总结二.模板语法 1.插值语法 2.指令语法三.数据绑定 1.单向数据绑定(v-bind) 2 ...
Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
第93天学习打卡（Vue 初识Vue）
Vue:前端体系,前后端分离 1.概述 MVVM(Model- View-ViewModel)是一种软件架构设计模式,是一种简化用户界面的事件驱动编程模式. MVVM源自经典的MVC(Model(在后 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
vue = 什么意思_Vue 00 —— 初识 Vue，从放弃到入门
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,如有不当 ...
初识vue 2.0（2）：路由与组件
1,在上一篇的创建工程中,使用的的模版 webpack-simple 只是创建了一个简单的demo,并没有组件和路由功能,此次采用了webpack模版,自动生成组件和路由.^_^ 在模版初始化时,因为 ...

初识vue的使用和设计模式

vue的基本介绍

什么是vue？

为什么使用vue？

vue优点

缺点

对于Vue是一套渐进式框架的理解（面试题）？

SPA(单页面应用)

相对复杂

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

vue的下载及引入

练习

vue的使用

实例化vue

定义数据和方法

设计模式

mvc设计模式

MVVM设计模式

初识vue的使用和设计模式相关推荐

最新文章

热门文章

初识vue的使用和设计模式

vue的基本介绍

什么是vue？

为什么使用vue？

vue优点

缺点

对于Vue是一套渐进式框架的理解（面试题） ？

SPA(单页面应用)

相对复杂

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

vue的下载及引入

练习

vue的使用

实例化vue

定义数据和方法

设计模式

mvc设计模式

MVVM设计模式

初识vue的使用和设计模式相关推荐

最新文章

热门文章

对于Vue是一套渐进式框架的理解（面试题）？