写在前面的话
应工作需求本人开始学习vue这个简洁大方的前端框架，并在此分享与交流一下学习心得，如有不对的地方还望指教，好了废话不多说开始进入正题
vue学习第一步
学习这门语法之前咱们先来简单的了解一下vue到底是个什么？
vue是一个前端的mvvm框架和angular类似，但是较angular来说更容易上手，更加小巧的一个mvvm框架
那了解到vue是什么了之后，咱们就开始查找vue的官网，以及vue为我们提供的API
了解到这些之后我们免不了就开始跃跃欲试了，好了废话不多说，咱们先来了解一下vue的雏形
vue的基本雏形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的基本雏形</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box',//这里需要注意的是el是一个选择器，这个选择器可以是class、tagName、id.... data:{ msg:'welcome vue' } }); }; </script> </head> <body> <div id="box"> {{msg}} </div> </body> </html>
通过以上的大致了解，我们可以知道vue就是通过一串HTML代码加上一串js代码就能编写出来，那么vue里面有哪些内置的指令以及事件呢？那么我们接下来就来了解一下vue的指令和事件
vue的指令和事件
vue常用指令： 1、v-model：数据双向绑定 语法： <input type="text" v-model="msg"> 2、v-for：数据循环 语法： <li v-for="value in arr">{{value}}</li> 注：v-for中内置了索引、key 语法：{{$index}} {{$key}} v-for循环json 语法：<li v-for="(k,v) in json">{{k}}{{v}}{{$index}}{{$key}}</li> 3、v-show：内容显示或隐藏 语法：<div v-show="false/true"></div>
4、{{*msg}}：数据只绑定一次
5、{{{msg}}} ：HTML转译输出
6、{{msg}}： 数据更新模板变化
7、v-text：绑定数据
8、v-html：解析html代码 vue常用事件： 1、v-on:click 单击事件 简写:@click 语法：<input type="button" value="按钮" (v-on:click||@click).prevent="fn"> prevent:阻止浏览器默认行为 注：fn需要定义在new Vue对象的methods里面 例：new Vue({ el:'#box', data:{ //数据 }, methods:{ show:function(ev,id){//$event:事件对象 id：事件传入参数 alert(1);
ev.cancelBubble=true;//阻止事件冒泡
ev.preventDefault();//阻止浏览器默认行为 } } }); <input type="button" value="按钮" (v-on:click||@click).stop="show($event,id)"> stop：阻止事件冒泡 2、v-on:mouseout 当鼠标指针从元素上移开时触发事件 3、v-on:mouseover 当鼠标指针悬停在元素上触发事件 4、v-on：dblclick 鼠标双击事件 5、v-on：mousedown 鼠标按下事件 6、v-on：keydown 键盘按下事件 7、v-on：keyup 键盘弹起事件 8、v-on：keyup.13 enter键弹起事件 9、v-on：keyup.enter enter键弹起事件 ... 由于事件还有很多就不一一列举了，例如keydown.enter,keydown.left..... 重点：这里唯一需要提到的是v-on:可以简写为@ 到这里vue的事件以及指令咱们就有了一个大致的了解
了解了vue的指令和事件之后，当然免不了要了解vue的属性
vue绑定属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ a:{ color:'red', backgroundColor:'gray' },
json:{
red:true,
blue:true
}
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
t:'这是一张美丽的图片'
}, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong (v-bind||:)style="a" (v-bind||:)class="json">文字...</strong> <img :src="url" alt="" :width="w" :title="t"> </div> </body> </html>
vue数据交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue数据交互</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> <script> window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sug.so.360.cn/suggest',{ word:'a'//传参 }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); };
window.onload=function(){
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.(get/post)('get.php',{
a:1, //传参
b:2 //传参
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script> </head> <body> <input type="button" value="按钮" @click="get()"> </body> </html>
vue过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue过滤器</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ } }); }; </script> </head> <body> <div id="box"> {{12|currency '￥'}} </div> </body> </html>