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

时间  2019-12-05
标签 vue2.0 vue 学习 笔记 第一 经常 使用 指令 制做 简易 留言本 繁體版
原文   原文链接

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

1、vue的下载及引包

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

2、vue的起步使用

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对应的属性值。jquery

3、vue的经常使用指令

指令扩展了html标签的功能，或者说是扩展了html标签的属性，由于指令通常都是做为html标签的属性出现，直接加在html标签当中。json

一、v-model

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

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

图片描述

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

图片描述

二、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值。app

三、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具备双向数据绑定的特性，故当数据发生改变时，在页面当中与该数据有关的模板也会相应的发生改变。

四、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实例对象的数据属性，并对其进行赋值操做。

五、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标签内的模板数据不会随之发生改变。

图片描述

六、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}}。

图片描述

七、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指令便可。

八、v-text

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

4、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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程