Vue学习笔记

Html

<div id="userMessage">
</div>

Js

var userMessage = new Vue({
        el:'#userMessage',//绑定 html 元素
        data:{//数据
                userMessage:{
                        name:'zhangsan',
                        sex:'man',
                        phone:'18688888888'
                },

        },
        methods:{//方法
               bindClick:function(){
                       alert('click');
               },
       }
});    

如果想要跟js的数据进行绑定

在<div id='userMessage'></div>作用域内

<div id='userMessage'>
   <span>姓名： {{userMessage.name}}</span>
   <span>性别： {{userMessage.name}}</span>
   <span>电话： {{userMessage.name}}</span>
</div>

这样就可以调用绑定的数据，并且可以动态的更改。

 

如果想要修改js中的data的数据

var userMessage = new Vue({
        el:'#userMessage',//绑定 html 元素
        data:{//数据
                userMessage:{
                        name:'zhangsan',
                        sex:'man',
                        phone:'18688888888'
                },

        },
        methods:{//方法
               bindClick:function(){
                       alert('click');
               },
       }
});    

userMessage.userMessage.name = 'lizi';//更改用户名
userMessage.userMessage.sex = 'woman';//更改性别
userMessage.userMessage.phone = '15699999999';//更改手机号
//并且 当此处的name、sex、phone等更改的时候 与之绑定的html内容也会同步进行更改。

如果想要绑定事件

<div id='userMessage'>
    <span v-bind:click='bindClick'>绑定点击事件</span>
</div>

var userMessage = Vue({
        el:'#userMessage',
        data:{
        },
        methods:{
                bindClick:function(){
                       alert('我被点击了！');
                }
        }
});

//主要用到v-bind:click='bindClick';
//v-bind  要绑定什么事件
//bindClick  绑定的方法

如果有多条数据，进行循环

<div id="userMessage">
    <div class='user' v-for='user in allUser'> 
        <span>用户名：{{user.name}}</span>
        <span>性别：{{user.sex}}</span>
        <span>电话号码：{{user.phone}}</span>
    </div>
</div>

//例如ajax获取了一条用户数组，内部包含多条用户数据
users:[{
	name:’zhangsan’,
	sex:’man’,
	phone:’18688888888’
},
{
	name:’lisi,
	sex:’man’,
	phone:’18600000000’
},
{
	name:’wangwu’,
	sex:’woman’,
	phone:’1822222222’
}
];

var userMessage = new Vue({
    ele:'#userMessage',
    data:{
         allUser:'',
    },

});
userMessage.allUser = users;//将模拟获取到的ajax的数据放到此处


     

补充中。。。。。。