Vuejs教程目录:

  1. 从Demo到实例快速上手Vue.js
  2. Vuejs网络请求组件的使用及解决跨域问题
  3. vuejs单文件应用入门
  4. Vue.js单文件项目中使用Vuex:装载工具
  5. Vue.js单文件项目中使用Vuex:数据操作

参考:

Vue.js中文网

体验Vue.js

我们暂时先抛开它的各种深入应用场景,先尝试一个最简单的Demo,体验一下在前端应用MVVM模式的舒爽。
把下面的Demo代码贴到html里面并且浏览一下这个文件(双击浏览器打开就行)

<html>
    <body>
        <div id="app">
            {{test}}
        </div>
    </body>
<script src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            test: 'we are in vuejs'
        }
    });
</script>
</html>

所以我们能看到整个页面就一个we are in vuejs那么咱么不急,接下来我们体验一下数据绑定的效果。
按F12,或者打开开发者工具,我指的是Chrome浏览器。
然后进入Console标签,输入vm.test='we changed the text'按换行确认,看页面上的文字是不是变了?
走到这里,我们已经对Vuejs有一个初步的了解。

获取服务端数据

我们这里使用Vuejs+jQuery获取数据
Demo代码:

<html>
<body>
<div id="app">
    {{test}}
    <br />
    <button v-on:click="showData">点击获取数据</button>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            test: 'we are in vuejs'
        },
        methods: {
            showData: function () {
                var _self = this;
                $.ajax({
                    type: 'GET',
                    dataType:'text',
                    url: 'http://127.0.0.1:8368/home/login/test',
                    success:function(data) {
                        _self.test = data;
                    }
                });
            }
        }
    });
</script>
</html>

点击按钮后就会从接口获取数据并修改test变量的值。
我的Demo里面地址仅仅是返回一个text字符串,这样看效果比较简单直接。

渲染数据

仅举例循环渲染列表数据
Demo代码:

<html>
<body>
<div id="app">
    <li v-for="(item, index) in items">
        {{item.uname}}
    </li>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: {}
        },
        methods: {
            showData: function () {
                var _self = this;
                $.ajax({
                    type: 'GET',
                    dataType:'json',
                    url: '/home/login/test',
                    success:function(data) {
                        _self.items = data;
                    }
                });
            }
        }
    });
    vm.showData();
</script>
</html>

我Ajax返回了一个json数组,然后用li循环渲染了一个列表


更多内容随后更新