vue起步
2017-06-14 本文已影响77人
Mx勇
vue是什么?
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 vue简单，易用，便于维护，是一个mvvm的框架，不像angular.js那样复杂。
vue与angular的区别？
vue.js简单易用，指令以v-xx的形式来书写，简单来说vue实例的形成，就是一片html代码new出一个vue的实例，而且他是个人开源项目尤其是在移动端用处非常广泛。 而angular.js他比较复杂，不易上手，所有方法和属性基本都基于$scope,他是有Google团队维护，他们基本都不兼容IE低版本。
开始vue
1.页面展示数据
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'hello world!',
}
});
</script>
</body>
这里需要说明的是vue2.0版本挂载元素 不能是body或html只能是div等元素，否则会报错。
2.指令
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'hello world!',
}
});
</script>
</body>```
v-bind :src=""添加属性 简写为:src="";
```<body>
<div id="app">
<!--  -->
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
}
});
</script>
</body>```
还可以添加多个数据
```<body>
<div id="app">
<!--  -->
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
title:'我是一张图片'
}
});
</script>
</body>```
v-bind结合class，style使用
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="[red,bg]">无法拒绝</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
red:'red',
bg:'bg'
}
});
</script>
</body>```
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="{red:true,bg:true}">无法拒绝</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
}
});
</script>
</body>```
```<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.red{ color:red;}
.bg{ background: gray;}
</style>
</head>
<body>
<div id="app">
<span :class="json">无法拒绝</span>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
json:{
red:true,
bg:true
}
}
});
</script>
</body>```
循环的使用v-for
```<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.a}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
todos:[{a:'vue'},{a:'angular'},{a:'react'}]
}
});
</script>
</body>```
index的用法
```<body>
<div id="app">
<ul>
<li v-for="(todo,index) in todos">
{{todo}} {{index}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
todos:{a:1,b:2,c:3}
}
});
</script>
</body>```
这里说明一下在1.0版本是不允许重复数据出现必须用track-by="$index"，2.0版本不需要，直接可以使用。
事件的添加v-on:click mouseover... 简写为@on:click
```<body>
<div id="app">
<input type="button" value="按钮" v-on:click="show"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
</script>
</body>
<div id="app">
<input type="button" value="按钮" v-on:click="show"/>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(){
this.arr.push('d3');
}
}
});
</script>
</body>```
深入事件了解 ：阻止事件冒泡 浏览器默认行为 键盘事件。。
```<body>
<div id="app">
<div class="box" v-on:contextmenu="show($event)"></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
}
}
});
</script>
</body>```
//ev.preventDefault(); 可以简写为v-on:contextmenu.prevent="show()" 事件对象为$event
```<body>
<div id="app">
<div v-on:click="a()">
<div class="box" v-on:click.stop="show()"></div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(){
alert(1);
//ev.cancelBubble=true;
},
a:function(){
alert(2);
}
}
});
</script>
</body>```
阻止事件冒泡可以简写为v-on:click.stop="show()"
```<body>
<div id="app">
<input type="text" @keydown.enter="show()"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
arr:['vue','angular','react']
},
methods:{
show:function(ev){
alert('你按回车了')
}
}
});
</script>
</body>```
常用键码：
回车  a). @keyup.13   b). @keyup.enter  
上、下、左、右  @keyup/keydown.left  @keyup/keydown.right  @keyup/keydown.up  @keyup/keydown.down
