vue2.0使用介绍

时间：2020-06-30 11:01:11 阅读：59 评论：0 收藏：0 [点我收藏+]

1.Vue.js（读音 /vju?/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue2.0--声明式渲染</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
             {{ message }}
        </div>
        <script>
            new Vue({
                el: ‘#app‘,
                data: {
                    message: ‘欢迎使用vue2.0‘
                }
            })
        </script>
    </body>
</html>

结果会显示：欢迎使用vue2.0

例子2：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue2.0--声明式渲染</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app-2">
          <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
          </span>
        </div>
        <script>
            var app2 = new Vue({
              el: ‘#app-2‘,
              data: {
                message: ‘You loaded this page on ‘ + new Date()
              }
            })
        </script>
    </body>
</html>