vue.js

1、打包工具 Webpack,Qulp
2、Vue.js是最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站还可以开发手机App，Vue语言也可以用于进行手机App开发的，需要借助于Weex)
3、Vue.js和Angular.js、React.js三大主流框架
（能够减少不必要的DoM操作，提高渲染效率）
4、Node（后端，分层开发）的MVC与前端MVVM（视图层）

mvc:
mvp
mvvm
mv
mvx

安装
node -v

npm install -g @vue/cli

vue和angular的区别：
vue------简单、易学
指令以v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目

适合：移动端项目，小巧
vue的发展势头很猛，github上start数量已经超越angular
angular-----上手难
指令以ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护

适合:pc端项目

共同点：不兼容低版本IE

---

vue基本雏形：
angular展示一条基本数据:
var app=angular.module(‘app’,[]);

app.controller(‘xxx’,function($scope){ //C
$scope.msg=‘welcome’
});

html:
div ng-controller=“xx”
{(msg)}

vue:
html:

{{msg}}

var c= new Vue({
el:’#box’, //选择器
data:{
msg:‘welcome vue’
}
});

常用指令：
angular：ng-model ng-controller
ng-repeat循环
ng-click
ng-show

$scope.show=function(){}
指令：扩展html标签功能

v-model 一般表单元素（input） 双向数据绑定

循环：
v-for=“name in arr”
{{$index}}顺序数字

v-for=“name in json”
{{KaTeX parse error: Expected 'EOF', got '}' at position 6: index}̲}数字 {{key}}字母

v-for="(k,v) in json"
{{v}}相等于(value) {{k}}相等于(key)

事件：
v-on:click=“函数”

v-on:click/mouseout/mouseover/dblclick双击/mousedown…

new Vue({
el:’#hh’,
data:{//数据
arr:[‘apple’,‘banana’,‘orange’,‘pear’],
json:{a:‘apple’,b:‘banana’,c:‘orange’}
},
methods:{ //方法
show:function(){
alert(1);
}
}
});
显示隐藏：
v-show=“true/false”
bootstrap+vue简易留言板（todolist）：

bootstrap:css框架 跟jqueryMobile一样
只需要给标签 赋予class,角色
依赖jQuery
确认删除？和确认删除全部吗？

取消 确认

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 事件： v-on:click/mouseover……

简写的：
@click="" 推荐

事件对象：
@click=“show($event)”

事件冒泡：
阻止冒泡：
a).ev.cancelBubble=true;
b).@click.stop 推荐
默认行为（默认事件）：
阻止默认行为：
a）ev.preventDefault();
b)@contextmenu.prevent 推荐

键盘：
@keydown $event ev.keyCode
@keyup

常用键：
回车
a)@keyup.13
b)@keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down…

————————————————————————————————————————————————
属性：
v-bind:src=""
width/height/title…

简写：
:src="" 推荐

<img src="{{url}}“alt=”"> 效果能出来，但是会报一个404错误
<img v-bind:src=“url"alt=”"> 效果可以出来，不会发404错误
————————————————————————————————————————————
class和style:
:class="" v-bind;class=""
:style="" v-bind:style=""

:class="[red]" red是数据
:class="[red,b,c,d]"

:class="{red:a,blue:b}

:class=“json”

data:{
json:{red:a,blue:false}
}
——————————————————————————————————————
style:
:style="[c]"
:style="[c,d]"
注意：复合样式，采用驼峰命名法
:style=“json”

——————————————————————————————————————
模板：
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次

{{{msg}}} HTML转意输出

——————————————————————————————————————
过滤器：->过滤模板数据
系统提供一些过滤器：
{{‘msg’|filteA}}
{{‘msg’|filterA|filterB}}

uppercase eg: {{‘welcome’|uppercase}}
lowercase
capitalize

currency 钱

{{msg|filterA 参数}}

——————————————————————————————————————

交互：
$http (ajax)

如果vue想做交互

引入：vue-resouce

get:
获取一个普通的文本数据
post:
jsonp:

发送Ajax请求
推荐使用axios插件实现
axios是一个基于Promise的HTTP请求客户端，用于发送请求，也是vue2.0官方推荐，同时对vue-resource进行更新和维护
参考：GitHub上搜索axios，查看Ap1文档

基本用法：
axios([options])
const axios = require(‘axios’);

1、axios.get
// Make a request for a user with a given ID
axios.get(’/user?ID=12345’)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});

// Optionally the request above could also be done as
axios.get(’/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});

// Want to use async/await? Add the async keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get(’/user?ID=12345’);
console.log(response);
} catch (error) {
console.error(error);
}
}

axios.get(url[,options]);
传参方式：
1、通过url传参
2、通过params选项传参
axios.post(url,data,[options]);
2、axios.post
axios.post(’/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Performing multiple concurrent requests
function getUserAccount() {
return axios.get(’/user/12345’);
}

function getUserPermissions() {
return axios.get(’/user/12345/permissions’);
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));

axios默认发生数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数要以键值对的形式传递，不能以json形式传参
传参方式：
1、自己拼接键值对
2、使用transformResquest，在请求发生前将数据进行转换
3、如果使用模块化开发，可以使用qs模板进行转换

axios本身并不支持发生跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

三、发送JSONP请求

{
// GET /someUrl
this.$http.get(’/someUrl’).then(response => {

  // get body data
	this.someData = response.body;

}, response => {
 // error callback
 });
}

基本用法：
使用this.$http发送请求this.$http.get(url,[options])
this.$http.head(url,[options])this.$http.delete(url,[options])
this.$http.jsonp(url,[options])this.$http.post(url,[body],[options])
this.$http.put(url,[body],[options])this.$http.patch(url,[body],[options])

练习：百度的搜索列表