vue双击事件_VUE基础学习本地应用

本地应用

本地应用主要是通过一些指令来操作，比如：v-text、v-html、v-on、v-show、v-if、v-bind、v-for、v-on补充、v-model等等

1、v-text指令

• 作用：设置标签的内容(textContent)；

• 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容；

• 内部支持表达式；

样例：

<div id="app-text">
<h2 v-text="message+'你好！'">h2>
<h2 v-text="info+'你好！'">h2>
<h2>{{message + '你好！'}}h2>
div>

<script>var test = new Vue({el: "#app-text",data: {message: "hello Vue!",info: "vue 学习中！"
        }
    })script>

效果如下：

image-20200917233611908

2、v-html指令

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

样例：

<div id="app-html">
<p v-html="content">p>
<p v-text="content">p>
div>

<script>var test = new Vue({el: "#app-html",data: {content:"百度首页"
        }
    })script>

效果如下：

image-20200917225826954

3、v-on指令(v-on：可以简写为@符号)

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

样例：

<div id="app-on">
<p><input type="button" value="v-on单击指令" v-on:click="doit">p>
<p><input type="button" value="v-on单击简写" @click="doit">p>
<p><input type="button" value="双击事件" @dblclick="doit">p>
<h2 @click="changeFood">{{food}}h2>
div>

<script>var test = new Vue({el: "#app-on",data: {food: "虎皮青椒,单击一下试一试。"
        },methods: {doit: function () {
                alert("Do it OK?")
            },changeFood: function () {this.food += "神奇吗？可以一直单击一直增加哦！"
            }
        }
    })script>

效果如下：

image-20200917232507933

4、计数器

• 创建Vue示例时：el(挂载点)，data(数据)，methods(方法)；

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

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

• v-text指令的作用是：设置元素的文本值，简写{{}}；

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

• 步骤如下：



1.data中定义数据，比如：num；

2.methods中添加两个方法，比如：add(递增)，sub(递减)；

3.使用v-text将num设置给span标签；

4.使用v-on将add,sub分别绑定给+，-按钮；

5.累加的逻辑：小于10累加，否则提示错误信息；

6.递减的逻辑：大于0递减，否则提示错误信息；

”

样例：

<div id="app-calculator">

<div class="input-num">
<button @click="sub">-button>
<span>{{num}}span>
<button @click="add">+button>
div>
div>

<script>var test = new Vue({el: "#app-calculator",data: {num: 1
        },methods: {add: function () {// console.log('add');if (this.num<10){this.num++;
                }else{
                    alert("别点啦，已经最大拉...")
                }
            },sub: function () {// console.log('sub');if (this.num>0){this.num--;
                }else{
                    alert("别点啦，已经最小拉...")
                }
            }
        }
    })script>

效果如下：

image-20200919211304375

image-20200919211341089