Vue学习笔记(一)

ops/2024/10/24 11:09:03/

模板语法

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>