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>
网友评论