首页 > Web开发 > 详细

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

时间:2019-10-05 17:57:03      阅读:77      评论:0      收藏:0      [点我收藏+]

自学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>

 

 

 

 

 

 

======================

end

 

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

原文:https://www.cnblogs.com/MarlonKang/p/11625083.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!