第2章数据绑定

最新推荐文章于 2023-02-20 12:02:58 发布

huangq_qiao

最新推荐文章于 2023-02-20 12:02:58 发布

阅读量107

点赞数

分类专栏： Vuejs权威指南学习记录

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/110308027

版权

Vuejs权威指南学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

数据绑定是指将数据和视图关联，当数据发生变化时，视图自动更新。

2.1 语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) {{}} 的文本插值
Mustache 标签将会被替代为对应数据对象上 msg property 的值。绑定的数据对象上 msg property 改变，插值内容都会更新。

<span>Message: {{ msg }}</span>

通过使用 v-once 指令，可以执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

<span v-once>这个将不会改变: {{ msg }}</span>

示例如下，运行以后，data中的msg和msgOnce均改变为’11111’，但页面上只有msg数据绑定修改，msgOnce执行v-once指令只一次性插值，数据修改后内容不更新。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span>{{msg}}</span>
        <br>
        <span v-once>这个将不会改变: {{ msgOnce }}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'xxxx',
            msgOnce: 'once'
        }
    })
    vm.msg = '11111'
    vm.msgOnce = '11111'
</script>
</html>

表达式
Vue.js 提供完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

huangq_qiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第2章数据绑定

数据绑定是指将数据和视图关联，当数据发生变化时，视图自动更新。2.1 语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。2.1.1 插值文本数据绑定最常见的形式就是使用“Must
复制链接

扫一扫