Vue基础语法详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_69507480/article/details/125157322

本文介绍了Vue.js的基础语法，包括插值表达式、指令概述及各类指令的详细说明，如文本渲染、条件渲染、属性绑定、事件绑定和列表渲染等，帮助理解Vue中数据与页面的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）插值表达式

插值表达式，专业术语称为mastach语法，就是通过两对花括号包含的一个表达式，可以直接执行js表达式语句，很方便的完成数据和页面的连接

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <p>
      直接输出变量内容：{
  { name }}
    </p>
    <p>
      字符串拼接：{
  { '姓名:' + name }}
    </p>
    <p>
      js内建函数：{
  { version.toUpperCase() }} {
  { version.toLowerCase() }}
    </p>
    <p>
      js三元表达式：{
  { age > 18 ? '成年': '未成年' }}
    </p>
    <p>
      自定义函数的调用：{
  { reverse(version) }}
    </p>
    <!-- <p>
      if-else判断（语法结构，不能使用）：{
  { if(age > 18) '成年' else  '未成年' }}
    </p> -->
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        name: "YY",
        version: 'Version1.0',
        age: 20
      },
      methods: {
        // 自定义函数，必须写在vue实例选项的methods选项中
        reverse(str) {
          return str.split('').reverse().join('')
        }
      }
    })
  </script>

</body>
</html>

（2）指令概述

指令：英文单词directive，描述了一种简单的功能操作，如获取焦点；简单的DOM操作在Vue中统一的被封装成指令进行操作；