目录
Vue.js是什么?
官网概念:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
个人理解: Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
库和框架的区别?
库
概念:库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者。
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
JavaScript:document.getElementById()
jQuery: $('').val()
框架
框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码 。
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
MVVM的介绍
概念: MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步
M:model数据模型(JSON)
V:view视图(HTML)
VM:ViewModel 视图模型
1) V(修改数据) -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
$('#btn_login').click(function(){
通过ajax将页面中的数据通过json格式传递到后端服务器
});
2) M(修改数据) -> V 将后端数据(JSON)通过赋值的方式在视图层展现(后端到前端)
通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
$.ajax({
url:
data:
dataType:
type:
success:function(data){
$('#book_name').val(data....); .text() .html()
...
}
})
共性:不管是前端到后端,还是后端到前端,使用传统的方式都必须首先拿到
页面的Document元素,只有拿到了页面元素才能进行后续操作
MVVM(数据双向绑定)过程
M -> VM -> V
V -> VM -> M
请大家记住,要丢弃之前的思想(不要想着如何去拿到页面的元素),而是想着去操作数据!!!
数据是核心
注1:虽然没有完全遵循MVVM模型,Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
注2:学习Vue要转化思想:“不要在想着怎么操作DOM,而是想着如何操作数据!!!”
安装Vue
cdn下载(需连接网络)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
手动下载
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>
下载步骤:官网地址:Vue.js=》起步=》点击安装=》选择开发版本=》下载
什么是CDN加速?
CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,
使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
CDN概况
- CDN的全称是Content Delivery Network,即内容分发网络。
- CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。
- CDN加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。
- CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备
- CDN基本原理:将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。
什么是BootCDN
BootCDN是Bootstrap中文网支持并维护的前端开源项目免费CDN服务,致力于为Bootstrap、jQuery、Angular、Vuejs
一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。
使用cdn的好处
1.不用担心自己网站访客,在任何时间,任何地点,任何网络运营商,都能快速打开网站,说白了就是把你的资源交给第三方托管,它快你的网站访问就快,并且不需要消耗你的网站流量,提升访问速度。
2.各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少。
3.给网站直接带来的好处就是:流量,咨询量,客户量,成单量,都会得到大幅度提升。
想想看,一个打开速度很快的网站和一个打开速度很慢的网站,用户的体验是完全不一样的,那么哪些群体使用更广泛呢?
用cdn的坏处
说完好处也要说说坏处了,对于不使用cdn的网站来说,它崩任他崩,我自坐如松。对于少数资源依赖cdn的网站来说,
可能仅影响体验,比如页面显示、js事件等,但对于严重依赖cdn的网站来说,只能说同归于尽了
下载bootcdn=>点击vue=》找到2.6.0(这里根据你的vue版本来下载)=》找到vue.js复制script标签
基础 示例
示例一:
引入开发所需要的文件
工具:HBuilder
<head>
<meta charset="utf-8" />
<title></title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<!-- 生产环境版本,优化了尺寸和速度 -->
<!-- jquery.js jquery.min.js压缩版本,适用于生产版本 -->
<!--方式一:手动方式-->
<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
<!-- 方式二:CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
第一个Vue实例:“Hello Vue!”
注: 每一个vue实例都是从new构造函数开始!
<body>
<div id="app">
<h1>{{title}} </h1>
</div>
</body>
<script>
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
data:{
title:'hello vue!!!' ,// 定义属性,并设置初始值
},
methods:{
},
});
</script>
注:指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响
<h1>{{title}}</h1>
添加时间戳, 防止页面有缓存
<div id="app">
<h1>{{title}}--{{ts}} </h1>
</div>
</body>
<script>
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
data:{
title:'hello vue!!!' ,// 定义属性,并设置初始值
ts:new Date().getTime()
},
methods:{
},
});
</script>
注1:data在组件开发中的写法必须是一个函数 (data在组件开发中的写法必须是一个函数)
注2:vue指令:指的是是带有“v-”前缀的特殊属性
注3:用v-on:click指令绑定单击事件
<body>
<h1>{{title}}</h1>
<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="app">
<h1>{{title}}--{{ts}} </h1>
<!-- 1)javascript:
window.addListener
<button onclick="return confirm('确认删除吗')">按钮</button>
2)jquery
$('选择器').bind('click',function(){});
$('选择器').onclick(function(){});
$('选择器').ondbclick
-->
<button v-on:click="doClick(1)">有种点我</button>
</div>
</body>
<script>
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
//每一个vue实例都是从new构造函数开始!
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
//方式一
/* data:{
title:'hello vue!!!' ,// 定义属性,并设置初始值
ts:new Date().getTime()
}, */
//方式二:函数方式(data在组件开发中的写法必须是一个函数)
data:function(){
return {
title:'hello vue!!!' ,// 定义属性,并设置初始值
ts:new Date().getTime()
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doClick:function(num){
alert('hello vue!!!'+num);
},
doRegister(){
},
doLogin(){
}
},
});
</script>
数据的双向绑定案例
示例一:数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化
<body>
<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="app">
<h1>{{ts}} </h1>
<!-- 示例一:数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化 -->
<input type="text" v-model="num" />
<button v-on:click="doSubject()">提交</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
//方式二:函数方式(data在组件开发中的写法必须是一个函数)
data:function(){
return {
ts:new Date().getTime(),
num:10
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doSubject:function(){
console.log(this.num);
}
}
});
</script>
示例二: 只有当实例被创建时data中存在的属性才是响应式的
<body>
<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="app">
<h1>{{ts}} </h1>
<!-- 示例一:数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化 -->
<input type="text" v-model="num" />
<button v-on:click="doSubject()">提交</button>
{{name}}
</div>
</body>
<script>
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
//方式二:函数方式(data在组件开发中的写法必须是一个函数)
data:function(){
return {
ts:new Date().getTime(),
num:10,
name:'ls'
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doSubject:function(){
console.log(this.num);
}
}
});
vm.name="zs"
</script>
假如只在标签内写一个name
那么就会页面控制台会报错,name属性没有被定义,没有初始化值,不能响应
实例三: 用v-model指令在表单控件元素上创建双向数据绑定
<body>
<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="app">
<h1>{{ts}} </h1>
<!-- 示例一:数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化 -->
<input type="text" v-model="num" />
<button v-on:click="doSubject()">提交</button>
<!-- 只有当实例被创建时data中存在的属性才是响应式的 -->
{{name}}<br/>
<!-- 示例三用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num" />
<button v-on:click="doIncrement()">+++</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app' ,// DOM 元素,挂载视图模型,(element,管理边界)
//方式二:函数方式(data在组件开发中的写法必须是一个函数)
data:function(){
return {
ts:new Date().getTime(),
num:10,
name:'ls'
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doSubject:function(){
console.log(this.num);
},
doIncrement:function(){
this.num=parseInt(this.num)+1;
console.log(this.num);
}
}
});
vm.name="zs"
</script>
正常情况:
情况二:手动在输入框数值后添加一个值,在点击+++就会在数值后面拼接1,而不是在原有基础是哪个加1, 原因:格式不对,在获取输入数字时的Java操作时,该类型就变成了String类型,就不会计算而是拼接,所以要进行类型转换。
this.num=parseInt(this.num)+1;
示例四:局部访问和全局访问
局部:this
全局:var
this.num=parseInt(vm.num)+1;
示例五:用v-once指令进行单向绑定,一般不用
在div中添加下面的代码
<span v-once>{{num}}</span>
下面新写的单向绑定 “10”,不会跟着上面的数值变化而变化
注:console对象可以使用printf风格的占位符。只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种
console.log("num=%d,name=%s",this.num,this.name);
实例生命周期钩子(了解即可)
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会