vue.js 入门精要

废话不多说,直接上干货

vue的核心:修改数据(model),html节点就会自动更新

(1)绑定数据:

var vm;
        var count=1;
        $(function () {
            vm=new Vue({
                el: '#demo',
                data: {
                    message: 'Hello World!',
                    number: 2,
                    ok:true,
                    name:'whuang'
                }
            });
            vm.$watch('data', function (newVal, oldVal) {
                console.log('$watch');
            })
        });

 html代码:

<div id="demo">
    {{ message }}<br>
    {{ number + 1 }}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}<br>
    {{ name | uppercase }}
    <hr>
    <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
</div>

 

 

(2)动态更新数据

 var updateData2= function () {
            vm.$data.message="更新后的数据"+(count++);
            vm.$data.ok=false;
        };

 如何获取vue的data?

 

注意:data前面要加$

 

(3)vue表达式 

{{ number + 1 }}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}<br>
    {{ name | uppercase }}

 

动态修改样式:

<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >

 在js方法中修改ok的值即可

(4)vue计算属性

var vm = new Vue({
                el: '#example',
                data: {
                    a: 1
                },
                computed: {
                    // 一个计算属性的 getter
                    b: function () {
                        // `this` 指向 vm 实例
                        return this.a + 1
                    },
                    upper: function () {
                        return "<span style='color:red' >school</span>".toUpperCase();
                    },
                    haha: function () {
                        return 'iloveyou'.split('');
                    }
                }
            })

 html代码:

<div id="example">
    a={{ a }}, b={{ b }}<br>
    {{{ upper }}}<br>
    {{ haha }}<br>
</div>

 

 

(5)监听数据的变化

 执行结果:

new:更新后的数据1;old:Hello World!

 

(6)如何获取vue的节点和数据

节点:vm.$el

数据:vm.$data

 

 

(7)

评论

2 楼 3344606096 2018-02-04  

6ee55e422428f6c8e502747c12d9fffe 

1 楼 it_node 2017-10-27  

不错，推荐个直接能在线实战的 ：
http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99?affid=iteye