vue:
vue:一个mvvm框架(库),和angular类似
比较容易上手
指令以v=xxx
一片html代码配合接送,在new一个vue实例
适合:移动端,小巧
vue基本雏形
v-model 一般表单元素(input) 双向数据绑定
循环 v-for="name in arr"
{{$index}} 数组编号
v-for="name in arr"
{{$index}} 数组编号 {{$key}}
v-for="(k,v) in json"
事件:
v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
显示隐藏:v-show="true/false"
简写:@click=""
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡: ev.cancelBubble=true;
@click.stop="" 推荐
默认事件:
阻止默认事件:
ev.preventDefault();
@contextmenu.prevent 推荐
键盘类事件:
@keydown $event.keyCode
@keyup
常用键简写:@keyup.13 = "show()" 回车
@keyup.enter
上下左右
案例,简易留言板(todolist)
属性:
v-bind:src=url"" 简写: :src=url"":
class和style:
:class=""
:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a,blue:false}"
:class="json"
data:{
json:{red:a,blue:false}
}
注意:复合样式,采用驼峰命名法
模板:
{{msg}} 数据更新模板更新 {{*msg}}数据值绑定一次
{{{msg}}} 转义标签
过滤器: 过滤模板的数据
{{msg|filterA}} uppercase(大写) lowercase(小写) capitalize (首字母大写)
currency (钱) {{12|currency $}}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 <script> 8 window.onload=function(){ 9 var c = new Vue({ 10 el:"#box", 11 data: { 12 a:true 13 14 }, 15 methods:{ 16 } 17 }); 18 19 } 20 </script> 21 </head> 22 <body> 23 <div id="box"> 24 <input type="button" value="按钮" v-on:click="a=false"> 25 <br> 26 <div style="background: red ; 100px;height: 100px" v-show="a"></div> 27 28 </div> 29 30 </body> 31 </html>
交互:
如果vue想做交互 必须引入包
get:
获取;this.$http.get(a.txt).then(function(res){
alert(res.date);
),function(res){
alert(res.status);
});
给服务器发送数据:
post:
jsonp: