一、 Vue.js 是什么?
官网的描述:Vue 是一套用于构建用户界面的渐进式框架
。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用
。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与 现代化的工具链
以及各种 支持类库
结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
这里有几个关键字: 渐进式框架、现代化的工具链、支持类库
1、用一个例子说明
我们现在很多界面排版的方式,div布局:
Vue是怎样渐进式
到现有的界面上去呢,Vue提供一个很直接的方式就是像JQuery那样,直接引入包的Vue.js
(这个包在官网就可以直接下载) <script src="./vue.js"></script>
,然后你就在现有的界面上使用Vue的东西,然后界面就是变成这样下面的图,某个div或者是板块变成Vue框架
,你现有的其他界面是完全没有影响的,现在我们界面使用出现两个不同类库,这就是Vue的现代化的工具链、支持类库
,当你一步步把一个个板块替换,最后整个界面都是Vue框架,完成整个界面重构的效果,这就是Vue的渐进式框架
2、引入使用
官网-起步 ,在官网上有详细介绍了几种引入方式。这里我就不说了,看一下官网就好了
三、声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法
来声明式地将数据渲染进 DOM
的系统
我来编写了一个例子,分别是javaScript、jQuery、Vue的写法来说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello </title>
</head>
<body>
<!-- javascript -->
<h2 id="app1"> hi javascript </h2>
<!-- jQuery -->
<h1 id="app2" class="title"> hi juqery</h1>
<!-- vue -->
<div id="app3">
<h1>{{message}}</h1>
<ol>
<li v-for="item in lists">{{item.index}}{{item}}</li>
</ol>
</div>
</body>
<script src="./jquery.min.js"></script>
<script src="./vue.js"></script>
<script>
var h1 =document.getElementById("app1")
h1.innerHTML='嘻嘻'
$(function(){
var h1 = $("#app2");
$('.title').html('hello jquery');//修改后的内容
})
const app = new Vue({
el: "#app3",
data: {
message: "hello vue",
lists: ["java","C","C++","Vue","react"]
}
})
</script>
</html>
1.javaScript、jQuery
两个的写法就是按照写的代码一步步执行,最后实现界面效果,这种编程方式就是我们说命令式编程
,就是我们来告诉计算机,你第一步干什么,第二步干什么,第三步...
2.Vue
,它只是把id的交给了Vue的el这个元素做管理
,然后在data做数据DOM
,没有那些步骤操作,我们表面看到就是这样,很简洁。但是你了解到vue源码就会知道,其实Vue做了很多很多操作,只是这些操作我们没看到。现在数据和 DOM 已经被建立了关联
,所有东西都是响应式的,这就是一个声明式渲染
。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新