vue初学习
第一个vue代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
//let(变量)/const(常量)
//编程范式：声明式编程
const app=new Vue({
el:'#app',//挂载要管理的元素
data:{//定义数据
message:'hello!'
}
//数据可以是变量也可以是组件
})
//元素js的用法(编程范式-命令式编程)
//1.创建div元素，设置div属性
//2.定义一个变量message
//3.message放到div中显示
//4.修改message元素
//5.修改后的数据再次替换到div
</script>
</body>
</html>
vue的列表显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--这是指令，响应式的-->
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
movies:['星际穿越','大话西游','少年派的奇幻漂流','盗梦空间']
}
})
</script>
</body>
</html>
vue的计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
当前计数{{count}}
<!-- <button v-on:click="count++">+</button>-->
<!-- <button v-on:click="count--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
//语法糖：简写
const vm=new Vue({
el:'#app',
data:{
count:0,
},
methods:{
add:function(){
this.count++;
console.log('add')
},
sub:function () {
console.log('sub')
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号