vue2.0学习笔记（第一讲）（常用指令及vue制作简易留言本）

头像
倩儿爱甜食
    阅读 11 分钟
    4

    vue是一个mvvm的框架，和angular类似，但比较小巧，容易上手，尤其适用于移动端的项目。vue的通常用法为一片html代码配合上json，再new出来vue实例即可。vue与angular的共同点是均不兼容低版本的IE浏览器（如IE6,7,8）。

    一、vue的下载及引包

    vue的官网地址为：https://cn.vuejs.org/。在官网首页，选择点击"起步",在跳转的页面的左侧边栏当中，选择"教程"为"2.x"，接下去点击下面的"安装"，在安装选择界面下，选择直接由<script>标签引入，接下去选择点击"开发版本"，把vue.js文件下载到本地的项目文件夹当中。接下去我们在html页面当中通过<script src="vue.js"></script>引入即可。

    二、vue的起步使用

    vue使用的基本骨架如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!"
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <h1>{{msg}}</h1>
    </div>
</body>
</html>

    图片描述

    我们在入口函数内部，使用new Vue({})来生成一个vue实例，使用变量vm来接收，该变量名可任取。在该vue实例内部接收一个json对象，该对象的el属性是为了确定该vue实例的适用范围。el的属性值类似于jquery当中的选择器，可以选择#id、.class、tagname的形式。该对象的data属性值为一个json对象，可以给出多组数据键值对。我们在html所选择的容器内使用{{msg}}即可显示data当中msg对应的属性值。

    三、vue的常用指令

    指令扩展了html标签的功能，或者说是扩展了html标签的属性，因为指令一般都是作为html标签的属性出现，直接加在html标签当中。

    1、v-model

    该指令一般用于表单元素，如input标签。该指令值通常为vue实例当中data的某个属性名，即对应该数据属性值。

    <div id="box">
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
</div>

    图片描述

    vue支持双向数据绑定，即当用户改变文本框当中的值时，相当于改变了msg的属性值，则页面当中所有与msg数据有关的模板数据都会发生同步的改变。

    图片描述

    2、v-for

    该指令一般用于实现vue当中数组数据的循环。我们给要循环生成的标签对加上指令v-for="(value,index) in arr"，即可根据arr的数组长度，循环生成多对标签对。其中arr对应data当中给定的数组名，value与index为变量名，可任取，不过参数顺序不可变，第一个参数对应该数组当中的值，第二个参数对应索引号。我们在html标签对当中使用{{value}}和{{index}}可以获取并显示。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!",
                    arr:['apple','banana','pear','tomato']
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(val,key) in arr">{{key}}--{{val}}</li>
        </ul>
    </div>
</body>
</html>

    图片描述

    当我们不需要使用该数组的索引号时，可以把指令简写为v-for="value in arr"，此时value对应为数组的值。该指令也可以实现对json对象的循环，如v-for=(val,key) in json"，其中json对应data当中json属性名，第一个参数对应遍历到的value值，第二个参数对应遍历到的key值。

    3、v-on

    该指令一般用于对页面当中的DOM元素进行事件绑定。如v-on:click="show()"即代表当单击该元素时执行show这个事件函数，该函数名必须事先在vue实例的methods对象当中声明定义过。new Vue({})实例对象当中data:{}对象的数据，可以看做是这个示例对象的属性。而methods:{}对象当中罗列的事件函数，可以看做是这个实例对象的方法。

        <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!",
                    arr:['apple','banana','pear','tomato']
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        }
   </script>

   <div id="box">
       <button v-on:click="show()">按钮</button>
   </div>

    不过我们在给某个DOM标签元素进行事件绑定时，v-on:click="show()"等价于@click="show()"，我们一般都采用简写的方式。
    我们在vue实例对象的方法函数体内使用this可以获取该实例对象当中的数据属性值，即data当中定义的数据。

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:"#box",
            data:{
                arr:['apple','banana']
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        });
    }
</script>
<div id="box">
    <button v-on:click="add()">add</button>
    <ul>
        <li v-for="(value,index) in arr">{{index}}--{{value}}</li>
    </ul>
</div>

    图片描述

    即每次点击按钮，arr数组当中都会追加一项，由于vue具有双向数据绑定的特性，故当数据发生改变时，在页面当中与该数据有关的模板也会相应的发生改变。

    4、v-show

    该指令可以控制DOM元素的显示与隐藏。我们给DOM元素加上指令v-show="true"则可以控制该元素显示，若加上指令v-show="false"则可以控制该元素隐藏。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .test{
            margin:20px;
            width:100px;
            height:100px;
            background-color: skyblue;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    a:true
                },
                methods:{
                    
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <button @click="a=false">change</button>
        <div class="test" v-show="a"></div>
    </div>
</body>
</html>

    在@click=""内部可以直接由属性名来获取vue实例对象的数据属性，并对其进行赋值操作。

    5、v-once

    该指令用于明确只绑定一次数据，当数据更新之后，模板不会随之变化。

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
               msg:'hello world!'
            }
        });
    };
</script>
<div id="box">
    <input type="text" v-model="msg">
    <h2 v-once>{{msg}}</h2>
</div>

    示例代码如上所示，当给标签加上v-once指令后，则该标签只绑定一次数据，之后当用户改变文本框当中的值，从而改变vue实例的data当中的msg的属性值时，h2标签内的模板数据不会随之发生改变。

    图片描述

    6、v-html

    该指令可以用于将数据内容进行html转义输出。

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
               msg:'<h1>welcome</h1>'
            }
        });
    };
</script>
<div id="box">
    <input type="text" v-model="msg">
    <div v-html="msg"></div>
</div>

    示例代码如上所示，当给标签加上v-html指令，并且指令值为数据的属性名，可以将数据内容进行html转义输出后，呈现在该标签对当中。此时不再需要写{{msg}}。

    图片描述

    7、v-cloak

    由于我们在模板当中用{{}}这种标记内方式数据，所以当数据请求慢的时候，用户可能会看到花括号标记，使用v-cloak指令可以防止闪烁，防止用户看到花括号标记。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak]{
            display:none;
        }    
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                   msg1:'welcome',
                   msg2:'hello',
                   msg3:'world'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div v-cloak>
            <h1>{{msg1}}</h1>
            <h2>{{msg2}}</h2>
            <h3>{{msg3}}</h3>
        </div>
    </div>
</body>
</html>

    示例代码如上所示，我们需要在style标签对内对v-cloak属性选择器进行样式设定。该指令一般用在一个比较大的段落当中，单个标签标记不用这个指令，即当一个div的子代有多处用到花括号标记，则我们只需给父级div标签加上v-cloak指令即可。

    8、v-text

    该指令也是为了防止闪烁，防止用户看到花括号标记，上述的v-cloak指令一般用于比较大的段落，但对于单个标签来说，可以使用v-text这个指令。
    即之前我们使用的<h1>{{msg}}</h1>与<h1 v-text="msg"></h1>数据呈现的效果等价，但使用第二种写法时，即使网速再慢，也看不到花括号标记，可以达到防止闪烁的目的。

    四、vue制作简易留言本

    我们使用bootstrap进行简单的页面布局，留言本页面如下所示：

    图片描述

    当没有留言时，显示暂无数据。当用户输入姓名和留言之后，点击提交按钮，则留言列表区就可以显示留言信息，暂无数据的提示消失，出现一个删除全部的按钮，留言序号从1开始增加，后添加的留言显示在上面，每一行留言的右侧都有一个删除按钮，选择点击删除按钮即可删除对应的留言，点击全部删除按钮就可以删除全部的留言，此时再次出现暂无数据的提示。

    图片描述

    示例源代码为：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="vue.js"></script>
    <style>
        h2{
            text-align: center;
        }
        .board ul{
            list-style: none;
        }
        .board li{
            margin-left: 110px;
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            font-size: 18px;
            position: relative;
        }
        .board li button{
            top:10px;
            position: absolute;
            right: 50px;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    name:'',
                    message:'',
                    list:[]
                },
                methods:{
                    submit:function(){
                        if(this.name==''||this.message=='') return;
                        this.list.unshift({name:this.name,message:this.message});
                        this.name = '';
                        this.message = '';
                    },
                    deleteMsg:function(index){
                        if(index == -1){
                            this.list = [];
                        }else{
                            this.list.splice(index,1);
                        };
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <h2>我的留言本</h2>
        <div class="container">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" v-model="name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="message" class="col-sm-2 control-label">留言</label>
                    <div class="col-sm-10">
                    <textarea class="form-control" rows="3" id="message" v-model="message"></textarea> 
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-success" @click="submit()">提交</button>
                    </div>
                </div>
            </form>
            <div class="board">
                <h2>留言列表区</h2> 
                <ul>
                    <li v-for="(item,key) in list">【序号】：{{list.length-key}}【姓名】：{{item.name}}【留言】：{{item.message}}
                     <button type="button" class="btn btn-danger" @click='deleteMsg(key)'>删除</button>
                    </li>
                    <li v-show="list.length==0">暂无数据......</li>
                    <li v-show="list.length!=0"><button type="button" class="btn btn-danger" @click='deleteMsg(-1)'>删除全部</button></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
    vue.js
    倩儿爱甜食
    477 声望62 粉丝

    一切都是最好的安排 ^-^ !

    « 上一篇
    基于ace-admin的智慧床垫管理云平台
    下一篇 »
    vue2.0学习笔记（第二讲）（事件对象、键盘事件及自定义键盘信息、属性绑定）

    引用和评论

    推荐阅读
    头像
    前端自动化构建之Gulp的使用（学习笔记）

    倩儿爱甜食阅读 2.2k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新