一.Hellow Vue
el:属性可以挂载元素,data可以存储变量数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="first">{{msg}}
</div>
<script src="../vue.js" ></script><!--导入vue-->
<script>
//let是变量,const是常量
const app=new Vue({
el:'#first',
data:{
msg:'Hellow Vue'
}
})
</script>
</body>
</html>
二.Vue列表循环
v-for="items in list"该语句可以使得元素循环显示出列表中的所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="first">{{msg}}
<ul>
<li v-for="items in list">{{items}}</li>
</ul>
</div>
<script src="../vue.js" ></script><!--导入vue-->
<script>
//let是变量,const是常量
const app=new Vue({
el:'#first',
data:{
msg:'Hellow Vue',
list:['艾弗森','库里','欧文','保罗','莫兰特']
}
})
</script>
</body>
</html>
三.Vue的方法定义
我们可以使用methods对象来定义Vue中需要操作的方法,使用v-on:click等为元素绑定相应的方法
有一点需要注意:注意vue对象中的data中存储的数据不能使用this.data.xxx来调用,直接this.xxx来调用
计数器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="jishuqi">
<h2>当前计数:{{number}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app=new Vue({
el:'#jishuqi',
data:{
number:0
},
methods:{
add:function(){
this.number++;//注意vue对象中的data中存储的数据不能使用this.data.xxx来调用,直接this.xxx来调用
},
sub:function(){
this.number--;
}
}
})
</script>
</body>
</html>
el可以传入一个字符串,也可以传入一个DOM选择器,它会根据传入的元素来选择之后管理哪一个DOM元素
data可以是一个Object,也可以是一个函数,在组件当中data必须是一个函数