Vue基本指令学习及实现计数器

文章目录

    • 前言
    • 1、v-text指令
    • 2、v-html指令
    • 3、v-on指令
    • 4、实现计数器


前言


1、v-text指令


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vuetitle>
head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<body>
    <div id="app">
       <h2 v-text="str">啦啦啦啦h2>
       <h2 v-text="str+'嘿嘿嘿!'">啦啦啦啦666h2>

        <h2>{
    {str}}h2>
    div>

    <script>
        var test = new Vue({
      
            el:'#app',
            data:{
      
                str:"皮皮虾,喝啤酒"
            }
        })
    script>
body>
html>

Vue基本指令学习及实现计数器_第1张图片
Vue基本指令学习及实现计数器_第2张图片
Vue基本指令学习及实现计数器_第3张图片

总结

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

2、v-html指令


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vuetitle>
head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<body>
    <div id="app">

        <p v-html="message">p>
        <p v-text="message">p>
    div>

    <script>
        var test = new Vue({
      
            el:'#app',
            data:{
      
               message:"百度"
            }
        })
    script>
body>
html>

Vue基本指令学习及实现计数器_第4张图片
点击百度后即可跳转到百度首页
Vue基本指令学习及实现计数器_第5张图片

总结

  • v-html指令的作用是:设置元素的innerHTML
  • 内容中有html结构会被解析成标签
  • v-text指令只会解析成文本

3、v-on指令


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vuetitle>
head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="@指令" @click="doIt">
    div>

    <script>
        var test = new Vue({
      
            el:'#app',
            methods:{
      
                doIt:function () {
      
                    alert("皮皮虾,我们走!")
                }
            }
        })
    script>
body>
html>

Vue基本指令学习及实现计数器_第6张图片
在这里插入图片描述


4、实现计数器

实现步骤

  • 创建Vue示例时:el(挂载点),data数据,methods(方法)
  • v-on指令的作用是绑定事件,简写为@
  • 方法中通过this关键字获取data中的数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vuetitle>
head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<body>
    <div id="app">
        
        <div class="input-num">
            <button @click="delNum">
                -
            button>
            <span>{
    {num}}span>
            <button @click="addNum">
                +
            button>
        div>
    div>

    <script>
        var test = new Vue({
      
            el:'#app',
            data:{
      
               num:0
            },
            methods:{
      
                delNum:function () {
      
                    if (this.num > 0){
      
                        this.num--;
                    }else {
      
                        alert("别点了,最低为0")
                    }
                },
                addNum:function () {
      

                    if (this.num < 10){
      
                        this.num++;
                    }else {
      
                        alert("别点了,最高为10")
                    }
                }
            }
        })
    script>
body>
html>

Vue基本指令学习及实现计数器_第7张图片

实验结果
Vue基本指令学习及实现计数器_第8张图片

Vue基本指令学习及实现计数器_第9张图片


博主会持续更新,有兴趣的小伙伴可以点赞、关注和收藏下哦,你们的支持就是我创作最大的动力!

Java学习从入门到大神学习目录索引

博主开源Python爬虫教程目录索引(宝藏教程,你值得拥有!)

在这里插入图片描述

你可能感兴趣的:(Vue,vue,html,javascript,指令)