一、Web前端技术:
1、展示:html ,css.
2、交互:java applet , flash , javaScript(包含原生javascript时代,jquery时代,大前端时代[angularjs ,vue]).
二、angularjs:
1、起源:诞生2009年,由Misko Hevery等人创建,后被Google所收购。是一款优秀的前端JS框架,
angularJS最为核心的特性是:MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
angularJS是一个JavaScript框架,是一个以javaScript编写的库。可通过<script>标签添加到HTML页面;
angularJS通过指令扩展HTML,且通过表达式绑定数据到HTML;
angularJS是一个以JavaScript文件形式发布的,可通过script标签添加到网页中。
2、优点:google出品,文档及组件丰富,支持数据与dom的自动绑定
3、不足:学习曲线陡峭,angularJS1.x与angularJS2.x不兼容
angularJS.x采用typescript语法
三、vue
1、定义:用于构建用户界面的渐进式框架。可以自底向上逐层应用,Vue核心库只关注视图层,易上手,便于与第三方库或既有项目整合。为复杂的单页应用提供驱动。
2、优点:轻量级、js语法、入门上手快。
Jquery关注dom,vue关注数据
3、vue使用步骤:引入vue.js , bootstrap.min.css;
构造vue对象(var vue=new Vue({ }));
使用{ { } }将数据和DOM绑定;
改变数据即可查看浏览器效果。
eg1:编辑hello,World
- <!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"/>
- <title>helloWorld</title>
- <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
- <script type="text/javascript" src="./js/vue.js"></script>
- </head>
- <body>
- <div class="container" id="app">
- <div class="row">
- <div class="col-md-6">
- <input type="text" v-model="name">//v-model表单绑定
- <h3>Hello,{{name}}</h3>
- </div>
- </div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var vue=new Vue({
- el:"#app",
- data:{
- name:''
- },
- methods:{
- }
- });
- </script>
4、vue对象:
el:Vue作用域,只有在这个范围内的dom受Vue控制
data:vue页面的数据模型,该数据为一个javascript对象,且在运行过程中该对象属性不允许增加,页面数据模型必须提前定义好
methods:时间处理方法对象
5、vue事件处理:v-on:<事件名> v-on:click=""
6、数据绑定:绑定指令:v-bind; { { } } ; v-html(以原始数据方式绑定)
绑定位置:文本; 属性(dom属性,如title,src...); css(包括style和class绑定)
7、条件指令:v-if :
<p v-if="true">显示</p>
v-else-if ; v-else ;v-show
8、循环指令:v-for
9、表单绑定:v-model
eg:<input type="text" v-model="name"/>
10、vue自定义组件:(1)定义:页面中完成某个特定功能的模块
提高代码复用
(2)格式:Vue.component('组件名',
{ props : ['属性名' ] ,
template:'模板内容'
})
(3)自定义属性绑定:v-bind:属性名='实际对象'
11、vue ajax
(1) axios