Vue学习笔记(一)

模板语法

Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。

文本差值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法(即双大括号)：

<script>
export default {
    name: 'hello'
    data() {
        return {
         msg: "神奇的语法",
         hello: "Hello World"
        }
    }
}
</script>

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
</template>

使用JavaScript表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是否可以合法地写在return后面。

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "神奇的语法",
      number: 10,
      ok: true,
      message: "大家好"
    }
  }
}
</script>

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ number + 1 }}</p>
  <p>{{ ok ? 'Yes' : 'No' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</template>

注意
以下这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

原始HTML

双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，需要使用v-html指令。

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "神奇的语法",
      number: 10,
      ok: true,
      message: "大家好",
      rawHtml: "<a href='https://www.baidu.com'>百度</a>",
    }
  }
}
</script>

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
  <p>{{ number + 1 }}</p>
  <p>{{ ok ? 'Yes' : 'No' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
  <p>{{  rawHtml }}</p>
  <p v-html="rawHtml"></p>
</template>

运行截图：