讲师：陈潇冰
课时1 vue基础、常用指令
1.官网下载： https://cn.vuejs.org/v2/guide/installation.html （也可以直接github）
手册（api文档）：https://cn.vuejs.org/v2/api/
2.vue angular的区别
官网中文，容易读;指令有相同有不同;vue个人维护angular由google维护;vue小巧适合移动端,angular1.0适合PC；
（相同点）两者都不兼容低版本的IE；
3.vue的雏形
数据的双向绑定：Vue对象中的data数据发生了改变，则用到该数据的所有的地方都发生了改变。
指令：vue中的指令扩张了HMTL的功能（所有的mvc前端框架的指令都可以这么理解，比如vue/angular...）。
常见的指令：
v-model: 等价于表单元素里的value（表单元素input，常见与Input标签） ,基本格式v-model={{}}。
v-for: 他的基本格式是：v-for="value in json",存在3个参数，value、$key、$index(索引，序列数字)。常见于li标签。复杂格式：v-for="k,v in json"。
(事件指令系列) v-on:click=fn v-on:movseover=fn v-on:dblclick=fn 等等：注意写法on后面跟的是“：”,具体的操作（click）后跟的是“=fn”。
v-show : v-show="true/flase",其中，“true/false”可以用data中的数据来代替。
data：
可以是字符串、数字、ture\flase、数组arr、json等。
methods:
（格式）add:function (){
this.arr.push("mugua");
}
注意点：
1. 创建的Vue对象中的"Vue"首字母必须得是大写
2.Vue对象中关于选择器的选择，是与CSS、Jquery等通用的。也有class、id等。表明的是该Vue对象中的data、methods的作用范围。
3.在涉及到data中的数据的时候，元素属性不带{{}}，元素内容需要加{{}}。具体而言，<input type="text" v-model="msg2"> ，v-model中是不带有{{}}的。
4.新版的vue在使用v-for的时候，如何需要使用key ,$index,则必须得是 <li v-for="value,key,$index in json">的格式，单一的格式比如 <li v-for="value in json">使用$index,key会报defind的错误。
5.在使用data中的数据的时候，data不用带进去，比如this.arr.push("mugua")是正确的，加了data则是错误的 this.data.arr.push("mugua")。这个错误要注意，因为报错的信息并不明确。
所有的代码如下：
<script>
$(function () {
//1. 创建的Vue对象中的"Vue"首字母必须得是大写
let mvc = new Vue({
el: ".box",
data: {
msg: "welcome to vue",
msg2: 66666,
arr: ['apple', 'orange', 'pear', 'mihoutao'],
json: {
a: 'apple',
b: 'orange',
c: 'pear',
d: "mihoutao"
}
},
methods: {
// 你这都写的啥？
// add:{
// // this.data.arr.push("mugua")
// }
add: function () {
this.data.arr.push("mugua");
// this.arr.push("mugua");
// not a function!
// this.json.push("muguanai");
}
}
});
})
</script>
</head>
<body>
<div class="box">
<input type="text" v-model="msg2">
<input type="text" v-model="arr">
<input type="text" v-model="json">
<br>
{{msg}}
<br>
<ul>
<!-- 元素内容必须得带{{}}，你怎么又忘记了。！-->
<li v-for="value in json">{{value}}</li>
<!-- <li v-for="value in arr">{{$index}}</li>-->
<!-- <li v-for="value in json">{{$key}}</li>-->
<li v-for="value,key,$index in json">{{value}} :{{key}} :{{$index}}</li>
<li v-for="value in arr">{{value}}</li>
</ul>
<input type="button" value="add()" v-on:click="add" v-show="true">
<li v-for="value in arr">{{value}}</li>
</div>
</body>
课时2 小项目： 简易留言（又称之为to-do-list）
课程中涉及到太多的关于bootstrap的相关知识点。这里有个比较好的关于bootstrap的文档：
https://v2.bootcss.com/base-css.html
bootstrap.css.map的作用：（简单的说，就是把太过复杂的css文件中的出现的变量记录下来并一一对应，这在bootstrap.min.css vs bootstrap.min.css.map中尤其明显，因为前者压缩之后的简写很有纪律的必要。）
https://www.cnblogs.com/wangzisheng/p/8780913.html
改节课涉及到2个部分，建议在自我实践的时候，先用bootstrap搭出基本的样式，再来尝试vue的一些操作。
bootstrap的学习记录部分详情见，不再重复赘述：
https://blog.csdn.net/u011483658/article/details/110950266
注意点：
1.用户（而非开发者）在使用输入框进行输入的时候，是可以改变v-model中的数据的（事实上，这个是输入框input的基本作用，任何框架或工具在使用Input的时候都可以如此使用。）。而在vue中，v-model中的数据改变了，则相关的所有涉及到该数据的地方都会发生改变（联级作用）。
2.接1：属性中的数据不能随便固定，只能通过new出来的vue对象中的data将数据固定。否则会报错，且错误难以查询。
3.数组中的元素是json格式，插入的时候，要做些修改，将原先的“散装”元素组装成json：
this.mydatas.push({
name:this.name,
age:this.age
});
4.在使用v-for的时候，需要使用index的时候，则v-for当中就必须要有index， v-for="item in mydatas”是无法使用index的，不能简写：
<tr class="warning" v-for="item,index in mydatas">
5.需求的问题
在本次的项目中，最终形成的数据格式是一个数组。在这个数组中，每个的具体的元素都是json:：[json1,json2,json3,.........]。在确定了这种具体的数据格式之后，本项目就已经是完成了一大半了。这里有把具体的需求转化为一个具体的数据格式的过程。
6.模态框（弹出框的问题）：
点击按钮，弹出模态框，模态框中也有“确定”“取消”。因此，按钮并不是执行的最终结果，点击按钮后弹出的“确定”“取消”才是。所以，有模态框的时候，methods中的方法是大概率需要放在模态框中的。
7.单一选项的删除操作，vue和原生js/jquery的区别
js/jquery在进行删除操作的时候，先删除掉页面中的对应的元素，然后再对相应的数组进行操作。
vue在进行此类操作的时候，直接对相应的数组进行操作，当在对应的数组中删除掉对应的数据之后，页面中的元素会自动消失，不需要再对其另外操作。步骤如下：
i. 添加nowindex:
data: {
................
nowindex:"",
},
<button v-on:click="nowindex=index"></button>
ii .精准添加删除方法（精准添加：点击按钮->弹出模态框->模态框中的“确定”按钮）
<button v-on:click="del" >确定</button>
iii.删除方法的逻辑（注意要有“this”,否则会报错：xxx is not definded）
del:function () {
// mydatas not definded?
this.mydatas.splice(nowindex,1);
}
值得注意的是：index是在v-for中出现的，也只能用在v-for中，不能将其独立成功能模块：
<tr class="warning" v-for="item,index in mydatas">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td class="text-right">
<button v-on:click="nowindex=index" class="btn-primary btn-sm " data-toggle="modal" data-target="#myModal2">删除</button>
</td>
</tr>
主体架构部分（H5+引用）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>to-do-list</title>
<link rel="stylesheet" href="../../bootstrap.css">
<script src="../../jquery-1.12.4.js"></script>
<script src="../../vue.js"></script>
<script src="../../bootstrap.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="box" id="box">
<form>
<legend class="text-center text-info">个人信息填写</legend>
<fieldset>
<!-- <legend >Legend</legend>-->
<label>姓名：</label>
<br>
<input type="text" placeholder="请填写你的姓名" class="form-control" v-model="name">
</fieldset>
<fieldset>
<label>年龄：</label>
<br>
<input type="text" placeholder="请填写你的年龄" class="form-control" v-model="age">
</fieldset>
</form>
<br>
<br>
<div class="text-center">
<button class="btn btn-primary" v-on:click="add">添加</button>
<input class="btn btn-danger" type="reset" v-on:click="reset">
</div>
<hr>
<table class="table table-bordered table-striped table-condensed table-hover ">
<caption>
<h1 class="text-danger text-center">用户信息表</h1>
</caption>
<tr class="success">
<th>序号</th>
<th>姓名</th>
<th>年纪</th>
<th>操作</th>
</tr>
<!-- <tr class="info ">-->
<!-- <td>1</td>-->
<!-- <td>zhubiao</td>-->
<!-- <td>16</td>-->
<!-- <td class="text-right">-->
<!-- <button class="btn-primary btn-sm ">删除</button>-->
<!-- </td>-->
<!-- </tr>-->
<tr class="warning" v-for="item,index in mydatas">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td class="text-right">
<button v-on:click="nowindex=index" class="btn-primary btn-sm " data-toggle="modal" data-target="#myModal2">删除</button>
</td>
</tr>
<tr v-show="mydatas.length!=0">
<td colspan="4" class="text-right">
<button class="btn-danger btn-sm" data-toggle="modal" data-target="#myModal">删除全部</button>
</td>
</tr>
<tr v-show="mydatas.length==0">
<td colspan="4" class="text-center text-muted">
你还没添加信息
</td>
</tr>
<!-- 以下为模态框-->
<!-- <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>-->
<!-- modal1:modal for "删除全部"-->
<div id="myModal" class="modal fade" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel" class="text-danger text-center">确认删除全部？</h3>
</div>
<!-- <div class="modal-body">-->
<!-- <p>One fine body…</p>-->
<!-- </div>-->
<div class="modal-footer">
<button v-on:click="delAll" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- modal2:for "删除"-->
<div id="myModal2" class="modal fade" role="dialog"
aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel2" class="text-danger text-center">确认删除？</h3>
</div>
<!-- <div class="modal-body">-->
<!-- <p>One fine body…</p>-->
<!-- </div>-->
<div class="modal-footer">
<button v-on:click="del" class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>
JS（jquery）部分：
$(function () {
let mvc = new Vue({
el: "#box",
data: {
mydatas: [],
name: "",
age: "",
nowindex:"",
index:"",
},
methods: {
add: function () {
// 你这都写的啥？请整理成json格式！
// this.myadatas.push(this.name);
// this.myadatas.push(this.age);
this.mydatas.push({
name:this.name,
age:this.age
});
this.name="";
this.age="";
},
reset:function (){
this.name=" ";
this.age=" ";
},
delAll:function (){
this.mydatas=[];
},
// setnowindex:function (){
// this.nowindex=this.index;
// },
del:function () {
// mydatas not definded?
this.mydatas.splice(this.nowindex,1);
}
}
});
})
课时3 模板、交互、案例
模板
{{msg}}
{{*msg}}
{{{msg}}}
转换：
常用：{{'welcome '|uppercase}}
{{'WELCOME'|lowercase}}
连写：{{ msg |filterA |filterB }}
{{'WELCOME'|lowercase|capitalize}}
参数：{{msg |filterA '参数'}}
{{12|currency "$"}} {{12|currency "￥"}} {{12|currency "￡"}}
过滤器官方文档：
https://cn.vuejs.org/v2/guide/filters.html
https://cn.vuejs.org/v2/api/index.html#Vue-filter
交互
vue本身是不支持交互的。当需要做交互的时候，需要额外的引入一个文件vue-resource。（git下载，路径：vue-resource-->dist-->vue-resource.js）
$http(ajax) ，自带。
提到交互，就只这3种：get ,post , jsonp
get
格式：
（普通文本）this.$http.get("文件名.txt").then(function (res) { “这里填写成功的内容” },function (err){ “这里填写失败的内容”});
（php文本，需要向服务器发送数据）this.$http.get("xx.php",{a:1,b:2}).then(function (res) { “这里填写成功的内容” },function (err){ “这里填写失败的内容”});
注意点：
1. Do not mount Vue to <html> or <body> - mount to normal elements instead. -----不要将body作为选择器，有的版本会报这个错误。
2.webstorm自带的服务器无法打开编译php文件，但是可以通过普通文本（php文本也是当作普通文本处理，只能显示源码。）
交互需要在apache(php只能选择apache而不能tomcat)的服务器环境条件下才可以使用：
https://blog.csdn.net/u011483658/article/details/111559725。
3 .get接口在使用php文本的时候，失效，多次尝试都不可用。不知何故？（不报错，但是结果一直都是0,无论怎么改参数）
get接受普通文本的代码如下：
<div id="box">
<input type="button" value="打开测试文件" @click="f1_get()">
</div>
methods:{
f1_get:function () {
this.$http.get("test.txt").then(function (res) {
alert(res.status);
alert(res.data);
},function (err){
});
}
}
get接口在使用php文本的时候，失效，多次尝试都不可用，学着post接口添加{ emulateJSON:true}也无效。不知何故？（不报错，但是结果一直都是0,无论怎么改参数），代码如下：
methods: {
f1_get: function () {
this.$http.get('get.php',
{
a: 1,
b: 5
},
// { emulateJSON:true}
).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
//alert(res.status);
alert(res.data);
}, function (err) {
});
}
post
{ emulateJSON:true}不可省，否则结果一直是0,还不报错，post接口失效。
f1_get: function () {
this.$http.post('post.php',
{
a: 1,
b: 5
},
//此处{ emulateJSON:true}不可省，否则结果一直是0,还不报错，post接口失效。
{ emulateJSON:true}
).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
//alert(res.status);
alert(res.data);
}, function (err) {
});
}
jsonp
获取本域之外的接口
中华搜索出现跨域问题。
360搜索能爬出来，但是只有"errorcode":0,"ext":"nlpv=sug_base4_zzdt"，"version":"revise"之类的可用，而关键数据"query":"a","result":[我想要这里的数据啊]不可用。
百度更难弄。输入之后根本没有数据能爬出来，直接是一个搜索页面。且url地址栏是一团乱七八糟的东西。
firefox调试器功能不全面，有问题。改用chrome。
改用chrome之后，
中华搜索依旧出现跨域问题。
搜狗搜索出现“Uncaught TypeError: Cannot read property 'sug' of undefined at ajajjson?callback=_jsonpb7n98iwmhi:1”的问题，this.$http.jsonp("url"，{}，{}).then,url添加callback则原来的数组变成了空数组，无解：
https://www.sogou.com/suggnew/ajajjson?key=abcd
不加callback:
indow.sogou.sug(["abcd",["abcdefg字母表","abcd什么意思","abcd英语26个字母","abcd英文歌","abcdefg","abcd式词语大全","abcdefg的含义是什么意思","abcd什么意思恋爱","abcd的词语","abcdefg26个字母表"],["0;6;0;0","1;6;0;0","2;6;0;0","3;4;0;0","4;4;0;0","5;4;0;0","6;6;0;0","7;2;0;0","8;4;0;0","9;4;0;0"],["","","","","","","","","",""],["0"],"","suglabId_1"],-1);
https://www.sogou.com/suggnew/ajajjson?callback?key=abcd
添加callback:
window.sogou.sug(["",[],[],[],[],[],["ConditionUmis"],[""],[],["0"]],-1);
意思很明显，搜狗搜索人家不允许你爬人家的数据。通过callback将数据重置成空数组。
360搜索可以使用jsonp，但是使用后callback后出现的数据也是空数组。只有"errorcode":0,"ext":"nlpv=sug_base4_zzdt"，"version":"revise"之类的可用，而关键数据"query":"a","result":[我想要这里的数据啊]不可用，整体的数据格式应该是这样的：
suggest_so({"errorcode":0,"ext":"nlpv=sug_base4_zzdt","query":"abcd","result":[{"ci":"11.064693","ctrScore":"0.471972","rankScore":"241.208130","recallScore":"0.839907","recallType":"nginx'kg'baidu'xgb","rerankScore":"241.208130","word":"abcdefg字母表"},{"ci":"1.644274","ctrScore":"0.013424","rankScore":"0.022072","recallScore":"0.090940","recallType":"xgb","rerankScore":"0.022072","word":"abcdefg字母表大小写"}],"src":"","ssid":"89d73496541f43bca3b8f344ff55b6af","version":"revise"}
)
百度搜索可以使用jsonp，但是与360一样无法查询。爬出来的数据中的q,p,g（360还部分可查询，百度都不可查询）都是undefinded,它的数据格式是这样的：
{"q":"ab","p":false,"g":[{"type":"sug","sa":"s_1","q":"abcc的成语"},{"type":"sug","sa":"s_2","q":"abab式的词语"},{"type":"sug","sa":"s_3","q":"abac式词语大全"},{"type":"sug","sa":"s_4","q":"abb式的词语"},{"type":"sug","sa":"s_5","q":"ab型血"},{"type":"sug","sa":"s_6","q":"abo"},{"type":"sug","sa":"s_7","q":"ab型血为什么叫贵族血"},{"type":"sug","sa":"s_8","q":"abac的成语"},{"type":"sug","sa":"s_9","q":"about"},{"type":"sug","sa":"s_10","q":"above"}],"slid":"5689024787140323011","queryid":"0x2479e6f3e426c3"}
要爬数据有点难。
不管怎样，还是将视频中的代码摘录如下：
f1_get: function () {
this.$http.jsonp('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&req=2&csor=2&pwd=a',
{
wd:'ab'
},
{
jsonp:"cb"
}).then(function (res) {
// this.$http.get("test.txt").then(function (res) {
// alert(res.status);
alert(res.data);
alert(res.data.q);
alert(res.data.p);
console.log(res.data.g);
}, function (err) {
});
}
课时4 属性和事件
常用的事件（事件以及事件的复合）
鼠标事件
click dbclick(双击) contextmenu(右击)
事件的简写：@click @dbclick @contextmenu
方法中需要使用事件event的时候，$event不可省：<button @click="fn($event)"></button>。
vue是如何阻止冒泡和阻止默认事件的：
@click.stop <=====> ev.cancelBubble=true或者ev.propgation();
@click.prevent<============>ev.preventDefult
键盘事件
keyup keydown
区别：在方法中alert()，keyup先弹出事件，手动点击之后，输入内容才会显示在页面；keydown，则是先显示输入的内容，再弹出事件，弹出事件对输入的内容不存在影响。
存在这样一个等式：
@keyup.enter === @keyup.13 <====> if(ev.keyCode==13)
上面的等式对于键盘上的所有的键几乎都可以使用：@keyup.a==@keyup.65
属性
:class :style是如何通过data中的数据找到层叠样式表css的：（一般属性直接在data中查找,这两者需要进一步上溯到css）
:class :style区别于一般的属性，一般的属性只需要“xx(这里是一般属性)”，比如:width="w"，即只需要加“”即可。而对于:class :style来说，通常是用数组或者json来表示的。由于存在这样一个特性，在vue中的data中的关于:class :style所需要的相关数据，都被“定位”到层叠样式表css中了！
:style建议采用json的格式：
<div id="div1" >
<input type="text" v-model="styleJson.backgroundColor" >
<input type="text" v-model="styleJson.fontSize" >
<br>
<span :style="styleJson">{{txt}}</span>
</div>
-----
data:{
txt:"abc",
styleJson:{
color:"red",
width:"200px",
fontSize:"50px",
"font-size":"50px",
backgroundColor:"blue"
}
},
：class建议采用数组格式：
<style>
.red1{
color:red
}
.blue2{
background-color: deepskyblue;
}
</style>
-----------------------
<span :class="[arr]">{{txt}}</span>
--------------------------
let mvc=new Vue({
el:"#div1",
data:{
arr:["red1","blue2"],
},
methods:{}
})
注意点：
1.:style建议采用json格式，:class建议采用数组格式，无论是json格式还是素组格式都建议在vue-data中写全，不要分在h5结构中补全。
2.驼峰方式（fontSize:"50px"）和“-”连写方式（"font-size":"50px","font-size"双引号不可省）虽然都可以采用，但是建议采用驼峰方式
3.在需要：style或者：class中的json的时候，可以用json.xxx调用xxx属性，比如 ：
<input type="text" v-model="styleJson.backgroundColor" >
<input type="text" v-model="styleJson.fontSize" >
---------------------
讲师：blue
路由
————————————————
版权声明：本文为CSDN博主「虎冲九天」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u011483658/article/details/107920902
