Vuejs 初体验 | 弟弟快看-教程

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

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

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

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
</head> 
<body> 
    <div id='app'> 
        {{ show_my_text }} 
    </div> 
    <script> 
        var app = new Vue({ 
            el: '#app', 
            data: { 
                show_my_text: 'Vuejs is the best one page app!' 
            } 
        }) 
    </script> 
</body> 
</html>

上面的代码非常简单，

1、在head中引入vuejs包；
2、在中，定义了一个；

, 可以认为，所有的页面展示，都是在这个

中。每次我们做任何点击的时候，整个页面不会刷新，都是vuejs框架操作代码，对

中的内容进行局部刷新。 3、后面的varapp=newVue...这里就是真正的操作代码：

var app = new Vue({    // 表示创建了一个Vue对象 
    el: '#app',        // 指定 所有的 代码操作，都是对于 <div id='app' > 的元素来操作的 
    data: {            // data 表示为 Vuejs 管理的变量赋值。 这个变量的名字是 show_my_text 
        show_my_text: 'Vuejs is the best one page app!' 
    } 
})

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

源代码

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

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有

08、Vuejs 初体验

源代码