官网:https://cn.vuejs.org/
-------------------------------------------
vue读音: 类似于View
-------------------------------------------
vue到底是什么?
一个mvvm框架(库)、和angular类似，比较容易上手、小巧
-------------------------------------------
mvc:
mvp
mvvm
mv*
Mvx
-------------------------------------------
vue和angular区别?
vue—— 1）简单、易学
2）指令以v-xxx
3）一片html代码配合上json，在new出来vue实例
4）个人维护项目
5）适合:移动端项目,小巧
6）vue的发展势头很猛，github上start数量已经超越angular
angular—— 1）上手难
2）指令以ng-xxx
3）所有属性和方法都挂到$scope身上
4）angular由google维护
5）合适: pc端项目
vue和angular共同点:不兼容低版本IE(8以下)
-------------------------------------------
vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);
app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})
html:
div ng-controller="xxx"
{{msg}}
vue:
html:
{{msg}}
// 实例化一个Vue对象
var c = new Vue({
// el:"选择器"：是固定的，可以是id选择器、类选择器、标签选择器
固定的 el:'#box',
// data:表示数据也是固定的
data:{ // 存储数据
msg:'welcome vue'
}
});
// 实例化一个vue对象，可以没有名字new Vue({ // el:"选择器"：是固定的 el:"#box", // data：表示数据也是固定的 data:{ msg:"welcome vue" }});
-------------------------------------------
data里面存储数据:
// 实例化一个vue对象，可以没有名字new Vue({ // el:"选择器"：是固定的 el:"body", // 标签选择器 // data：表示数据也是固定的，string、number、boolean、array、json data:{ msg:"welcome vue", msg2:12, msg3:true, arr:["apple","banana","orange","pear"], json:{a:"apple",b:"banana",c:"orange"} }});
Html:
<input type="text" v-model="msg"/><input type="text" v-model="msg"/><br />{{msg}}<br />{{msg2}}<br />{{msg3}}<br />{{arr}}<br/>{{json}}
-------------------------------------------
常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
指令:扩展html标签功能,属性
数据:
v-model:产生数据,一般表单元素(input) 双向数据绑定
数据更新模板自动更新
循环:
v-for="name in arr"
{{name}}
{{$index}}
v-for="name in json"
{{name}}
{{$index}}
{{$key}}
v-for="(k,v) in json"
{{k}}
{{v}}
{{$index}}
{{$key}}
<li v-for="value in arr"> {{value}} li>
事件:
v-on:click="函数"
v-on:click="a=false"
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-show=“myData.length == 0”
-----------------------------------------
关于this的问题:
methods:{ add:function(){ /* 因为我们实例化了一个vue对象，因此this就是我们实例化的这个对象，而arr,json都是这个对象的属性因此我们可以this.属性*/ this.arr.push("tomato"); }}
bootstrap+vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签赋予class，角色
依赖jquery
----------------------------------------
事件:
v-on:click/mouseover......
简写的:
@click="" 推荐
事件对象:
@click="show($event)"
methods:{ show:function(ev){ alert(ev.clientX); } }
@click="show($event)" // 只传一个参数$event
methods:{ show:function(ev,b){ alert(ev.clientX); alert(b); } }
@click="show($event,12)" //传两个参数$event和其他参数，可以互换位置
事件冒泡:
Html:
<div @click="show2()"> <input type="button" value="按钮" @click="show()"/> div>
阻止冒泡:
// JS原生阻止事件冒泡
[if !supportLists]a) [endif]. ev.cancelBubble=true;
[if !supportLists]b) [endif]. @click.stop推荐
默认行为(默认事件):
Html:
<input type="button" value="按钮" @contextmenu="show()"/>
阻止默认行为:
// JS原生阻止浏览器默认行为
[if !supportLists]a) [endif]. ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode // JS原生键码
@keyup
常用键:
回车
//当按下回车时才会触发这个事件
a). @keyup.13
b). @keyup.enter
上、下、左、右键
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
@keydown.up.prevent="changeUp()"
----------------------------------------
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
注：自定义属性也可以使用v-bind进行绑定，也可以使用”:”简写
Vue：
new Vue({ el:"#box", data:{ url:"../../../img/瓢虫1.png", w:"100px", t:"这是一张美丽的的图片" }});
Html：
<img :src="url" alt="" :width="w" :title="t"/>
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="{grey:$index == now}"
:class="[red]" // red是data里的数据 data:{ red:"red" // 字符串是类名 }
:class="[red,blue]" // red和blue是data里面的数据 data:{ red:"red" // 字符串是类名
blue:"blue" // 字符串是类名 }
:class="{red:true, blue:false}" // red blue是类名
:class="{red:a, blue:b}" // red是类名 true/false也可以给数据 data:{ a:true, b:false }
:class="json" // json是data里面的数据
data:{
json:{red:a, blue:false}
}
----------------------------------------
style:
:style="[c]" // c是data里面的数据
data:{ c:{color:"red"} // c一定是一个json }
:style="[c,d]" // c和d是data里面的数据
data:{ c:{color:"red"}, // c一定是一个json d:{backgroundColor:"blue"} // d一定是一个json，复合属性采用驼峰命名法 }
注意:复合样式，采用驼峰命名法
:style="{color:’red’}" // red是类名 注意：red要加引号
:style="json" // json是data里面的数据
data:{ json:{ color:"red", backgroundColor:"blue" } }
注：style里面一定是json
-----------------------------------------
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出h1-h6等标签会被解析
-----------------------------------------
过滤器:->过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}} // 多个过滤器
eg:{{'WELCOME'|lowercase|capitalize}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 钱 eg:{{12|currency}}
{{msg| filterA参数}} eg:{{12|currency “￥”}} {{12|currency “rmb”}}
....
-----------------------------------------
交互:
$http （ajax）
vue本身不支持交互，如果vue想做交互
引入: vue-resource.js，引入resource相当于给vue实例添加了一个方法或对象
get/post/jsonp(“url请求的路径”，{传递给后台的数据}，{options配置})
then(function(){},function(){})，一个是成功执行的，一个是失败执行的
res是个对象
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 // 模拟json数据，使用post必须用
}).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
360：
this.$http.jsonp("https://sug.so.360.cn/suggest",{ word:"a" // 其实就是我们搜索的关键字 }).then(function(res){ // res是个对象 alert(res.data.s); },function(res){ alert(res.status); });
百度：
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a' // 其实就是我们搜索的关键字
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
// vue中jsonp默认名称是callback如果不是一定要改
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
https://www.baidu.com/s?wd=s
网友评论