vue 框架学习（2）- 框架介绍

梦里梦外; 2022-10-28 10:08 257阅读 0赞

## 一、 Vue.js 是什么？ ##

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

#### 1、用一个例子说明 ####

我们现在很多界面排版的方式，div布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
Vue是怎样`渐进式`到现有的界面上去呢，Vue提供一个很直接的方式就是像JQuery那样，`直接引入包的Vue.js`（这个包在官网就可以直接下载） `<script src="./vue.js"></script>` ,然后你就在现有的界面上使用Vue的东西，然后界面就是变成这样下面的图，`某个div或者是板块变成Vue框架`，你`现有的其他界面是完全没有影响的，现在我们界面使用出现两个不同类库，这就是Vue的现代化的工具链、支持类库`，当你一步步把一个个板块替换，最后整个界面都是Vue框架，完成整个界面重构的效果，这就是Vue的渐进式框架  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]

#### 2、引入使用 ####

[官网-起步][-] ，在官网上有详细介绍了几种引入方式。这里我就不说了，看一下官网就好了

三、声明式渲染  
Vue.js 的核心是一个允许采用简洁的`模板语法`来声明式地将数据渲染进 `DOM` 的系统

我来编写了一个例子，分别是javaScript、jQuery、Vue的写法来说明

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>hello </title>
    	</head>
    	<body>
    		
    		<h2 id="app1"> hi javascript </h2>
    		
    		<h1 id="app2" class="title"> hi juqery</h1>
    		
    		<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 的值，你将看到上例相应地更新。

学习参考：[binggoling][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221024/da7955313ea64a478cba8cc03994b863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/b6e3b8f4382343a78a47ef629dce2346.png
[-]: https://cn.vuejs.org/v2/guide/installation.html
[binggoling]: https://blog.csdn.net/qq_30442207/article/details/108225361