Vue：基本命令的使用（代码 + 效果）

文章目录

Hello Vue!
- el: 挂载点
- data
- methods
vue命令
- v-text
- v-html
- v-on @
- v-show
- v-if
- v-bind
- v-for
- v-model

Hello Vue!

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
  </body>
</html>

在这里插入图片描述

el: 挂载点

实例范围：el命中元素及其内部的后代元素
可以使用其他选择器，但是建议使用id选择器
只能支持双标签，不能使用html 和 body

data

Vue中用到的数据，定义在data中。
data中可以写复制数据类型，遵循js语法即可。

methods

放方法。

vue命令

v-text

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
  </head>
  <body>
    <div id="app">
        <h2 v-text="message + '123'"></h2>
        <h3 v-text="info+'!'"></h3>
        <h4>
            {{ message + '!'}}
        </h4>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!",
                info:"这是一个vue"
            }
        })
    </script>
  </body>
</html>

在这里插入图片描述

v-html

放html文本而已。
和js一样。

v-on @

v-on可以用@代替
主要学习与jquery不同的，不是用dom操作来改变，而是直接操纵数据。
数据改变，页面同步跟着改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button"  value="点击" @click="alert">
        <input type="button" value="双击" @dblclick="alert">
        <input type="button" value="移入" @mouseenter="alert">
        <input type="button" value="点击添加" @click="addone">
        <h3>
            {{ num }}
        </h3>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:"+1"
        },
        methods: {
            alert:function(){
                alert("你好")
            },
            addone:function(){
                this.num+="+1"
            }
        }
        
    })
</script>
</html>

在这里插入图片描述

监听回车:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="alt">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            alt:function(){
                alert("释放按下触发的弹出")
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-show

是否显示。
true,false两个值，一般用变量来写，方便我们控制。
也可以用表达式><=等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态"  @click="change">
        <img src="../2023.12.15/6D5ED8A27DD04CD72FAC750E2295B6B1.jpg" alt="" v-show="flag">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change:function(){
                this.flag ^= true;
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-if

与v-show相似，但是v-show是改变的样式，而v-if是直接从dom中删除和添加。
切换频繁的用v-show，不频繁发用v-if。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态"  @click="change">
        <img src="../2023.12.15/6D5ED8A27DD04CD72FAC750E2295B6B1.jpg" alt="" v-if="flag">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change:function(){
                this.flag ^= true;
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-bind

v-bind:设置元素的属性。
可简写成:直接。
可用三元表达式，不过推荐用对象的写法。
例子：
切换img的类名，使其加上边框，和取消边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width:100px;
            height: 120px;
        }
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="点击切换class" @click="change">
        <img :src="imgSrc" alt="" v-bind:class="isActive?'active':''">
        <img :src="imgSrc" alt="" :class="{active:isActive}">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:false,
            imgSrc:"OIP-C.jpg"
        },
        methods:{
            change:function(){
                this.isActive ^= true
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-for

遍历数组，循环填充。
(item, idx) in arr
也可以只写item

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, idx) in arr">
                {{ idx }}样例{{ item }}
            </li>
            <li v-for="item in arr2">
                {{ item.name }}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","河北", "天津"],
            arr2:[
                {"name": "小红"},
                {"name": "小明"}
            ]
        }
    })
</script>
</html>

在这里插入图片描述

v-model

关联输入框内的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg" @keyup.enter="alt">
        <h3>{{ msg }}</h3>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            "msg":"默认值"
        },
        methods:{
            alt:function() {
                alert(this.msg);
            }
        }
    })
</script>
</html>