VUE基础

最新推荐文章于 2024-11-06 09:59:41 发布

Java小生不才

最新推荐文章于 2024-11-06 09:59:41 发布

阅读量82

点赞数

分类专栏： html 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_41596346/article/details/121050502

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定测试</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>{{name}},已有{{num}}人为其点赞</h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vue = new Vue({
            el: "#app",
            data:{
                name: "java小生不才",
                num: 1
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
双向绑定：视图变化，模型变化，反之亦然

2.点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <h1>{{name}},已有{{num}}人点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.vue声明式渲染
        let vue = new Vue({
            //el绑定渲染元素模板
            el:"#app",
            //data封装数据
            data:{
                name:"小生不才",
                num: 100
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

3.取消点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue测试</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <!-- <button v-on:click="num--">取消点赞</button> -->
        <button v-on:click="cancle">取消点赞</button> 
        <h1>{{name}},已有{{num}}人点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.vue声明式渲染
        let vue = new Vue({
            //el绑定渲染元素模板
            el:"#app",
            //data封装数据
            data:{
                name:"小生不才",
                num: 100
            },
            //methods封装方法
            methods:{
                cancle(){
                    this.num --;
                }
            }
        });
    </script>
</body>
</html>