欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【Vue】零基础学习Vue: 第3课 vue的基本使用

程序员文章站 2022-06-06 20:29:32
...

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

上一篇： php计算剩余时间的自定义函数

下一篇： ruby中在终端命令行上调试grok表达式_PHP教程

推荐阅读