vue练习demo1-(v-bind)

最新推荐文章于 2024-07-03 23:36:40 发布

原创最新推荐文章于 2024-07-03 23:36:40 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

27 篇文章

订阅专栏

这个博客介绍了一个简单的Vue.js应用实例，展示了如何在页面中使用Vue.js进行数据绑定和事件处理。通过一个`<div id=app>`元素，显示了`message`变量的内容，并在鼠标悬停时显示相同的消息。这是一个基础的Vue实例设置，帮助读者理解Vue的基本用法。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>-->
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <!-- view -->
    <div id="app">
        {{ message }}
        <br/>
        <span v-bind:title="message">
            鼠标悬停几秒钟
        </span>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            <!-- model -->
            data: {
                message: 'hello,vue!'
            }
        })
    </script>
</body>
</html>