vue的简单实现

目录

要实现vue需要在文件中引入一下代码

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 

下面分开几种操作来实现vue

1. 简单显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--简单显示数据-->
    <div id="app">
        {{message}}
        <h1>{{school.mobile}}</h1>
        <h2 v-text="school.name"></h2>
        <p v-text="content"></p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                message:"hello",
                school:{
                    name:"test1",
                    mobile:"110"
                },
                content:"www.baidu.com"
            }
        })
    </script>
</body>
</html>

显示结果
vue的简单实现

2. 测试v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-on-->
    <div id="vOn">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <!--用@替代v-on:-->
        <input type="button" value="v-on指令" @click="doIt">
        <input type="button" value="v-on指令" @dblclick="doIt">

        <input type="button" value="改变食物" @click="changeFood">
        <p>{{food}}</p>

        <input type="text" @keyup.enter="sayHi('你好')">
    </div>
    <script>
		var vOn = new Vue({
            el: "#vOn",
            methods:{
                doIt:function (){
                    alert("做IT");
                },
                changeFood:function (){
                    this.food = "水煮鱼"
                },
                sayHi:function (say){
                    alert("say:"+say);
                }
            },
            data: {
                food:"蛋炒饭"
            }
        })
    </script>
</body>
</html>

显示结果
vue的简单实现
点击第一个按钮
vue的简单实现
点击第二个按钮
vue的简单实现
双击第三个按钮
vue的简单实现
点击第四个按钮
vue的简单实现
在输入框中输入内容,回车
vue的简单实现

3. 测试v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-show-->
    <div id="vShow">
        <button @click="changeIsShow">改变图片显示情况</button>
        <br>
        <img v-show="isShow" src="test.jpg">
    </div>
    <script>
        var vShow = new Vue({
            el:"#vShow",
            data:{
                isShow:false,
            },
            methods: {
                changeIsShow:function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>
</html>

显示结果
vue的简单实现
点击按钮,图片在显示和隐藏之间切换
vue的简单实现

4. 测试v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-if-->
    <div id="vIf">
        <button @click="toggleIsShow">切换显示</button>
        <p v-if="isShow">{{message}}</p>
    </div>
    <script>
        var vIf = new Vue({
            el: "#vIf",
            data:{
                message:"hello",
                isShow:false,
            },
            methods:{
                toggleIsShow:function (){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>
</html>

显示结果
vue的简单实现
点击按钮
vue的简单实现

5. 测试v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-bind,为元素绑定属性,可以用:替代v-bind:-->
    <div id="vBind">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc">
        <br>
        <!--{active:isActive}对象方式,类似于三元表达式-->
        <img :src="imgSrc" :class="{active:isActive}" @click="toggleActive" title="改变边框">
    </div>
    <script>
        var vBind = new Vue({
            el:"#vBind",
            data:{
                imgSrc:"1.png",
                isActive:false,
            },
            methods:{
                toggleActive:function (){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

结果显示
vue的简单实现
点击最后一幅图,出现红色边框
vue的简单实现

6. 测试v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-for-->
    <div id="vFor">
        <button @click="add">添加</button>
        <button @click="remove">删除</button>
        <ul>
            <li v-for="(item,index) in arr">
                人物{{index+1}}:{{item}}
            </li>
        </ul>
    </div>
    <script>
        var vFor = new Vue({
            el:"#vFor",
            data:{
                arr:["貂蝉","吕布","夏侯惇","达摩"],
            },
            methods:{
                add:function () {
                    this.arr.push("马超");
                },
                remove:function (){
                    this.arr.shift();
                }
            }
        })
    </script>
</body>
</html>

结果显示vue的简单实现
点击添加按钮
vue的简单实现
点击删除按钮
vue的简单实现

7. 测试v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--写vue需要引入这个-->
<body>
    <!--测试v-model,获取和设置表单元素的值(双向数据绑定)-->、
    <div id="vModel">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <script>
        var vModel = new Vue({
            el:"#vModel",
            data:{
                message:'你好',
            }
        })
    </script>
</body>
</html>

结果显示
当输入框中输入信息时,页面实时更新输入的信息。
vue的简单实现

上一篇:SpringMVC笔记


下一篇:Git 常用指令