Vue.js的雏形：
数据绑定：
1，单向 {{输出}} 数据=>视图
2，双向 v-model 数据<=>视图
3，{{*msg}} 数据只绑定一次
4， {{{msg}}} HTML转意输出
<script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue' } }); }; </script> </head> <body> <div id="box"> {{msg}} </div> </body>
Vue.js指令
相当于扩展html标签功能,属性
v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；
v-show 与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none";
实现div显示隐藏功能
<script> window.onload=function(){ new Vue({ el:'#box', data:{ //数据 a:true }, methods:{ fnShowHide() { this.a=!this.a; } } }); }; </script> </head> <body> <div id="box"> <input type="button" value="显示隐藏" @click="fnShowHide" > <div style="100px; height:100px; background: red" v-show="a"> </div> </div> </body>
循环：
数组重复，无法循环问题？
track-by='索引' 提高循环性能也可以指定其他的数据
{{$index}} 下标索引 {{$key}} 键值
可以循环数组和Json
<script> window.onload=function(){ new Vue({ el:'#box', data:{ arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} } }); }; </script> </head> <body> <div id="box"> <ul> <ul> <li v-for="(k,v) in json"> {{k}} {{v}} {{$index}} {{$key}} </li> </ul> </div> </body>
过滤器
-> 过滤模板数据
<script> window.onload=function(){ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{12|currency '￥'}} </div> </body>
系统提供一些过滤器:
{{msg| filterA 参数}}
uppercase 转大写字母
lowercase 转小写字母
currency 美元符号
属性:
width/height/title v-bind:src=""
简写:
:src="" 推荐
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
事件：
事件对象: $event 参数可以得到一个事件对象
@click="show($event)"
$event ev.keyCode 获得键码编号
键盘:
@keydown @keyup
常用键:
回车 a) @keyup.13 b) @keyup.enter
@keyup/keydown.left @keyup/keydown.right
@keyup/keydown.up @keyup/keydown.down
默认行为(默认事件):
阻止默认行为: 点击右键不会出现菜单
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
数据交互：
this.$http.get()/post()/jsonp()
this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
跨域访问百度URL
<script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:'a' },{ jsonp:'cb' }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); }; </script> </head> <body> <input type="button" value="按钮" @click="get()"> </body>
文章还有不足随时可能更新！