• 急速入门
    • 源代码

    急速入门

    如果只从体验的角度来看， Vuejs 的安装非常简单. 只需要引入一个第三方的js包即可。

    1. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    下面是一个最简单的例子： 

    1. <html>
    2. <head>
    3.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    4. </head>
    5. <body>
    6.     <div id='app'>
    7.         {{ show_my_text }}
    8.     </div>
    9.     <script>
    10.         var app = new Vue({
    11.             el: '#app', 
    12.             data: {
    13.                 show_my_text: 'Vuejs is the best one page app!'
    14.             }
    15.         })
    16.     </script>
    17. </body>
    18. </html>

    上面的代码非常简单，

    1. 在head中引入 vuejs 包
    2. 在 中，定义了一个
      , 可以认为，所有的页面展示，都是在这个
      中。 每次我们做任何点击的时候， 整个页面不会刷新， 都是vuejs框架操作代码，对
      中的内容进行局部刷新。
    3. 后面的 var app=new Vue... 这里就是真正的操作代码： 
      1.      var app = new Vue({    // 表示创建了一个Vue对象
      2.          el: '#app',        // 指定 所有的 代码操作，都是对于 <div id='app' > 的元素来操作的
      3.          data: {            // data 表示为 Vuejs 管理的变量赋值。 这个变量的名字是 show_my_text
      4.              show_my_text: 'Vuejs is the best one page app!'
      5.          }
      6.      })

    使用浏览器打开这个页面后， 就可以看到：

    第一个vuejs例子

    源代码

    可以在 code_example/hello_world_bare_vuejs 中看到。 并直接运行.