vue: 初始vue

最新推荐文章于 2024-10-21 22:15:01 发布

原创最新推荐文章于 2024-10-21 22:15:01 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js创建一个简单的应用程序。通过一个示例，展示了如何利用Vue的响应式系统和虚拟DOM更新机制来实现数据绑定和事件处理。文章详细解释了如何在HTML中插入Vue实例，设置数据属性，并定义事件处理器。

小项目直接引入cdn,大项目使用vue-cli

基础语法1: 双大括号

基础语法2: 指令

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>起步vue</title>
</head>
<body>
    <div class="app">
        <input type="text" v-on:input = "changeName">
        <!-- v-on绑定事件，触发事件的时候执行函数 -->
        <h1>{{ name }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            // 控制字段
            el: '.app',
            // 定义变量
            data: {
                name: 'aimee'
            },
            // 定义函数
            methods: {
                changeName: function(event) {
                    this.name = event.target.value;
                }
            }
        })
    </script>
</body>
</html>