web前端全栈0基础到精通（祺）vue 01

一、vue的基本知识

1.1vue 的官网

https://cn.vuejs.org/

1.2概念

渐进式的JavaScript框架？？？？

渐进式。。。
自底向上，逐渐增强。vue.js它本身就是一个库，类似于jq。你可以把它当做一个普通的库去调用，完成简单的demo和界面。当我们的需求增加，产品需求的增加，普通的页面无法满足我们的日常开发需求。我们可以利用vue的够工具，也就是vue-cli 脚手架快速搭建项目的模型（项目的基本骨架都成型了）。项目越来越大，我们还可以调用vue的核心插架比如路由（vue-router）或者状态管理（vuex）....

----
官方的概念：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.3vue的版本

vue3.0 它只是测试版本！！！！ 并没有正式上线！！！ 有很多bug和不稳定
我们目前讲的是vue2.x版本

1.4 VUE的缺点

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.5安装并下载

• CDN不推荐

开发环境： 包含了一些命令提示和警告


生产环境：

• 把核心库下载到本地并引入

基本不用

• npm管理包！！！（经常用）

如果是一个空文件夹，我们要先去创建package.json文件，用于管理所有的插件
npm init -y (默认自动创建)

-------
下载vue的方法：
npm install(简写成i) vue

二、vue基本指令

• v-html
• v-text
• v-if(v-else)和v-show
• v-bind： 动态绑定 可以简写成：
• v-on: 事件绑定 可以简写成 @
• v-for ：循环比那里
• v-model ：双向数据绑定

三UI框架之Bootstrap(扩展)

3.1官网地址

https://www.bootcss.com/ 中文官网
https://v4.bootcss.com/ 4版本网址

3.2概念

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

3.3 通过NPM下载安装

npm install bootstrap

版本号： + [email protected]

3.4 基本应用

错误集锦

1、Do not mount Vue to  or  - mount to normal elements instead.
不能把内容挂载html或者body上。必须挂载到正常的元素上

面试题

对于Vue是一套渐进式框架的理解

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

请列出至少4个vue基本指令，并简要说明其作用。

v-model 多用于表单元素实现双向数据绑定
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json,需要注意从vue2开始取消了$index
v-show 显示内容
v-if 显示与隐藏
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改,可以简写成:
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签

v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

什么是 MVVM设计模式？

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TxTA5Ma-1619675808468)(D:\2020IT培训事业部Web全栈面授就业班214班(1207班次)]\day01\img\mvc.png)

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L8YE7CwY-1619675808470)(D:\2020IT培训事业部Web全栈面授就业班214班(1207班次)]\day01\img\mvvm.png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOMwGXKl-1619675808471)(D:\2020IT培训事业部Web全栈面授就业班214班(1207班次)]\day01\img\vue-mvvm.jpg)

（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开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{ {message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

vue初始化页面闪动问题

答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{ {message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
然后在根元素加上v-cloak指令