目录
熟悉 HTML 、 CSS 、 JavaScript 知识后,可快速上手 Vue
7.2双向数据绑定(Vue two way data binding)
一、前言
在初步学习前端课程的时候,相信大家都知道Vue这个名字,至于Vue到底是什么却不得而知,又或者知道Vue是前端的一大流行框架,那么它到底是用来干啥的呢,对于其他框架而言Vue又有什么优势和特点,学习前端的人为什么都要去学习Vue呢?
对于这些答案,相信大家都想去亲自揭开它的谜底,但是如果你未学过JavaScript和jQuery那么,请先不要学习Vue,因为没有根基是非常晦涩难学的。反之学习的时候会特别轻松,所以希望大家学习Vue的时候,尽量都有javascript和jQuery库类的基础。
二、Vue是什么?
2.1、简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.2.什么是渐进式框架?
说白了,就是框架分层。那是如何分层的呢?就像《功夫》里面黄圣依手里拿的棒棒糖一样:最核心的是视图层渲染,然后往外是组件机制,在此基础上再加入路由机制,再加入状态管理,最外层是构建工具,vue和react都是如此。
Vue分层:声明式渲染>组件系统>客户端路由>集中式状态管理>项目构建
2.3、发展史
· 创始人:尤雨溪
官 网:https://cn.vuejs.org/
安 装:https://cn.vuejs.org/v2/guide/installation.html =》点击开发版本
1.2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量框架,最初命名为 Seed 。
2.2013年12月,更名为 Vue,图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。
3.2014.01.24,Vue 正式对外发布,版本号是 0.8.0。
4.2014.02.25,0.9.0 发布,有了自己的代号:Animatrix,此后,重要的版本都会有自己的代号。
5.2015.06.13,0.12.0,代号Dragon Ball,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue,Vue 在 JS 社区也打响了知名度。
6.2015.10.26,1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年,vue-router、vuex、vue-cli 相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。
7.2016.10.01,2.0.0 是第二个重要的里程碑,它吸收了 React 的虚拟 Dom 方案,还支持服务端渲染。自从Vue 2.0 发布之后,Vue 就成了前端领域的热门话题。
8.2019.02.05,Vue 发布了 2.6.0 ,这是一个承前启后的版本,在它之后,将推出 3.0.0。
9.2019.12.05,在万众期待中,尤雨溪公布了 Vue 3 源代码,目前 Vue 3 处于 Alpha 版本。
三、为什么要学习Vue?
3.1.易用:
熟悉 HTML 、 CSS 、 JavaScript 知识后,可快速上手 Vue
3.2.灵活:
在一个库和一套完整框架之间自如伸缩
3.3.高效:
20kB 运行大小,超快虚拟 DOM
四. 库和框架的区别
4.1 库(Library),
本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
代表:jQuery
jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
JavaScript:document.getElementById()
jQuery: $('').val()
4.2 框架(Framework),
是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码
代表:vue
框架规定了自己的编程方式,是一套完整的解决方案
使用框架的时候,由框架控制一切,我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
4.3前端渲染方式
五. 什么是MVVM框架
5.1介绍之前我们先介绍下什么是MVC框架
MVC是后端分层开发的思想 即 Model-View-Controller 的缩写,就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的:
View: 用来把数据以某种方式呈现给用户。
Model :其实就是数据。
Controller :接收并处理来自用户的请求,并将 Model 返回给用户。
5.2MVVM框架
MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
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元素,只有拿到了页面元素才能进行后续操作
六、Vue环境搭建
6.1.引入Vue.js
6.2 下载
6.2.1 cdn下载(需连接网络)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
6.2..2 手动下载
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>
6.3.给HTML元素即视图添加id属性
<!-- 指定vue管理内容区域,通常我们也把它叫做
边界,这意味着我们接下来的改动全部在指定的div内,
div外部不受影响 -->
<div id="app">
<h1>{{title}}----{{ts}}</h1>
<!--
1) javascript:
window.addListener
<button onclick="onclick="return confirm('wwwwww')"">安</button>
2)jquery:
$('选择器')。bind('click',function(){})
-->
<button v-on:click="doClick">有种点我</button>
</div>
6.4.Vue实例,并搭建Vue环境
每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
<div id="d1">{{message}}</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 开发:开发环境版本,包含了有帮助的命令行警告 -->
<!--生产: 生产环境版本,优化了尺寸和速度 -->
<!--1.手动方式-->
<!-- <script src="js/vue.js" type="text/jscript"></script>-->
<!--2.cdn下载(需连接网络)-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<body>
{{title}}
<!-- 指定vue管理内容区域,通常我们也把它叫做
边界,这意味着我们接下来的改动全部在指定的div内,
div外部不受影响 -->
<div id="app">
<h1>{{title}}----{{ts}}</h1>
<!--
1) javascript:
window.addListener
<button onclick="onclick="return confirm('wwwwww')"">安</button>
2)jquery:
$('选择器')。bind('click',function(){})
-->
<button v-on:click="doClick">有种点我</button>
</div>
</body>
<script>
//每个Vue实例都是从new构造函数开始
//每个Vue实例都是从new构造函数开始
//每个Vue实例都是从new构造函数开始
var vm=new Vue({
el:'#app', // DOM 元素,挂载视图模型(element,管理边界),
//方式1
/* data:{ // 定义属性,并设置初始值
title:'Hello Vue!!!',
ts:new Date().getTime()
}, */
//方式2函数方式(data在组件开发中的写法必须是一个函数)
data:function(){ // 定义属性,并设置初始值
return{
title:'Hello Vue!!!',
ts:new Date().getTime()
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doClick:function(){
alert('hello vue!!');
},
doRegister(){
}
}
});
</script>
</html>
6.5注意❗:
注1:data在组件开发中的写法必须是一个函数
注2:vue指令:指的是是带有“v-”前缀的特殊属性
注3:用v-on:click指令绑定单击事件注4 var vm = new Vue({
el:'#ID' // DOM 元素,挂载视图模型,
data:{}, // 定义属性,并设置初始值
methods:{} // 定义方法,用于事件交互时使用的函数
});
七、指令(Directives)
7.1、什么是指令
指令是一个带有
v-
前缀的特殊属性,那么指令的本质就是自定义属性指令的格式,以
v-
开头指令可带参数,也可不带参数,比如
v-cloak
指令就属于无参数的指令
7.2双向数据绑定(Vue two way data binding)
示例1: 数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化
示例2: 只有当实例被创建时data中存在的属性才是响应式的
示例3:用v-model指令在表单控件元素上创建双向数据绑定
示例4: this在methods属性的方法里指向当前Vue实例
vm.name/vm.$data.name(外部访问)
this.name(内部访问)示例5:用v-once指令进行单向绑定,一般不用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 开发:开发环境版本,包含了有帮助的命令行警告 -->
<!--生产: 生产环境版本,优化了尺寸和速度 -->
<!--1.手动方式-->
<!-- <script src="js/vue.js" type="text/jscript"></script>-->
<!--2.cdn下载(需连接网络)-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<body>
<div id="app">
<h1>{{ts}}</h1>
<!-- 示例1 数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化-->
<input type="text" v-model="num"/>
<button v-on:click="doKeyup">提交</button>
<!--示例2. 只有当实例被创建时data中存在的属性才是响应式的 -->
{{name}}
<!-- 用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num"/><button v-on:click="tj">+++</button>
<!-- 示例5 v-once -->
<span v-once>{{num}}</span>
</div>
</body>
<script>
var vm=new Vue({
el:'#app', // DOM 元素,挂载视图模型(element,管理边界),
data:function(){ // 定义属性,并设置初始值
return{
title:'Hello Vue!!!',
ts:new Date().getTime(),
num:10,
name:'ii'
}
},
methods:{ // 定义方法,用于事件交互时使用的函数
doKeyup:function(){
console.log(this.num);
},
tj:function(){
/* 示例3:用v-model指令在表单控件元素上创建双向数据绑定 */
this.num=parseInt(this.num)+1;
console.log(this.num);
/* 示例4: this在methods属性的方法里指向当前Vue实例
vm.name/vm.$data.name(外部访问)
this.name(内部访问) */
console.log("num=%d,name=%s",this.num,this.name);
}
}
});
vm.name="zs";
</script>
</html>
注1:console对象可以使用printf风格的占位符。只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种
注2:Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$,以便与用户定义的属性区分开来