🌵Vue本地应用(内容绑定,事件绑定)

171 阅读1分钟

1.v-text指令

  • v-text这个指令的作用:设置标签的内容(textContent)
  • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
  • 内部支持写表达式

image.png

2.v-html指令

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

image.png

3.v-on指令

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

image.png

4.计数器案例

// 由于这里主要学习Vue的知识,CSS代码就不放进来了
<body>
    <div id="app">
        <button class="left" @click="sub">-</button>
        <span>{{ num }}</span>
        <button class="right" @click="add">+</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("不能再加啦!")
                    }


                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("不能再减啦!")
                    }

                }
            }
        })
    </script>
</body>

计数器.gif 总结:

  • 创建Vue实例时:el设置的是挂载点,data设置的是数据,method设置的是方法

  • v-on指令的作用是绑定事件,简写为@

  • 方法的内部通过this关键字获取data中的数据

  • v-html指令的作用是:设置元素的innerHTML