Vue基础实例一（数据绑定、双向绑定、属性绑定、事件绑定）

最新推荐文章于 2021-10-25 15:15:15 发布

IT飞牛

最新推荐文章于 2021-10-25 15:15:15 发布

阅读量117

点赞数

文章标签： vue javascript js html mvvm

本文链接：https://blog.csdn.net/bobo789456123/article/details/117252327

版权

本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。

本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。

实例效果：

Vue基础实例一(数据绑定、双向绑定、属性绑定、事件绑定).gif

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello world</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .style1 {
            line-height: 150%
        }
    </style>
</head>

<body>
    <div id="app" class="style1">
        <b>普通数据绑定：</b>{{init}}
        <br>

        <b>v-html数据绑定：</b> <span v-html="init"></span>
        <br><br>

        <b>show方法：</b><button @click="show">点击按钮</button>

        <br><br>
        <b>todolist列表增删:</b>
        <br>
        <ul v-for="(item,index) in lists">
            <li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer"
                    @click="function(){deleteItem(index)}">X
                </font>
            </li>
        </ul>
        <input type="text" v-model="keyword">
        <button @click="addItem">添加</button>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            keyword: "",
            init: "<span>hello world</span>",
            lists: [
                { id: 1, name: "这是第一个" },
                { id: 2, name: "这是第二个" },
                { id: 3, name: "这是第三个" },
                { id: 4, name: "这是第四个" },
                { id: 5, name: "这是第五个" }
            ]
        },
        methods: {
            show: function (event) {
                alert(1)
            },
            addItem: function (event) {
                this.lists.push({ id: this.lists.length + 1, name: this.keyword });
                this.keyword = "";
            },
            deleteItem: function (index) {
                this.lists.splice(index, 1);
            }
        }
    })

    window.setTimeout(() => {
        app.$data.init = "这是外部3秒后重置的init";
    }, 3000)
</script>

IT飞牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础实例一（数据绑定、双向绑定、属性绑定、事件绑定）

本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。实例效果：Vue基...
复制链接

扫一扫