谷粒商城day23-Vue基本语法与插件安装

我才是真的封不觉

于 2020-08-28 17:09:19 发布

阅读量152

点赞数

分类专栏：谷粒商城文章标签： Vue基本语法与插件安装

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/108283307

版权

谷粒商城专栏收录该内容

150 篇文章

订阅专栏

本文介绍如何使用Vue.js实现数据的双向绑定和事件处理，通过实例展示了基本语法的应用，包括v-model指令用于输入框的数据绑定和@click事件监听器用于按钮点击事件的处理。

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

1.基本语法，实现一个双向绑定与事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body >
        <div id = "app">
            <h1>我是{{name}} ,hello world！ {{num}}人为我点赞</h1>
            <input type = 'text' @click='func' v-model='num'>
            <button @click="num++" >点赞</button>
        </div>
       
        <script src="../node_modules/vue/dist/vue.js"></script>

        <script>
            let ap = new Vue({
                el:"#app",//绑定元素
                data:{//封装数据
                    name:'李白',
                    num:1
                },
                methods:{//封装方法
                    func(){
                        num++;
                    }
                }
            })
        </script>
</body>
</html>