vue初学习
Posted 高不高
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue初学习的主要内容，如果未能解决你的问题，请参考以下文章