1、Vue.js是什么
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
官网:https://cn.vuejs.org/
Vue作者:尤雨溪/中国无锡
2、库和框架的区别
2.1、 库(Library)
本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
2.2、框架(Framework)
是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3、什么是CDN加速?
CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,
使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
CDN概况
CDN的全称是Content Delivery Network,即内容分发网络。
CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。
CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备
CDN基本原理:将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。
4、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></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<h3>{{msg}}</h3>
<input type="text" v-model="msg" />
<h3>{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
//作用将Vue实例挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
//注意:边界不能有兄弟标签,边界一定是根标签
const vm= new Vue({
el:'#app',
data:{
msg:'hello vue'
},
created() {
this.msg='xxx';
},
mounted() {
this.msg='aaa';
}
})
</script>
</html>
运行结果:
通过一个文本框输入的值改变该界面的所有值
事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<input type="text" />
<!-- v-on代表是Vue指令,:号后面代表的是参数 -->
<button v-on:click="xxx">Vue的事件按钮</button>
<button @click="xxx">Vue的事件按钮</button>
</div>
</body>
<script type="text/javascript">
//作用将Vue实例挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
//注意:边界不能有兄弟标签,边界一定是根标签
new Vue({
el:'#app',
//es6之前的写法
/* data:{
msg:'hello vue'
}, */
/* data:function(){
return {
msg:'hello vue'
}
}, */
data(){
return {
msg:'hello vue2'
}
},
methods:{
xxx() {
console.log('xxx方法调用');
this.msg='sssss';
}
}
})
</script>
</html>
运行结果: