vue 的指令(v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre)的基本使用

叕叕666

已于 2022-03-03 18:27:23 修改

阅读量216

点赞数

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

于 2022-02-08 13:42:07 首次发布

本文链接：https://blog.csdn.net/m0_50163856/article/details/122822231

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

v-bind / v-model

<body>
<div id="app">
    <!-- v-bind(单向绑定) -->
    <input type="text" v-bind:value="text1">
    <!-- v-bind 简写 -->
    <input type="text" :value="text1">

    <!-- v-model(双向绑定) -->
    <input type="text" v-model:value="text2">
    <!-- v-model 简写 -->
    <input type="text" v-model="text2">
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            text1: "请输入内容",
            text2: "请输入内容"
        }
    })
</script>
</body>

v-on

<body>
<div id="app">
    <!-- v-on(事件处理) -->
    <button v-on:click="show">点击</button>
    <!-- v-on 简写 -->
    <button @click="show">点击</button>
    <!-- $event-事件修饰符 -->
    <button @click="showData($event,'事件修饰符测试')">点击</button>
    <!-- 键盘事件-@keydown.[键名] -->
    <input type="text" placeholder="键盘事件测试" @keydown.en="showText($event)" />
    <!-- 注意：
        1.Vue中常用的按键别名：
			回车 => enter
			删除 => delete (捕获“删除”和“退格”键)
			退出 => esc
			空格 => space
			换行 => tab (特殊，必须配合keydown去使用)
			上 => up
			下 => down
			左 => left
			右 => right
		2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
        3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
			1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
			2).配合keydown使用：正常触发事件。
    -->
</div>

<script>
    //自定义按键别名：Vue.config.keyCodes.自定义键名 = 键码
    Vue.config.keyCodes.en = 13

    new Vue({
        el: "#app",
        data: {
        },
        methods: {
            show(){
                alert("提示信息")
            },
            showData(event, data){
                alert(data)
            },
            showText(event){
                alert(event.target.value)
            }
        }
    })
</script>
</body>

Vue中的事件修饰符：
*prevent：阻止默认事件（常用）；
*stop：阻止事件冒泡（常用）；
*once：事件只触发一次（常用）；
*capture：使用事件的捕获模式；
*self：只有event.target是当前操作的元素时才触发事件；
*passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

v-if / v-show

<body>
<div id="app">
    <p>count: {{count}}</p>
    <!-- v-show-->
    <p v-show="count % 2 === 0">v-show测试</p>
    <!-- v-if-->
    <p v-if="count % 3 === 0">v-if测试</p>
    <p v-else-if="count % 3 === 1">v-else-if测试</p>
    <p v-else>v-else测试</p>

    <button @click="count++">点击 +1</button>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0
        }
    })
</script>
</body>

v-for

<body>
<div id="app">
    <ul>
        <!-- 遍历数组 -->
        <li v-for="(obj, index) in arrObj" :key="obj.id">
            {{index}} --- {{obj.name}} --- {{obj.age}}
        </li>
    </ul>
    <hr/>
    <ul>
        <!-- 遍历对象 -->
        <li v-for="(value, key, index) in arrObj[0]" :key="key">
            {{index}} --- {{key}} --- {{value}}
        </li>
    </ul>
    <hr/>
    <ul>
        <!-- 遍历数值 -->
        <li v-for="(number, index) in 6" :key="index">
            {{index}} --- {{number}}
        </li>
    </ul>
    <hr/>
    <ul>
        <!-- 遍历字符串 -->
        <li v-for="(character, index) in arrObj[0].name" :key="index">
            {{index}} --- {{character}}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            arrObj: [
                {id: "1", name: "abcd", age: 20},
                {id: "2", name: "cdef", age: 10},
                {id: "3", name: "abef", age: 15},
            ]
        }
    })
</script>
</body>

v-text / v-html

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

<script>
    new Vue({
        el: "#app",
        data: {
            text: "<h1>测试数据</h1>"
        }
    })
</script>
</body>

v-cloak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Vue实例创建完毕后，会删掉v-cloak属性 -->
    <p v-cloak>{{text}}</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            text: "测试数据"
        }
    })
</script>
</body>
</html>

v-once

<body>
<div id="app">
    <!-- v-once所在节点在初次动态渲染后，就视为静态内容了 -->
    <p v-once>count初始值: {{count}}</p>
    <p>count当前值: {{count}}</p>
    <button @click="count++">点击 +1</button>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0
        }
    })
</script>
</body>

v-pre

<body>
<div id="app">
    <!-- v-pre 跳过其所在节点的编译过程 -->
    <p v-pre>count初始值: {{count}}</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0
        }
    })
</script>
</body

叕叕666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 的指令(v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre)的基本使用

v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre
复制链接

扫一扫

专栏目录