Vue 学习笔记2-本地应用- vue 指令：内容/事件的绑定 / 案例：计数器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50119334/article/details/109320756

本地应用

通过Vue实现常见的网页效果

vue 指令-内容/事件的绑定

vue 指令指的是：以 v- 开头的一组特殊语法

v-text : 设置标签的文本值
默认写法会替换全部内容，使用差值表达式{{ }} 可以替换指定内容
内部支持写表达式

<body>
    <div id="app">
        <h2 v-text="message+'!'">好的</h2> <!--结果为：yangdandan！-->
        <h2>{{message+'!'}}好的</h2> <!--结果为：yangdandan好的！-->
        <h2 v-text="info"></h2>  <!--结果为：元气满满-->
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'yangdandan',
                info: '元气满满'
            }
        })
    </script>

v-html
设置标签的 innerHTML
内容中有 html 结构会被解析为标签
v-text 指令无论内容是什么，只会解析成文本
解析文本用 v-text ,需要解析 html 结构用 v-html

    <div id="app">
        <p v-html="content1"></p> <!--结果为：努力啊-->
        <p v-text="content1"></p> <!--结果为：努力啊-->
        <p v-html="content2"></p> <!--结果为：一个链接（可点击）-->
        <p v-text="content2"></p> <!--结果为：网址（文本形式）-->
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content1: '努力啊',
                content2: "<a href='https://www.baidu.com/'>百度一下</a>"
            }
        })
    </script>

v-on
为元素绑定事件
事件名不需要写 on
指令名可以简写为@
绑定的方法定义在methods属性中
方法内部通过 this 关键字可以访问在 data 中的数据

    <div id="app">
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="双击事件" v-on:dblclick="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: '鱼香肉丝'
            },
            methods: {
                doIt: function() {
                    alert('学IT');
                },
                // 更改food值
                changeFood: function() {
                    this.food += '很好吃';
                    //点击后会增加'很好吃'三个字，点几次增加几个
                }
            },
        })
    </script>

案例：计数器

实现一个计数器，点击一次加号按钮数字增加一，点击一次减号按钮数字减一，数字超出规定范围时出现提示消息。
思路：
1.data 中定义数据：比如num
2.methods 中添加两个方法，比如 add (递增），sub（递减）
3.使用 v-text 将 num 设置给 span 标签
4.使用 v-on 将 add,sub 分别绑定给 + - 按钮

<body>
    <div id="app">
        <div class="input-num">
            <button id="button-left" @click="sub">-</button>
            <span>{{num}}</span>
            <button id="button-right" @click="add">+</button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function() {
                    this.num >= 10 ? alert('超出') : this.num++;
                },
                sub: function() {
                    this.num <= 0 ? alert('不能减少啦') : this.num--;
                }
            }
        })
    </script>
</body>