【Vue】零基础学习Vue: 第3课 vue的基本使用_前端零基础学习vue 李游-CSDN博客

博客介绍了Vue的基本操作和数据显示。使用双大括号“{{}}”可输出Vue内data定义的变量，且“{{}}”内还能运行一些js代码，如自执行函数、调用js方法等，并给出了相应运行结果示例。

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

vue的基本操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 给标签定义vue </title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!-- 获取的元素 -->
  <div id="app">
  </div>
  
  <script>
    new Vue({
      el:"#app",  //获取元素 也可以通过className来获取
      data:{},    //data内存放vue的变量
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  </script>
  
</body>
</html>

vue的数据显示：

使用双大括号“ {{}} ”的形式可以输出 Vue内data定义的变量

<body>
  <!-- 获取的元素 -->
  <div id="app">
    姓名：{{xm}} 性别：{{age}} 年龄: {{age}} 
  </div>

  <script>
    new Vue({
      el:"#app",  //获取元素
      data:{      //data内存放vue的变量
        xm:"小明",
        sex:"男",
        age:"18"
      },    
      methods: {  //methods存放vue内定义的方法
        
      },
    })
  </script>

</body>

上面运行结果入下图显示：

姓名：小明性别：18 年龄: 18

{{ }}内也能运行一些js代码:
如：{{}}内放自执行函数

 <!-- 获取的元素 -->
  <div id="app">
    {{ (function(){return "姓名：小明"})() }}
  </div>

运行结果如下：

姓名：小明

如一些js方法:

<div id="app">
    {{ [1,2,3,4].toString() }}
  </div>

运行结果如下：

1,2,3,4