• Vue极简教程,相关指令详解


    Vue | 渐进式 | JS框架 | 极简教程

    在这里插入图片描述

    一、v-text

    在HTML标签里填充动态内容,可以使用v-text

    📌注意

    1. 使用v-text指令无法解析HTML标签
    2. 如果标签内有内容,会被覆盖不显示
    3. 如果你想更新部分,可以使用插值语法
    <body>
        <div id="app">
            <p v-text="message">你好p>
            <p v-text="baidu">p>
            <p>你好 {{message}}p>
        div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js',
                    baidu: '百度一下'
                }
            })
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    二、v-html

    在HTML标签里填充动态内容,可以使用v-html

    📌注意

    1. v-html指令会对html标签进行解析
    2. 容易导致 XSS 攻击,能不用尽量不用
    3. 如果标签内有内容,会被覆盖不显示
    4. 如果你想更新部分,可以使用插值语法
    <body>
        <div id="app">
            <p v-text="baidu">我在呢p>
            <p v-html="baidu">我在呢p>
        div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    baidu: '百度一下'
                }
            })
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    三、v-show

    根据表达式的真假值,切换元素的 display ,从而达到控制元素显示或隐藏的效果

    <body>
        <div id="app">
            <p v-show="flag" @click="flag = !flag">你一点我就会不见,呜呜呜呜,别点我p>
        div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    flag: true
                }
            })
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    四、v-if,v-else,v-else-if

    根据表达式的值的真假来有条件地渲染元素。

    📌注意

    1. v-else生效的前提是使用了v-if
    2. v-else-if生效的前提是使用了v-else
    <body>
        <div id="app">
            <button @click="age--">-button>
            {{age}}
            <button @click="age++">+button>
            <p v-if="age === 14">我14岁了p>
            <p v-else-if="age === 18">我18了哟p>
            <p v-else>我不是14也不是18p>
        div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    age: 14
                }
            })
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    五、v-for

    遍历元素可以使用v-for指令

    📌注意

    1. 当和 v-if 一起使用时,v-for 的优先级比 v-if 更高
    <body>
        <div id="app">
            <span style="background-color: bisque; margin-left: 12px;" v-for="item in message">{{item}}span>
            <ul>
                <li v-for="(item,index) in books" :key="item.id">{{item.id}} - {{index}} + {{item.name}}li>
            ul>
        div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    message: "Hello Vue.js",
                    books: [
                        { name: 'Java核心卷1', id: 1 },
                        { name: "Java核心卷2", id: 2 }
                    ]
                }
            })
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    六、v-on

    绑定事件监听器,语法糖@

    
    <button v-on:click="doThis">button>
    
    
    <button v-on:click="alert('xxx')">button>
    
    
    <button @click="doThis">button>
    
    
    <button @click.stop="doThis">button>
    
    
    <button @click.prevent="doThis">button>
    
    
    <form @submit.prevent>form>
    
    
    <button @click.stop.prevent="doThis">button>
    
    
    <input @keyup.enter="onEnter">
    
    
    <input @keyup.13="onEnter">
    
    
    <button v-on:click.once="doThis">button>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    七、v-bind

    动态地绑定一个或多个 attribute,或一个组件 prop 到表达式,语法糖:

    
    <img v-bind:src="imageSrc">
    
    
    <img :src="imageSrc">
    
    
    <img :src="'/path/to/images/' + fileName">
    
    
    <div :class="{ red: isRed }">div>
    <div :class="[classA, classB]">div>
    <div :class="[classA, { classB: isB, classC: isC }]">div>
    
    
    <div :style="{ fontSize: size + 'px' }">div>
    <div :style="[styleObjectA, styleObjectB]">div>
    
    
    <div v-bind="{ id: someProp, 'other-attr': otherProp }">div>
    
    
    <div v-bind:text-content.prop="text">div>
    
    
    <my-component :prop="someThing">my-component>
    
    
    <child-component v-bind="$props">child-component>
    
    
    <svg><a :xlink:special="foo">a>svg>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    八、v-once

    只渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过,可以用于优化更新性能。

    
    <span v-once>This will never change: {{msg}}span>
    
    <div v-once>
      <h1>commenth1>
      <p>{{msg}}p>
    div>
    
    <my-component v-once :comment="msg">my-component>
    
    <ul>
      <li v-for="i in list" v-once>{{i}}li>
    ul>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    九、v-cloak

    由于网络原因或项目过大,加载很慢,导致了插值语法表达式{{}}还未完成解析,直接暴漏给用户,这体验很不好,这是只给需要的元素添加v-cloak标签,并结合css选择添加了该标签的元素隐藏,但加载完成后,Vue会自动清除v-cloak标签,元素就又显示出来了,也就解决了这个问题

    css

    [v-cloak] {
      display: none;
    }
    
    • 1
    • 2
    • 3

    html

    <div v-cloak>
      {{ message }}
    div>
    
    • 1
    • 2
    • 3

    十、v-pre

    跳过这个元素和它的子元素的编译过程,跳过大量没有指令的节点会加快编译。

    <span v-pre>{{ this will not be compiled }}span>
    
    • 1

    十一、v-model

    用于