Vue官网学习(模板语法:一、{{}}双大括号语法)

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

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

1、文本“Mustache”语法 (双大括号)
<span>Message: {{ msg }}span>

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


<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的语法
在这里插入图片描述
点击改变值按钮之后:
Vue官网学习(模板语法:一、{{}}双大括号语法)_第1张图片
这种响应是编程和以前的编程式便捷了很多.

2、v-once(一次性地插值)

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

 <div v-once>Message :{{msg}}div>

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

你可能感兴趣的:(Vue,JS,ES6)