vue系列=模板语法

1、插值语法

用双大括号包含一个JavaScript表达式，即{{JavaScript表达式}}

1、一般只是用变量，三元表达式，其他的基本很少用

<template>
  <h2>模板语法</h2>
  <p>{{ message }}</p>
  <p>{{ ok? 'YES' : 'NO' }}</p>
</template>
 <script >
  export default {
    data() {
      return {
        message: 'Hello Vue 3.0',
        ok: false
      }
    }
  }
</script>

2、指令语法

1、指令(Directive)是带有“v-”前缀的Vue自定义标签属性，其属性值一般是一个JavaScript表达式。Vue中包含了一些不同功能的指令，比如v-bind用来给标签指定动态属性值，v-on用来给标签绑定事件监听，v-if和v-show用来控制标签是否显示。但需要注意的是，不管是什么功能的指令，它们操作的目标都是指令属性所在的标签

2、● v-bind：属性名="JavaScript表达式"。● v-on：事件名="方法名表达式"。

3、其实Vue允许将“v-bind：属性名”简化为“​：属性名”​，​“v-on：事件名”简化为“＠事件名”的形式，并且在实际项目开发中，前端工程师基本上会使用简化的语法进行开发。

<template>
  <h2>指令语法</h2>
  <p v-text="message"></p>
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change Message</button>
  <a v-bind:href="href">Go to Google</a>

<!--简化语法-->
  <p></p>
  <button @click="changeMessage">Change Message</button>
  <a :href="href">Go to Google</a>
  <p v-if="ok">This is OK</p>

</template>
 <script >
  export default {
    data() {
      return {
        message: 'Hello Vue 3.0',
        href: "https://nodejs.org/zh-cn"
      }
    },
    //模板中创建的方法，通过变量调用
    methods: {
      changeMessage() {
        this.message = 'Hello Vue 3.0 changed'
      }
    }
  }
</script>