Vue快速入门
准备：
- Vue.js 地址：http://cn.vuejs.org/
- Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download
没错就只需要这两个就可以开发了 vue是核心文件，bootstrap在这里只是为了提高开发效率而引用的，是可选的。 现在建个html文件引入刚下载好的两个文件这里我们只需要引用bootstrap的css样式文件即可，现在是这样的：
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
.......
</div>
</div>
</div>
<script src="./public/image/vue.js"></script>
</body>
</html>现在我们来先看段代码：
<div id="app">
<div>{{message}}</div>
</div>
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});这个例子在浏览器解析时会输出hello vue.js。
我们先不管为什么，我们先理解他的逻辑。 在这个例子里我们的
<div id="app">
<div>{{message}}</div>
</div>就是视图层，而
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});就是数据层，在使用Vue.js之前，我们都需要先像这样实例化一个Vue对象。 里面有四个常用的属性，el、data、methods、components。
- el:声明vuejs管理的边界，类似于angular的ng-app，把数据绑定给谁。 上面的例子中将数据绑定给了#app。
- data:专门存储一些数据的属性，数据一定是对象格式。 上面的例子中给message赋值hello vue.js!
- methods:专门放置我们的事件的方法
- components:创建组件
回到上面的例子el指定了#app，data存放了数据message，然后利用表达式{{}}将数据显示到页面。
接下来再看个例子：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})这里用到了新的指令v-model，其作用就是接收用户输入的一些数据，直接就可以将这些数据 挂载到data属性里面，使得实现双向数据绑定更加容易。
接下来介绍一些常用的指令：
- v-if:通过判断加载内容，若为真加载，为假时删除元素
<div id="app">
<p v-if="seen">Now you see me</p>
</div>
new Vue({
el: '#app',
data: {
seen: true
}
})- v-for:控制html元素的循环，实现数据列表
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
- v-show:元素会始终渲染并保持在dom中，并且安全性没有v-if高，因为v-show 用法和v-if相同，只是v-show将元素display设置成none，并不是将元素直接移除
- v-else:元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。
<div v-if="a"></div>
<div v-else></div>- v-bind:给页面中html属性进行绑定，拥有缩写“:”，也推荐使用缩写
<img v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:'red',fontSize:'30px'}
}可以缩写成这样
<img :src="img" />
<div :style="styles">style</div>- v-on:对页面中的事件进行绑定,使用方法 v-on:click="函数名称",函数就是存放在methods属性里的方法名，例如
<button v-on:click="oclick()">点击</button>
methods:{
oclick:function(){
alert(1);
}
}也有缩写“@”
<button @click="oclick()">点击</button>效果是一样的
- $event:事件对象，如同我们原声js中的event
<div @click="show($event)">点我</div>
methods:{
show:function(ev){
alert(ev.clientX)
}
}结果：
- stop:阻止事件冒泡
//原声:ev.cancelBubble=true;
@click.stop="show()"- prevent:阻止默认事件
//原声:ev.preventDefault();
@click.prevent="show()"- self:当事件在该元素本身触发时触发回调
@click.felf="show()"- capture:添加事件侦听器时使用事件捕获模式
@click.capture="show()"- 键盘事件:
//原声：ev.keyCode (13回车)
/*@keydown:任意键按下 @keyup:任意键抬起
//方向键：.up:上 .down:下 .right:右 .left:左 .enter:回车
//键码：.13:回车
<div @keydown="get()">啦啦啦~</div>
<div @keyup.enter="get()">啦啦啦~</div>看上面例子就注意到vue支持键码
- 过滤器：
<p>{{ jiexige|uppercase }}</p>
//uppercase 大写、 lowercase 小写、 capitalize 首字母大写、currency 参数:"￥" 钱币以上是vue基本使用，接下来讲讲vue-cli的需要注意的格式，最后做个经典例子“TODOLIST”
- vue对象里不能有缩进，一般缩进用两个空格代替
- 冒号后面要跟一个空格
- 逗号后面也要跟一个空格
- 存放链接需要使用require
- 数据只能用单引号包着
{
url: require('./assets/images/img4.png'),
}目前只注意到这些，将不定期更新，下面来做个例子：我先前做好了可以点击此处看演示TODOLIST， 下面我来讲解下
我的数据层
window.onload = function(){
new Vue({
el: "#todu",
data: {
myData: [],
username: "",
ages: "",
nowindex: 1,
m: false
},
methods: {
addData:function(){
if(this.$refs.sele.value==""){
alert("请填满资料！")
}else{
this.myData.push({
name:this.username,
age:this.ages
});
this.username="",
this.ages=""
}
},
noindex:function(n){
if(n==-1){
this.myData = [];
}else{
this.myData.splice(n,1);
}
}
}
});
}视图层
<div class="container" id="todu">
<h1 class="text-center">TODOLIST</h1>
<form role="form">
<label for="name">名称：</label>
<input type="text" class="form-control" name="name" id="name" ref="sele" placeholder="请输入名称" v-model="username">
<br>
<label for="sag">年龄：</label>
<input type="text" class="form-control" name="seg" id="seg" ref="sele" placeholder="请输入年龄" v-model="ages">
<br>
<div>
<button type="button" class="btn btn-primary" @click="addData()" value="添加">添加</button>
<input class="btn btn-danger" type="reset" value="重置">
</div>
</form>
<hr>
<h3 class="text-center text-muted">数据查询列表</h3>
<table role="table" class="table">
<tr>
<th class="text-center">#</th>
<th class="text-center">名称</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="(list,index) in myData">
<td>{{index+1}}</td>
<td>{{list.name}}</td>
<td>{{list.age}}</td>
<td>
<button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowindex=index,m=false">删除</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4">
<p class="text-center text-muted">暂无数据……</p>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">删除全部</button>
</td>
</tr>
</table>
<!--模态框 弹出框-->
<div role="dialog" class="modal fade" id="layer" >
<div class="modal-dialog">
<div class="modal-content">
<div