一、什么的Vue
官方说法就是:Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
按我来说:首先Vue是一套用于构建用户界面的渐进式的JavaScript框架,那肯定又有人迷了,什么的构建用户界面,什么的渐进式啊,这不是还看不明白吗,坑人博客不看了...
下面我就为大家一一讲解一下这些看不懂的名词
1.什么的构建用户界面:
当我们获取到了一个数据时,Vue不管这个数据是怎么来的,服务器传递也罢,接口传递也罢,Vue的任务就是把这个数据,渲染到合适的位置、合适页面当中去,而这个过程就是构建用户界面
2.什么的渐进式
可以理解为自底向上逐层的应用,再通俗来讲就是,Vue可以想用那个就用那个,当你只有一个页面的时候,Vue就一个组件,当你有多个页面的时候,Vue不会调用所有的组件,而是你要那个组件,我给你那个组件,按我的理解就是:不多管闲事,只做自己责任之内的事情。
3.什么的框架
框架大白话就是可以提高,我们程序猿的开发效率,使开发变的简单。而且框架的使用都有约定俗成的操作规范,无论任何人使用,只要按照规范操作,就可以轻松使用。
二、MVVM设计模式
什么的MVVM设计模式呢,再说MVVM之前,我们先简单了解一下MVC设计模式
而MVVM设计模式和MVC设计模式的不同点就在于C(控制器)
MVVM设计模式解析就是:M为模型,V为视图(也就是html),VM为视图模型
什么是视图模型?
视图模型即可以实现数据的双向绑定,假如一个input框里面,是我要传输的值,我输入一个在下是姜泥断了姒,那么后台就会接收到在下是姜泥断了姒。而我如果不想输入这个了,我想输入姜泥断了姒,那么后台就会接收姜泥断了姒。从而把数据渲染到页面上去。
注意:这里有人疑惑了,为什么VM进行DOM操作,就会减轻系统负担,不都是进行DOM操作吗?
这里就涉及到了,真实DOM和虚拟DOM
三、真实DOM和虚拟DOM
真实DOM
虚拟DOM
四、Vue入门程序
1.引入vue.js
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>
2.创建容器
<!-- 创建容器-->
<div id="container">
<h1>{{code}}</h1>
<h1>{{name}}</h1>
<h2>{{message}}</h2>
</div>
3.渲染数据
<script>
// 1、创建Vue对象 参数:对象【配置项(容器地址,数据....)】
new Vue({
//el 为创建容器的类名
el:"#container",
//data 如果code为200,但是容器里面没有code这个占位符,则不会显示code这个数据
data:{
name:"今天学习了Vue",
message:"感觉怎么样?",
code:200
}
});
</script>
在下初识Vue,愿我们也可以一起努力。