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

准备工作

删除不需要的代码

删除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>