Vue.js 快速入门

关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项， Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供），vue-router以及组件间的通信请使劲的敲这里：敲敲敲

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 class="modal-header">

                    <h4 class="modal-title">确定<span v-show="m">全部</span>删除吗？</h4>

                    <div class="text-right">

                        <button class="btn btn-primary" data-dismiss="modal">取消</button>

                        <button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">确定</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

我做的时候引用了bootstrap的js文件，所以有些弹框效果是基于bootstrap的。关于html布局我就不说了，相信你们都是有基础的，我就从添加数据开始说。

data: {

    myData: [],

    username: "",

    ages: "",

    nowindex: 1,

    m: false

}

<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>

addData:function(){

if( this.$refs.sele.value==""){

	alert("请填满资料！")

}else{

      this.myData.push({

        name:this.username,

        age:this.ages

    });

    this.username="",

    this.ages=""

}

},

建两个变量username、ages用来存放input利用v-model传过来的名称和年龄，在通过点击添加触发addData()将收到值的两个变量添加到建的数组当中在清除两个变量。这样就形成了添加数据，那该如何删除添加后的数据呢？

<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>

<div class="modal-header">

    <h4 class="modal-title">确定<span v-show="m">全部</span>删除吗？</h4>

    <div class="text-right">

        <button class="btn btn-primary" data-dismiss="modal">取消</button>

        <button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">确定</button>

    </div>

</div>

data: {

    myData: [],

    username: "",

    ages: "",

    nowindex: 1,

    m: false

}

noindex:function(n){

    if(n==-1){

        this.myData = [];

    }else{

        this.myData.splice(n,1);

    }

}

其实很简单给个判断就好了，如果是删除单个的话，点击删除后将当前下标传给变量nowindex，再将变量当参数传给noindex（nowindex），最后noindex方法里面判断nowindex是多少，在使用splice（n,1）删除在数组中第n个值。

<button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">删除全部</button>

删除全部直接将变量值赋-1，判断如果-1就清空数组。

有公众号了，不定期推送热门前端技术文章！！！