vue是框架，vue.js是vue框架的核心js库
库：是一个封装好的特定的方法的集合，提供给开发者使用，库没有控制权，控制权在使用者手中。代表：jQuery、underscore、util
框架：框架就是一整套架构，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权在框架本身，使用者要用框架所规定的某种规范进行开发。代表：backbone、angular、vue
历史过渡框架：jQuery --> YUI --> backbone ---> anguler --> react -->vue
vue将库结合在一起，VueRout、vuex，axios
特点：响应式数据绑定（放弃操作dom，进而操作数据）
可组合的组件系统
初识vue.js
读音：同view，视图的意思
vue到底是什么：一个mvvm框架（库），和angular类似，比较容易上手、小巧
mvc思想：module层（数据）和view层（视图）分离，由数据驱动视图，类似的有
mvp，mvvm，mv*，mvx等
官网：http://cn.vuejs.org/
手册：http://cn.vuejs.org/api/
vue和angular的区别
vue----简单，易学
指令以v-xxx的形式
它是一片html代码（view层），配合上json数据（module层），然后再new出vue实例（vm层即controller）组成
是有个人维护的项目
适合：移动端项目，小巧灵活
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="xxx"
{{msg}}
vue展示数据:
html:
<div id="box">
{{msg}}
</div>
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
常用指令
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
vue：
指令: 扩展html标签功能,（其实就是html元素的属性）
v-model 一般用于表单元素(input) 双向数据绑定
循环:
v-for="name in arr"
{{$index}}
v-for="name in json"
{{$index}} {{$key}}
v-for="(k,v) in json"
事件：
v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法注册到实例中
alert(1);
}
}
});
显示隐藏：
v-show=“true/false”
事件
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请求（推荐使用bind动态绑定）
class和style:
:class="" v-bind:class="" //可以跟单个类
:style="" v-bind:style=""
:class="[red]" //red是数据，可以跟数组
:class="[red,b,c,d]"
:class="{red:a, blue:false}" //a是数据，可以跟对象
:class="json" //可以跟整体一个json数据
data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"
模板
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转义输出html标签
过滤器：过滤模板数据
系统提供一下过滤器：
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 钱
{{msg| filterA 参数}} （参数以空格分开）
....
交互
全局调用http和实例调用http
(全局使用)Vue.http.get....../ （实例使用）this.$http.get... $http （类似于jq中的ajax功能）
如果vue想做交互
引入: vue-resouce （vue2.0已不维护，推荐使用axios）
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
this.$http.get()/post()/jsonp()
this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
来源：https://www.cnblogs.com/gopark/p/11000700.html