Vue指令（1）：插值({{}}、v-text和v-html)、v-model、v-on

最新推荐文章于 2024-04-18 20:42:10 发布

?abc!

最新推荐文章于 2024-04-18 20:42:10 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/yyuggjggg/article/details/120884248

版权

Vue 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

指令

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

插值表达式

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

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

花括号({})

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取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，来代替{{}}

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

即只是会将该内容输入到当前位置
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>

显示结果：

v-model(双向绑定)

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

v-model：双向绑定，视图（View）和模型（Model）之间会互相影响。

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

input
select
textarea
checkbox
radio
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>

页面显示：

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>

展示结果：

事件修饰符

.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的话，会直接跳转到百度的页面，设置过后就不会出现这个问题

?abc!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue指令（1）：插值({{}}、v-text和v-html)、v-model、v-on

指令指令 (Directives) ：是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。插值表达式插值：使用在有需要显示vue实例数据的地方可以在插值表达式中调用实例的数据属性和函数。花括号({})格式：{{表达式}}说明：该表达式支持JS语法，可以调用js内置函数（必须有返回值）达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;可以直接获取Vue实例中定义的数据或函数例子：<!DOCTYP
复制链接

扫一扫