Vue官网学习（模板语法：一、{{}}双大括号语法）

最新推荐文章于 2024-04-21 19:53:48 发布

CoderOu

最新推荐文章于 2024-04-21 19:53:48 发布

阅读量1.2w

点赞数 5

分类专栏： Vue JS ES6 文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_42154259/article/details/106920922

版权

Vue 同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

ES6

13 篇文章 0 订阅

订阅专栏

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

这是官网对模板的介绍，今天就来学习一下Vue的模板语法：

1、文本“Mustache”语法 (双大括号)

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

msg是Vue示例中data属性里面的一个属性名称，如果此属性值改变，那么上面的值也会改变。
写个简单的demo来演示一遍：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双大括号语法</title>
</head>
<body>
  <div id="app">
    <div>Message ：{{msg}}</div>
    <button @click="changeMsg">改变值</button>
  </div>
</body>
<script src="../static/js/Vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: "我是双大括号语法"
    },
    methods: {
      changeMsg(){
        this.msg = "我是改变后的值"
      }
    }
  })
</script>
</html>

@click：给元素添加点击时间，
el：把dom对象托管给Vue来管理，这个必须加，不然Vue无法识别。
data：Vue中存放数据的
methods：存放方法的，比如上面的@click="changeMsg"可以理解为点击按钮之后调用methods下面的changeMsg方法。这里changeMsg方法使用的ES6的语法
在这里插入图片描述
点击改变值按钮之后：

这种响应是编程和以前的编程式便捷了很多.

2、v-once（一次性地插值）

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新，进行从新渲染。
v-once修饰的模板只渲染一次，后面对应的属性值改变，他不会重新渲染改变。

 <div v-once>Message ：{{msg}}</div>

如果上面的例子加上v-once修饰之后，我们的点击修改值的方法，方法能够生效，Vue实例中的值也会改变，但是它不会重新渲染。

CoderOu

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
Vue官网学习（模板语法：一、{{}}双大括号语法）

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这是官网对模板的介绍，今天就来学习一下Vue的模板语法：1、文本“Mustache”语法 (双大括号)<span>Messa.
复制链接

扫一扫