Vue快速入门（2）

最新推荐文章于 2024-05-04 23:30:03 发布

HopeStation

最新推荐文章于 2024-05-04 23:30:03 发布

阅读量161

点赞数

分类专栏： Vue笔记文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_33747081/article/details/106443690

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue指令

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>

运行结果
在这里插入图片描述

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>

运行结果
在这里插入图片描述

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>

在这里插入图片描述
点击蛋炒饭后，会变为“蛋炒饭，加个蛋”

设计一个计数器

利用上面学习的知识，设计一个计数器
程序例子：

<!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>

运行效果：
在这里插入图片描述