【Vue入门学习笔记】Vue核心语法-EW帮帮网

准备工作

删除不需要的代码

删除components下的文件
在这里插入图片描述
进入App.vue
删掉代码，只保留如下内容

<template>

</template>

<script>
</script>

进入main.js
删掉css引用，保留如下内容

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

模版语法

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

文本插值

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

<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

使用JavaScript表达式

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

<template>
  <p>{{ number + 1 }}</p>
  <p>{{ ok ? 'yes' : 'no' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</template>

<script>
  export default {
    data() {
      return {
        number: 10,
        ok: true,
        message: 'Hello Vue!',
      }
    }
  }
</script>

在这里插入图片描述

无效写法

<!-- 这是一个语句而非表达式 -->
{{var a = 1}}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) {return message}}}

原始HTML

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

<template>
  <span v-html="rawHtml"></span>
</template>
<script>
export default {
  data() {
    return {
      rawHtml:"<a href='https://www.baidu.com'>百度</a>"
    }
  }
} 
</script>

属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用v-bind 指令

<template>
  <div v-bind:class="message">测试</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'active',
      }
    }
  }
</script>

可以看到，通过v-bind:class我们把message的值active设为了<div>的class
在这里插入图片描述

简写

因为v-bind非常常用，所以有一个简写的语法，直接省略v-bind
即可

  <div :class="message" :id="testid">测试</div>

布尔型Attribute

布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上，disabled就是最常见的例子之一

<template>
  <button :disabled="IsButtonDisabled">按钮</button>
</template>
<script>
  export default {
    data() {
      return {
        IsButtonDisabled: true
      }
    }
  }
</script>

动态绑定多个值

如果有像这样的一个包含多个attribute的JavaScript对象

<template>
  <div v-bind="objectOfAttrs">测试</div>
</template>
<script>
  export default {
    data() {
      return {
        objectOfAttrs: {
          id: 'test',
          class: 'test-class',
          style: 'color: red'
        }
      }
    }
  }
</script>

【Vue入门学习笔记】Vue核心语法

目录