vue.js 入门精要-阿里云开发者社区

vue.js 入门精要

2016-05-11 3333

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

废话不多说,直接上干货

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

(1)绑定数据:

   Js代码  
    
  
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代码:

   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)动态更新数据

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

如何获取vue的data?

注意:data前面要加$

(3)vue表达式

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

动态修改样式:

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

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

(4)vue计算属性

   Js代码  
    
  
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代码:

   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

vue.js 入门精要

热门文章

最新文章

相关课程

相关电子书

相关实验场景