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

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

CoderOu

12812人浏览 · 2020-06-23 13:16:22

CoderOu · 2020-06-23 13:16:22 发布

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实例中的值也会改变，但是它不会重新渲染。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^