欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue快速入门(2)

程序员文章站 2022-06-04 23:36:31
...

v-text

  • 作用:设置标签的文本值
  • 程序例子:
<div id="app" >
        <h3>{{message}} </h3> 
        <!-- 双引号拼接字符串-->
        <h3>{{message+"用双引号"}} </h3> 
        <!-- 单引号拼接字符串-->
        <h3>{{message+'用单引号'}} </h3> 
        <h2 v-text="message"></h2>
         <!-- v-text 指令只能用单引号拼接-->
        <h2 v-text="message+'vtext'"></h2>
        <!--标签内的数据
            插值表达式显示
            vtext指令不显示
        -->
        <h2 >{{aaa}} bbb</h2>
        <h2 v-text="aaa">bbb</h2>
    </div>

   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"this is a messages:",
                aaa:"this is aaa"
            }
        })
    </script>

运行结果
Vue快速入门(2)

v-html

  • 作用:设置元素的innerHTML,含有html结构会被解析为标签,而v-text只会解析为文本
  • 程序例子:

    <div id="app" >
        <!--对比v-text和v-html-->
      <p v-text="content"></p>
      <p v-html="content"></p>
    </div>

   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
       var app = new Vue({
           el:"#app",
           data:{
               content:"<a href='http://www.baidu.com'>点击百度</a>"
           }
       })
    </script>

运行结果
Vue快速入门(2)

v-on

  • 作用:为元素绑定事件
  • v-on可以简写为@
  • 绑定的方法定义在methods中

程序例子:


    <div id="app">
        <!--v-on 添加绑定事件-->
        <input type="button" value="click单击事件绑定" v-on:click="doIt">
        <input type="button" value="mouseenter鼠标引入事件绑定" v-on:mouseenter="doIt">
        <input type="button" value="dbclick双击事件绑定" v-on:dblclick="doIt">
        <!--v-on 可以替换成@ ,一样可以添加绑定事件(效果相同)-->
        <input type="button" value="事件绑定" @dblclick="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");
                },
                changeFood: function () {
                    this.food+=",加个蛋"
                    console.log(this.food);
                }
            }
        })
    </script>

Vue快速入门(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>
    <style>
        div{
            text-align: center;
        }
        span{
            font-size:30px;
            display: inline-block;
            vertical-align: middle;
            color: brown;
            line-height: 80px;
            width: 80px;
            height: 80px;
          
        }
        button{
            background-color:rgb(110, 121, 141);/*按钮背景颜色*/
			border-radius: 8px;/*让按钮变得圆滑一点*/
            font-size:30px;
            text-align: center;
            vertical-align: middle;
            color: brown;
            width: 100px;
            height: 80px;
            cursor: pointer;
        }
    </style>
</head>

<body>


    <div id="app">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                num:5,
                addEnther:false
            },
            methods:{
                sub:function(){
                    if(this.num<=0){
                        alert("别点了,到底了");
                        this.num=0;
                    }else{
                        this.num--;
                    }
                },
                add:function(){
                    if(this.num>=10){
                        alert("别点了,到顶了");
                        this.num=10;
                    }else{
                        this.num++;
                    }
                }
            }
        })
    </script>


</body>

</html>

运行效果:
Vue快速入门(2)