1.前情回顾
return false 阻止事件冒泡；阻止表单提交
delegate 事件委托，子级不方便做，委托给父级做，既能给已有的绑定事件，又能给未来元素绑定。
json要写字符串，这是格式
2.***AJAX
ajax每个国家的读法都不一样，听起来像知道就可以了。
ajax只是jq一个函数而已，用来做数据交互的。
我们就是为了做数据交互，才调用ajax。
ajax依赖于HTTP协议，去发送请求。
ajax是默认支持异步传输数据；
默认支持局部刷新/无刷新。
同步：低效的，一件一件事情的干。
异步：高效的，一次干多件事（ajax在发送数据的时候，也能接收数据）
ajax包含请求和发送两个概念。
ajax不支持连接数据库。（原因是ajax依赖HTTP协议，不同语言协议不同）解决办法就是数据接口（一套python程序而已： 创建数据连接，查询取数据，数据写入） -- 出一个接口文档给前端（前端不懂后端程序，把每个接口的描述信息完整给前端，才能数据交互：接口作用、地址、参数 – 是否需要发送数据，返回的数据模板）
ajax请求数据接口（不同语言连接数据库的程序），数据接口去向数据库请求数据，然后发送给ajax。
web.py框架应用程序就是由n多个接口组成的。
当公司分工很明确的时候，那么ajax前半段由前端做，数据接口和数据库由后端程序员做。
后端数据接口名是什么，必须清楚的告诉前端。前端和后端重叠的部分就是数据接口名，必须先协商好。为了将来请求不出错。如果没有协商的话，那么就在写完一个接口程序的时候就要写一个接口描述文档（数据接口的名字，作用，参数，返回的模板数据“要的是key名”）
前端里面的字典对象，想访问key的值的时候并不是中括号了，而是.点后面跟着key
数据显示都是一个逻辑，遍历数据，然后将模板中的数据替换掉。
工作中$.ajax()中只配置基本参数，success拿到ajax函数外面变成done(),error拿到ajax函数外面变成fail(),采用链式编程的写法，一直将done和fail写在后面打点即可。也可以直接回车换行，只是为了美观，逻辑没变。这样只是为了让ajax看的干净一点，然后便于维护一些而已。
get方式就是获取数据，get支持的url字符数最大是1024个，get发数据是直接在url地址后面发送
post方式就是发送数据，post支持的url字符数更多。post会打一个http包，然后再发送数据，更加的安全。
简写的方式中，code是发送的数据，是一个字典的形式，可以加多个数据，后面只有一个回调函数（是成功后的事件），不支持失败后的事件。如果工作中不介意这些，那么可以采用简写的方式。在简写的格式中要注意一个问题，那就是发送的数据类型是json要在括号里面末尾加上，用引号直接写json就可以了，如果不写的话，会显示变量为被定义。一定能要记住这一点。
接口文档里面的信息一定写全了，如果是返回值的格式没告诉前端，前端可以从后台调数据，凭经验判断。但是为了同事之间相处的更加的融洽，还是写的明明白白的。
允许自定义html属性，已完成自己需要的功能。满足k=‘xx’而且名称符合标识符规则。访问自定义html属性时用attr这个。和prop用法完全一样。
自己写ajax的时候一定要注意括号，比如done和fail是跟在ajax后面的括号，如果显示错误，很大可能是这个问题，练习的时候在这个地方多次出现问题，不报错，但是有部分功能不出效果。
项目中ajax很常用，但是用的时候很容易忘记。在项目开始之前，自己先复习一下ajax的参数和函数多看看，了解一下每个参数怎么用。
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>首页 - 个人选股系统 V5.87</title> 8 <link href="/css/bootstrap.min.css" rel="stylesheet"> 9 <script src="/js/jquery-1.12.4.min.js"></script> 10 <!-- <script> 11 $(function(){ 12 $.ajax({ 13 // 配置ajax的参数 14 // url:'请求数据的接口地址' 15 url:'/index_data', 16 // type:请求方式 17 type:'get', 18 // dataType:返回的数据格式 html xml ***json text 19 dataType: 'json', 20 // data:{} 发送的数据 21 // success:请求成功之后要执行的命令 -- 回调函数 22 success: function(dat){ 23 // 接收数据，显示数据 24 console.log(dat) 25 var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>'; 26 // alert(dat) 27 // 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面 28 for(var i=0;i<dat.length;i++) 29 { 30 // -1-- 字典对象里面的id值 00007 -- 字典里面的code值 31 str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>'; 32 } 33 34 $('.table').html( str ) 35 }, 36 // error 请求失败之后要执行的命令 -- 回调函数 37 error: function(){ 38 alert('请求超时') 39 } 40 }) 41 }) 42 </script> --> 43 <!-- ajax函数内部工作中只配置基本参数，success拿到ajax函数的外面变成done(),error拿到ajax函数的外面变成fail() --> 44 <!-- <script> 45 $(function(){ 46 $.ajax({ 47 url:'/index_data', 48 type:'get', 49 dataType:'json' 50 }) 51 .done(function(dat){ 52 // 成功 53 var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>'; 54 // alert(dat) 55 // 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面 56 for(var i=0;i<dat.length;i++) 57 { 58 // -1-- 字典对象里面的id值 00007 -- 字典里面的code值 59 str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>'; 60 } 61 62 $('.table').html( str ) 63 }) 64 .fail(function(){ 65 alert('请求失败') 66 }) 67 }) 68 </script> --> 69 <script> 70 $(function(){ 71 $.get('/index_data', function(dat){ 72 var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>'; 73 // alert(dat) 74 // 遍历dat 一个表头 + 94个tr数据 -- 将这95个tr放到表格里面 75 for(var i=0;i<dat.length;i++) 76 { 77 // -1-- 字典对象里面的id值 00007 -- 字典里面的code值 78 str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code+'</td><td>'+ dat[i].sname+'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd" data-code="'+dat[i].code+'"></td></tr>'; 79 } 80 81 $('.table').html( str ) 82 }, 'json') 83 84 85 // 增加关注 86 // 添加按钮 单击，把股票code值发送到接口 -- 接口返回不要重复添加或关注成功文字 87 // $('input').click(function(){ 88 // alert(1) 89 // }) 90 $('.table').delegate('input', 'click', function(){ 91 // alert(2) 92 // k="v" 自定义html属性的形式获取code值 93 94 // 访问自己这个input标签的data-code属性值即可 95 // prop只能访问控制w3c定义的html属性，自定义的用attr函数访问和控制，attr和prop的用法完全相同 96 // alert($(this).prop('data-code')) 97 // alert($(this).attr('data-code')) 98 var myCode = $(this).attr('data-code') 99 $.ajax({ 100 url:'/add_data', 101 type:'get', 102 dataType:'text', 103 data:{code: myCode} 104 }) 105 .done(function(dat){ 106 alert(dat) 107 }) 108 .fail(function(){ 109 alert('请求超时') 110 }) 111 }) 112 113 }) 114 </script> 115</head> 116 117<body> 118<div class="navbar navbar-inverse navbar-static-top "> 119 <div class="container"> 120 <div class="navbar-header"> 121 <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"> 122 <span class="icon-bar"></span> 123 <span class="icon-bar"></span> 124 <span class="icon-bar"></span> 125 </button> 126 <a href="#" class="navbar-brand">选股系统</a> 127 </div> 128 <div class="collapse navbar-collapse" id="mymenu"> 129 <ul class="nav navbar-nav"> 130 <li class="active"><a href="">股票信息</a></li> 131 <li><a href="/center.html">个人中心</a></li> 132 </ul> 133 </div> 134 </div> 135</div> 136<div class="container" id="container"> 137 138 <div class="container-fluid"> 139 <table class="table table-hover"> 140 141 142 <!-- <tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr> 143 <tr><td>1</td><td>000007</td><td>全新好</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr> --> 144 145 146 </table> 147 </div> 148</div> 149 150</body> 151</html>
2.1总结：
2.1.1ajax的写法
$ajax({ajax的参数})
url:接口地址(因为不支持链接数据库，协议不一样，所以需要接口地址。)
type: 请求方式 get:url发送数据 post:打包http包
datatype： 返回的数据格式
success：成功
error：失败
2.1.2工作中的写法
***success 换成 done() error 换成 fail()
2.1.3化简写法
如果完成的ajax函数意愿type类型为get，化简写成$.get();如果意愿type类型是post，化简写成$.post();
参数1：url的值
参数2：发送数据的值 data
参数3：成功的回调函数
参数4：返回的数据格式
3.了解VUE
Vue.js是前端三大新框架之一，
中国人 尤雨溪 2014年研发出来的 --- vue不兼容低版本浏览器
vue注重数据，只要数据变化，页面视图随着数据的变化而变化。
jQuery能做的，vue也能做。
vue厉害的地方有数据处理、动画、组件（一个模块性的东西，有html有css有js，将这些封装到一起。）
vue-project是组件开发用到的，前端的叫做webpack，提到webpack等都是开发组件。这些都是前端用到的。
后端学习的重点在数据处理相关的。
MVC model（数据相关的） view（页面视图相关的） controller（控制器） -----Angular.js、React.js
MVVM model view viewmodel（数据和页面视图相关的隐形的控制变化） -----vue（修改数据或者页面视图的时候，不用担心出事，viewmodel帮我们处理。只需要控制好数据和页面视图，中间的所有处理是viewmodel相关的）
后端将vue当做函数库来用即可
vue.js 和vue.mini.js（用的到的）
mini做过压缩
开发的时候导入vue.js，因为有调试工具，但是在项目上线之前一定要换成mini
4***VUE的基本使用
vue先导入
id名一般用app
vue的使用是从一个vue对象开始的
4.1 创建vue对象
var vm = new Vue({
el:"xx",
data:{
str:'xx'
}
methods:{
function(){}
}
})
vm是前端常用的一个对象名，viewmodel，官方文档这么写的。
配置vue对象的参数
el:''---------查找标签element的缩写
data:{}---------vue对象的数据区域
4.2数据显示{{ 数据 }}
vue对象的数据显示是从mustache语法开始的{{数据}}两个大括号之间一定不要有空格mustache只能显示一个数据，如果要再发送那么再写一个{{数据}}
记得写在前面的时候要写入口，但是vue没有入口函数。但是可以使用js的入口函数。
在工作中，项目定了用jq开发就不使用vue了。
工作中使用vue的时候，一般不写入口函数，而是把vue的代码粘贴到标签的后面，只要保证标签先执行就可以了。
如果vue中data有很多数据的处理情况：app中写标签，一个标签写一个{{数据}}
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/vue.min.js"></script> 9 10</head> 11<body> 12 <!-- 数据显示从mustache 开始 {{ 数据 }} --> 13 <div id="app">{{ str }}</div> 14 <script> 15 // window.onload = function(){ 16 // vue的使用是从一个VUE对象开始的 17 var vm = new Vue({ 18 // 配置vue对象的参数 19 // el:查找标签 20 el:'#app', 21 data:{ 22 // vue对象的数据区域 23 str: 'hello world' 24 } 25 }) 26 // } 27 </script> 28</body> 29</html>
5.VUE模板语法
5.1 数据显示
vue控制了父级，就有权限控制这个父级的所有子级。
简单的运算mustache也支持
mustache还支持一些长的命令
mustache还可以输出三元表达式 三元运算符（简易版的if else）
三元表达式：条件?条件成立的命令:条件不成立的命令
三元运算符是js中的知识点，原生js就有
5.2vue控制HTML属性
超链接中的href在vue中可以不写死具体的路径和网址。
vue控制html属性有两种写法：
1.v-bind:href=
2.:href=
注意上面的两种方式都是在href前面写
上面的是控制超链接，其他的所有的html属性都是如此
v-bind:属性
:属性
v-xxx 都代表指令（具有特殊功能的属性），v-bind是控制html属性
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/vue.min.js"></script> 9</head> 10<body> 11 <!-- vue控制了父级 就有权限控制这个父级的所有子级 --> 12 <div id="app"> 13 <!-- {{ str }} {{ num }} --> 14 <div>{{ str }}</div> 15 <div>{{ num }}</div> 16 <p>{{ num + 1}}</p> 17 <p>{{ str.split('').reverse().join('') }}</p> 18 <!-- js:三元运算符 三元表达式 -- 简易版的if else --> 19 <!-- <div>{{ 条件?条件成立的命令:条件不成立的命令}}</div> --> 20 <div>{{ num==0?'等于0': '不等于0'}}</div> 21 <!-- v-bind v-xx 指令 具有特殊功能的命令 --> 22 <a v-bind:href="url1">超链接</a> 23 <a :href="url2">超链接2</a> 24 </div> 25 <script> 26 var vm = new Vue({ 27 el:'#app', 28 data:{ 29 str: 'abcdefg', 30 num:1, 31 url1:'http://www.taobao.com', 32 url2:'http://www.itcast.cn' 33 } 34 }) 35 </script> 36</body> 37</html>
5.3控制class属性
其实控制的是它属性值变化。js和jq都可以
v-bind:或者: 后面跟着class，动态的控制class
1.class取值可以为字典（字典里面是布尔型的数据）
2.class属性值可以传对象引用
3.class属性值还可以是数组
如果是字典：真实类名:布尔型数据，true添加类，false不添加类
data中，自定义类名：真实类名
4.数组里面还可以写三元运算符（最重要的）
:class="[三元运算符]"
条件成立加一个类，条件不成立来一个空类名
这种写法工作中最常用。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/vue.min.js"></script> 9</head> 10<!DOCTYPE html> 11<html lang="en"> 12<head> 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 15 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 16 <title>Document</title> 17 <script src="js/vue.min.js"></script> 18</head> 19<body> 20 <div id="app"> 21 <!-- 字典 对象 数组 *******数组里面写三元运算符 --> 22 <!-- 字典：真实类名：布尔型数据，true添加类，false则不添加类 --> 23 <div :class="{myclass1: bool1, myclass2: bool2}">1111111</div> 24 <div :class="myobject">2222</div> 25 <div :class="[isClass6, isClass7]">33333</div> 26 <div :class="[bool2?'daqiu':'dongxiao']">44444</div> 27 <div :class="[bool1?'banzhang':'']">55555</div> 28 </div> 29 <script> 30 var vm = new Vue({ 31 el:'#app', 32 data:{ 33 bool1:false, 34 bool2:true, 35 myobject:{ 36 myclass4: true, 37 myclass5: false 38 }, 39 // 自定义的key 真实类名 40 isClass6: 'class6', 41 isClass7: 'class7' 42 } 43 }) 44 </script> 45</body> 46</html>
6.***vue的事件与函数
标签身上写事件
v-on:事件属性=“命令”
methods:{函数名:匿名函数}
this.属性名或者对象名:属性
标签里调用上面的函数@事件属性="函数名()"如果有参数必须写括号（就是函数名后面的括号）
6.1事件绑定
v-on:事件属性=“”
@事件属性=“”
6.2封装函数
当前对象添加一个参数
methods:{
函数名: 匿名函数
}
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="js/vue.min.js"></script> 9</head> 10<!DOCTYPE html> 11<html lang="en"> 12<head> 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 15 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 16 <title>Document</title> 17 <script src="js/vue.min.js"></script> 18</head> 19<!DOCTYPE html> 20<html lang="en"> 21<head> 22 <meta charset="UTF-8"> 23 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 24 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 25 <title>Document</title> 26 <script src="js/vue.min.js"></script> 27</head> 28<body> 29 <div id="app"> 30 <div>{{ num }}</div> 31 <button v-on:click="num+= 1">按钮</button> 32 <!-- 如果有参数必须加() --> 33 <button @click="fnAdd()">按钮调用函数</button> 34 </div> 35 <script> 36 var vm = new Vue({ 37 el:'#app', 38 data:{ 39 num:0 40 }, 41 methods:{ 42 // 函数区域 43 // 函数名: 匿名函数 44 fnAdd: function(){ 45 // num自增1 this.xx duixiang.shux 46 this.num += 1 47 } 48 } 49 }) 50 </script> 51</body> 52</html>
7.事件冒泡
事件冒泡是浏览器的DOM树问题，vue也有事件冒泡。
vue阻止事件冒泡的方法，在事件属性后面加stop属性@事件属性.stop
vue阻止表单提交：在事件属性后面加.prevent=""
工作中有人可能使用的是@submit.stop.prevent=""
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .father{ 10 width: 200px; 11 height: 200px; 12 background: green; 13 } 14 .son{ 15 width: 100px; 16 height: 100px; 17 background: pink; 18 } 19 </style> 20 <script src="js/vue.min.js"></script> 21</head> 22<body> 23 <div id="app"> 24 <div class="father" v-on:click="fnAdd"> 25 <!-- vue阻止事件冒泡：在事件属性后面加stop属性 --> 26 <div class="son" @click.stop.prevent="fnAdd">{{ num }}</div> 27 <!-- @submit.prevent="" --> 28 </div> 29 </div> 30 <script> 31 var vm = new Vue({ 32 el:'#app', 33 data:{ 34 num: 1 35 }, 36 methods:{ 37 fnAdd: function(){ 38 vm.num ++ 39 } 40 } 41 }) 42 </script> 43</body> 44</html>
