一、angularjs介绍
1、AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2、AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
3、AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
4、AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
5、angularjs特点:
优势:google出品
文档及组件丰富
支持数据与dom的自动绑定
不足:学习曲线陡峭
angularjs 1.x与angularjs2.x不兼容
angularjs2.x采用typescript语法
二、vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1、为什么使用vue
轻量级
js语法
入门及上手快
vue与Jquery比较
jquery关注dom
vue关注数据,不关注dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="abc">
<div class="row">
<div class="col-md-4">
<input type="text" v-model="name"/>
<p>Hello,{{name}}</p>
<p>{{time}}</p>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue=new Vue({
el:"#abc",
data:{
name:'Lucy',
time:new Date()
}
});
</script>
2、vue初步使用介绍
第一步:引入
第二步:构造vue对象
第三步: 使用{{}}将数据和DOM绑定
第四步:改变数据即可查看结果
3、vue对象介绍
el:vue的作用域,即只有在这个作用域里的dom受vue控制
data:vue页面的数据模型,该数据模型为一个javascript对象,且在运行过程中该对象的属性不允许增加,因此页面数据模型必须提前定义好
metho:事件处理方法对象
4、vue事件处理
v-on:<事件名>
v-on:click
5、数据绑定
绑定指令:v-bind、{{}}
v-html:以原始数据方式绑定
绑定位置:
文本。文本可以出现的地方
属性。dom对象的属性,如title,src等
css。包括style和class绑定
三、vue常用指令
1、条件指令
v-if
<p v-if="true">显示</p>
v-else-if
v-else
v -show
2、循环指令
v-for
<li v-for ="todo in todos">
<li v-for="(todo,index) in todos">
<li v-for="(value,key,index) in object">
3、表单绑定
v-model
<input v-model="name" />
4、vue自定义组件
组件:组件可以理解为页面中的完成某个特定功能的模块
为什么要使用组件
代码复用。DRY(Don't Repeat Yourself)原则
vue.component('组件名',{props:['属性名'],template:'模板内容'})
自定义组件使用
<组件名>
自定义属性绑定
v-bind:属性名='实际对象'
5、vue ajax
(1)axios
function registerUser(params ) { return axios.post(`${base}/xuke/companyaccount/register.do`, params).then(res => res.data) }
function checkmobile(params) { return axios.get(`${base}/xuke/companyaccount/checkmobile.do`, { params: params }).then(res => res.data) }
(2)jquery.ajax
$.get()
$.post()