Vue的基本介绍和大致讲解以及安装
1.安装Vue
1 cdn下载(需连接网络)
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2 手动下载
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>
注1：什么是CDN加速？
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
CDN概况
CDN的全称是Content Delivery Network，即内容分发网络。
CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、
css等文件。
CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海
访问, 会从最近的节点返回资源，这是核心。
CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备
CDN基本原理：将源站内容分发至最接近用户的节点，使用户可就近取得所需内容
，提高用户访问的响应速度和成功率。
2.什么是vue，作者简介
1.Vue.js（读音 /vjuː/, 类似于 view） vue是一个
构建用户界面（UI）的[渐进式]javaScript框架。
官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡
3.为什么要用vue
传统的网页形式是浏览器脚本语言js连接了各种各样的html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，比如juqery中使用的
$('#dd').parent().parent().parent()
一开始很好查找，但当页面结构发生变化，也就是说DOM的关联与嵌套层次要发生改变，那么之前的代码可能就会变成这样了：
$('#xxx').parent().parent().parent().parent().parent()
这样产品迭代后，对dom节点的查找操作等行为会有很大的性能损耗。
4.官网对vue的优点描述
vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。
图一：
1.易用：
学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦
2.灵活：
如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统 ，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。
3.高效：
虚拟dom： 其数据全部在内存中，只有js引擎参与其中
而真实dom会有浏览器渲染层在其中
你的知道浏览器的虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：
虚拟DOM不会进行排版与重绘操作
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
真实DOM频繁排版与重绘的效率是相当低的
虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）
使用虚拟DOM的损耗计算：
总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘
直接使用真实DOM的损耗计算：
总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘
只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的 次数.
虚拟DOM只是个 JavaScript object
它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.
获取/修改 大量DOM元素的时候，就会先在 虚拟DOM 里 取值 对比.
虚拟dom是在内存中维护的dom树，是在实体dom之上的一层抽象。有了这层抽象，不管是查询操作还是修改操作，都是先操作内存中的虚拟dom，在这个过程中可以做很多优化，从而减少对实体dom的操作。举两个例说明，1. 查询一个text标签的值，可以直接从虚拟dom中查找得到，根本不需要查询实体dom。2. 在一次操作中，要修改列表中的两条记录，要修改的元素会先把变更同步到虚拟dom上，然后根据最新的虚拟dom，一次性渲染出最终的实体dom，如果没有虚拟dom，两条记录的修改至少要对应两次对实体dom的操作，显然操作实体dom越频繁，网页速度越慢。
对于vue.js的Virtual DOM，目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架，引入Virtual DOM会加大Vue.js本身的代码尺寸，也会消耗更多CPU（手机上会更耗电）（注意：消耗更多的CPU并不意味着会更卡，因为JavaScript计算是后台计算，他的计算量还不至于让DOM操作变得卡顿），并且在操作单个DOM元素的时候，反而多了一道计算工序，会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素，肯定操作的DOM量级普遍较大，平均一下还是比较划算的。
2. 库和框架的区别
1 库(Library)
本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
2 框架(Framework)
是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3. MVVM的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M：model数据模型（JSON）
V：view视图（HTML）
VM：ViewModel 视图模型
V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器 onclick
M（修改数据） -> V 将后端数据（JSON）通过赋值的方式在视图层展现 $('#id').val()
数据是核心
注1： 虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵 循MVVM模型
注2：学习Vue要转化思想：“不要再想着怎么操作DOM，而是想着如何操作数据！！！”
入门代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue之入门</title>
<!-- 引入vue.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<!-- 插值 -->
<div id="app">
<li>1.文本</li>
title={{title}},ts={{ts}}
<li>2.html</li>
<div v-html="html"></div>
<li>3.属性</li>
<a href="https://www.baidu.com">百度</a>
<a v-bind:href="href">新浪</a>
<input type="button" value="点我" v-on:click="Dated" />
<li>4.表达式</li>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1}}
{{ ok ?'YES':'NO'}}
<li v-bind:id="'list-' + id">的骄傲科技发达</li>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:function(){
return{
title:'Hetd wibtian',
ts:new Date().getTime(),
html:'<input type="text" value=210>',
href:'http://www.sina.com',
str:'hellovue',
number:10,
ok:false,
id:22
}
},
methods:{
Dated(){
alert(11111);
}
}
});
</script>
</html>
效果图
总结
基本入门很简单。
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
