自学Java后端开发，发现14 微服务电商【乐优商城】实战项目，在介绍完SpringCloud后就要肝前端基础知识ES6和Vue。
所以本篇入门Vue练习记录的过程，目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力。
vue语法和生命周期与ajax异步请求
1、Vue的快速入门
2、Vue的语法
插值表达式
事件的绑定
数据的显示
逻辑判断和循环输出
3、Vue的生命周期
8个生命周期的执行点
4个基本的
4个特殊的
4、axios的ajax异步请求
它和jquery的ajax比较相似
01.Vue快速入门
IntelliJ IDEA 2019.2.3
解决maven项目创建过慢的问题
archetypeCatalog internal
在webapp目录下新建一个js目录，把vuejs.js文件复制进去。
为了方便测试代码运行效果，在IDEA中对tomcat部署进行如下设置
demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{messsage}}<!--Vue的插值表达式，把data中定义的数据显示到此处-->
<!--三元运算符-->
{{ a ? "ok":"no"}}
<br><!--换行-->
{{number*2}}<!--支持数学运算-->
<!--插值表达式不支持
{{var a = 1;}}
{{if(a=10){}}}
-->
</div>
</body>
<script>
//view model
//创建vue对象
new Vue({
el:"#app", //由vue接管id为app的区域
data:{
messsage:"Hello Vue!",//注意：此处不要加分号
number:100
}
});
</script>
</html>
07vue的v-on绑定点击事件
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}<!--Vue的插值表达式，把data中定义的数据显示到此处-->
<button v-on:click="fun1(‘Vue v-on‘)">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",//由vue接管id为app的区域
data:{
message:"Hello Vue"
},
methods:{
fun1:function (msg) {
alert("hello demo2");
this.message = msg;
}
}
})
</script>
</html>
======================
end
原文地址：https://www.cnblogs.com/MarlonKang/p/11625083.html
时间： 2024-08-03 11:03:52