1. Vue.js是什么?
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
2. 库和框架的区别
2.1 库(Library)
库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
理解:相当于java的api,提供封装好的方法
2.2 框架(Framework)
框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3. MVVM的介绍
1.MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M:model数据模型(JSON)
V:view视图(HTML)
VM:ViewModel 视图模型
MVVM核心思想,是关注model的变化,让MVVM框架利用自己的机制自动更新DOM,也就是所谓的数据-视图分离,数据不会影响视图。
请大家记住,要丢弃之前的思想(不要想着如何去拿到页面的元素),而是想着去操作数据!!! 数据是核心
2、优点
1、Controller简洁清晰
ViewModel分离出来大部分的Controller代码,更加清晰和容易维护。
2、开发解耦
前后端分离
3、缺点
1、代码量比MVC多。
4. 安装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="js/vue.js" ></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<!-- <script src="dist/vue.min.js"></script> -->
2.什么是CDN加速?
CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,
使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
CDN概况
CDN的全称是Content Delivery Network,即内容分发网络。
CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。
CDN加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。
CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备
CDN基本原理:将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。
5.基本语法
<body>
<h1>{{title}}</h1>
<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="app">
<h1>{{title}}----{{ts}}</h1>
<button v-on:click="doClick(1)">dwdwdw</button>
</div>
<h1>{{title}}</h1>
</body>
<script>
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
var vm=new Vue({
el:'#app', // DOM 元素,挂载视图模型,
data:{
title:'Hello Vue!!!' , // 定义属性,并设置初始值
ts:new Date().getTime()
},
methods:{ // 定义方法,用于事件交互时使用的函数
doClick:function(num){
alert('hellow vue!!!'+num);
},
doRegster(){
}
}
});
</script>
6.v-model v-on与 this
v-model 双向绑定
v-on单向
局部访问:this
全局访问:vm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{data}}</h1>
<!-- 示例一 数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化-->
<input type="text" v-model="num" />
<button v-on:click="doSubmit()">提交</button>
<!-- 示例二 只有当实例被创建时data中存在的属性才是响应式的 -->
{{name}}<br />
<br />
<!-- 用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num" />
<button v-on:click="doIncrement()">++++</button>
<br>
<!-- 示例五 用v-once指令进行单向绑定 -->
<span v-once>{{num}}</span>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:function(){
return{
title:'hellow Vue!!',
data:new Date().getTime(),
num:10,
name:'ls'
}
},
methods:{
doSubmit:function(){
console.log(this.num);
},
doIncrement:function(){
this.num=parseInt(this.num)+1;
console.log(vm.num);
//示例四: 局部访问和全局访问
//局部访问:this
//全局访问:vm
console.log("num=%d","name%=s",this.num,this.name);
}
}
})
vm.name='zs';
</script>
</html>