VueJS 简介

Vue 是用于构建用户界面的JavaScript框架,它的核心部分主要集中在视图层。我们将在本教程中使用的Vue版本是2.0。

在 此示例中,我们将使用vuejs的开发版本。

 < html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

输出

1604671380606

这是我们使用VueJS创建的第一个应用程序。如以上代码所示,我们在.html文件的开头包含了vue.js。

<script type = "text/javascript" src = "js/vue.js"></script>

正文中添加了一个div,该div在浏览器中显示 “My first VueJS Task” 。

 < div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

我 们还在插值中添加了一条消息,即 {{}} ,这将与VueJS交互并在浏览器中打印数据。如下所示:

  var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

在 上述代码段中,我们正在调用Vue实例,该实例采用DOM元素的ID,即e1:”#intro”,它是div的ID。message值为 “My
first VueJS Task” 。

1604671397086

控制台详细信息

1604671403775

在上面的控制台中,我们打印了vue_det对象,该对象是Vue的实例。我们正在使用 “ VueJs is interesting”更新消息,并且在浏览器中也立即更改了该消息,如上面的屏幕截图所示。

取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!