[JS][Vue]学习记录之数据和方法

Demo地址
上篇文章学会了如何创建vue对象,这篇文章介绍下vue的数据和方法

1.获取到html中的DOM元素.

(1)创建一个<div id='app'></div>块
(2)在新建的vue对象中,指定el属性

<script>
var app = new Vue({
    el:'#app',//在这里指定div中的id
    data:{
        name : 'allen',
        age : 27
         }
    }
);
</script>

2.在html中使用这些数据.

<div id="app">
    hello {{name}},I'm {{age}}.
</div>

浏览器就会显示hello allen, I'm 27.
3.通过methods给vue对象添加方法.

var app = new Vue({
    el:"#app",
    data:{
        name : "allen",
        age : 123
    },
    methods:{
        study:function (className) {
            return className;
        }
      }
    }
);

调用方式:

<div id="app">
    hello {{name}},I'm {{age}}.
    {{study('math')}}
</div>

显示结果:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Begin</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    hello {{name}},I'm {{age}}.
    {{study('math')}}
</div>

<script>
var app = new Vue({
    el:"#app",//el表示元素,一定是与html元素相关的容器元素
    data:{//数据存储
        name : "allen",
        age : 123
    },
    methods:{
        study:function (className) {
            return className;
        }
      }
    }
);
</script>
</body>
</html>