1 创建一个Vue实例

最新推荐文章于 2022-05-04 17:31:51 发布

void1024

最新推荐文章于 2022-05-04 17:31:51 发布

阅读量234

点赞数

分类专栏： Vue记录

本文链接：https://blog.youkuaiyun.com/diOSyu/article/details/107450292

版权

Vue记录专栏收录该内容

6 篇文章

订阅专栏

本文通过实例展示了Vue.js的基本语法和关键功能，包括数据绑定、条件渲染、列表渲染、事件处理、双向数据绑定及组件使用。通过一个简单的网页应用，读者可以深入了解Vue.js如何操作DOM元素，响应用户事件，以及实现动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<div id="app-2">
    <span v-bind:title="message2"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
    <button onclick="btn3_click()">看见</button>
</div>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList"
                   v-bind:todo="item"
                   v-bind:key="item.id">

        </todo-item>
    </ol>
</div>
<script>
    var app = new Vue(
        {
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        }
    );
    var app2 = new Vue(
        {
            el: '#app-2',
            data: {
                message2: '页面加载于' + new Date().toLocaleString()
            }
        }
    );
    var app3 = new Vue(
        {
            el: '#app-3',
            data: {
                seen: false
            }
        }
    );

    function btn3_click() {
        app3.seen = !app3.seen;
    }

    var app4 = new Vue(
        {
            el: '#app-4',
            data: {
                todos: [
                    {text: '学习 JavaScript'},
                    {text: '学习 Vue'},
                    {text: '整个牛项目'}
                ]
            }
        }
    );
    var app5 = new Vue(
        {
            el: '#app-5',
            data: {
                message: 'Hello'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        }
    );
    var app6 = new Vue(
        {
            el: '#app-6',
            data: {
                message: 'Hello Vue'
            }
        }
    );

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });
    var app7 = new Vue(
        {
            el: '#app-7',
            data: {
                groceryList: [
                    {id: 0, text: 'Apple'},
                    {id: 1, text: 'Orange'},
                    {id: 2, text: 'Banana'}
                ]
            }
        }
    );
</script>
</body>
</html>