指令

指令 (Directives) :是带有 v- 前缀的特殊属性。例如在入门案例中的v-model,代表双向绑定。

插值表达式

插值:使用在有需要显示vue实例数据的地方

  • 可以在插值表达式中调用实例的数据属性和函数。

花括号({})

格式:

{{表达式}}

说明:

  1. 该表达式支持JS语法,可以调用js内置函数(必须有返回值)
  2. 达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1;
  3. 可以直接获取Vue实例中定义的数据或函数

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <h2>{{name}}是我!</h2><!--使用差值显示数据-->

    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板),无法在模板外面使用
            name:"名字"
        }
    });
</script>
</body>
</html>

插值闪烁

在最新的vue中不会出现这种问题

插值闪烁:在数据未加载完成时,页面会显示出原始的 {{}} ,加载完毕后才显示正确数据,称为插值闪烁。

v-text和v-html

可以使用v-text和v-html,来代替{{}}

  1. v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出

    即只是会将该内容输入到当前位置

  2. v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染

    如果内容里面有html标签,可以通过这个指令将该html标签里面的内容进行解析,出现渲染的效果

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        v-text:<span v-text="name"></span><br>
        v-html:<span v-html="html"></span><br>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板),无法在模板外面使用
            name:"<h1>名字</h1>",
            html:"<h1>v-html</h1>"
        }
    });
</script>
</body>
</html>

显示结果:

image-20211020202853299

v-model(双向绑定)

v-text和v-html:单向绑定,数据只影响了视图,发过来并不会改变模型

v-model:双向绑定,视图(View)和模型(Model)之间会互相影响。

目前v-model的可使用的视图的元素类型有:

  1. input
  2. select
  3. textarea
  4. checkbox
  5. radio
  6. components(Vue中的自定义组件)

除了6,其他都是表单的输入项

  • 多个 checkbox 对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串,多选对应也是数组

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <input type="checkbox" value="语文" v-model="course">语文<br>
        <input type="checkbox" value="数学" v-model="course">数学<br>
        <input type="checkbox" value="英语" v-model="course">英语<br>
        <h2>
            你选择了:{{course.join(",")}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板),无法在模板外面使用
            course:[]
        }
    });
</script>
</body>
</html>

页面显示:

image-20211020203642738

image-20211020203657176

v-on(绑定事件)

基本用法

v-on指令:用于给页面元素绑定事件

在没有使用vue之前;页面标签可以通过设置onXXX响应事件;

在vue中可以通过v-on指令响应事件。

语法:

v-on:事件名="js片段或函数名"
或
@事件名="js片段或函数名"
  • 例如 v-on:click='add'可以简写为@click='add'

  • 示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <script src="node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="va">
            <!--直接写js片段-->
            <button @click="num++">增加</button>
            <!--使用函数名,该函数必须要在vue实例中定义-->
            <button @click="decrement">减少</button>
            <h2>
                num = {{num}}
            </h2>
        </div>
    <script>
        var va = new Vue({//创建一个vue实例
            el:"#va",
            data:{
                num:1
            },
            methods:{
                decrement(){
                    this.num--;
                }
            }
        });
    </script>
    </body>
    </html>
    
  • 展示结果:

    image-20211020204731153

事件修饰符

  • .stop:阻止事件冒泡

  • .prevent :阻止默认事件发生

  • .capture:使用事件捕获模式

  • .self:只有元素自身触发事件才执行。(冒泡或捕获的都不执行)

  • .once:只执行一次

  • 示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <script src="node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="va">
            <!--直接写js片段-->
            <button @click="num++">增加</button>
            <!--使用函数名,该函数必须要在vue实例中定义-->
            <button @click="decrement">减少</button>
            <h2>
                num = {{num}}
            </h2>
    
            事件冒泡测试:<br>
            <div style="background-color: red;width: 100px;height: 100px"
                 @click="print('你点击了div')">
                <button @click.stop="print('点击了div里面的button')">div里面的button</button>
            </div>
            <br>阻止默认事件:<br>
            <a href="http://www.baidu.cn" @click.prevent="print('点击超链接')">百度</a>
        </div>
    <script>
        var va = new Vue({//创建一个vue实例
            el:"#va",
            data:{
                num:1
            },
            methods:{
                decrement(){
                    this.num--;
                },
                print(msg){
                    console.log(msg)
                }
            }
        });
    </script>
    </body>
    </html>
    
  • 结果显示:

    1. 如果button没有设置.stop,那么包裹该button的div也是会执行的,这就是事件冒泡,设置过后就不会出现这个问题
    2. 如果a标签,里面的@click没有.prevent的话,会直接跳转到百度的页面,设置过后就不会出现这个问题

    image-20211020205813290

Logo

前往低代码交流专区

更多推荐