Vue基础知识-模板语法

最新推荐文章于 2022-06-21 19:12:06 发布

测试开发架构师

最新推荐文章于 2022-06-21 19:12:06 发布

阅读量694

点赞数

分类专栏：测试开发文章标签： vue

本文链接：https://blog.csdn.net/afangxin/article/details/115255958

版权

测试开发专栏收录该内容

20 篇文章 1 订阅 ¥79.90 ¥99.00

订阅专栏

这篇博客介绍了Vue的基础模板语法，包括双括号表达式用于页面数据输出，强制数据绑定和数据监听时如何避免错误，以及使用v-bind和@进行属性绑定和事件监听。详细讲解了v-bind的简写形式和事件参数传递。

摘要由CSDN通过智能技术生成

Vue基础知识-模板语法

一、双括号表达式{ {}}

向页面输出数据
{ {}}内部是变量、对象调用、表达式
变量、对象调用、表达式一定要有具体的结果

如下图，这里是固定写法，使用钩子data，return出去，然后在上面用{ {}}进行引用，进行渲染，见下面示例：直接使用，也可以进行表达式

<template>
  <div>
<!--    <h1>我是一个组件</h1>-->
    <h3>双括号表达式</h3>
    <div>{
  {intro}}</div> <!-- 直接使用 -->
    <div>{
  {intro.toUpperCase()}}</div> <!--   表达式-->
  </div>
</template>

<script>
export default {
  name: "Template",
  data(){
    return{
      intro: "hello, hello!"
    }
  }
}
</script>

<style scoped>

</style>

了解本专栏