自学Java后端开发，发现14 微服务电商【乐优商城】实战项目，在介绍完SpringCloud后就要肝前端的基础知识ES6语法和Vue.js

所以本篇博客作为入门Vue练习记录的过程，目的是供自学后端Java遇到Vue使用需求的时候，加强学习一下Vue基本使用的方法。

黑马eesy_15 Vue：02.常用语法

黑马eesy_15 Vue：03.生命周期

黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）

vue常用语法

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-2.5.16.js文件复制进去。

为了方便测试代码运行效果，在IDEA中对tomcat部署进行如下设置

demo1：由vue接管id为app的区域

<!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函数的参数来自于，控件调用时函数名后面小括号里的预设值*/ fun1:function (msg) {

                    alert("hello demo2");

                    this.message = msg;

                }

            }

        })

    </script>

</html>

08vue的v-on键盘事件和阻止事件默认行为

demo3

<!DOCTYPE html>

<html xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>

        <meta charset="utf-8" />

        <title>v-on:keydown</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            Vue:<input type="text" v-on:keydown="fun($event)">

            <hr/><!--水平线-->

            传统JS：<input type="text"  onkeydown="showKeyCode()"/>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            methods:{

                fun:function (event) {

                    var keyCode = event.keyCode;

                    if(keyCode<48 || keyCode>57){

                        alert("keyCode非法，请输入数字。");

                        //不让键盘的按键输入起作用

                        event.preventDefault();

                    }

                }

            }

        });

        //传统js的键盘按下事件

        function showKeyCode() {

            //event对象和document对象以及windows对象，可以不用定义直接使用

            var keyCode = event.keyCode;

            if(keyCode<48 || keyCode>57){

                alert("keyCode非法，请输入数字。");

                //不让键盘的按键输入起作用

                event.preventDefault();

            }

            //alert(keyCode);

            /*if(event.keyCode == 13){

                alert("你按的是回车")

            }*/

        }

    </script>

</html>

09vue的v-on鼠标移动事件和阻止事件传播

demo4

<!DOCTYPE html>

    <head>

        <meta charset="utf-8" />

        <title>v-on:mouseover</title>

        <style>

            #div {

                background-color: red;

                width: 300px;

                height: 300px;

            }

        </style>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <div v-on:mouseover="fun1" id="div">

                <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>

            </div>

            <!--传统的js方式-->

            <!--<div onmouseover="divmouseover()" id="div">

                <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>

            </div>-->

        </div>

    </body>

    <script>

        //view model

        /**@事件名称  就是  v-on:事件  的简写方式

         * @mouseover = v-on:mouseover

         */

        new Vue({

            el:app,

            methods:{

                fun1:function () {

                    alert("鼠标悬停在div上了");

                },

                fun2:function (event) {

                    alert("鼠标悬停在textarea上了");

                    event.stopPropagation();

                }

            }

        });

        //传统的js方式

        function divmouseover() {

            alert("鼠标移动到了div上了");

        }

        function textareamouseover() {

            alert("鼠标移动到了textarea上了");

            event.stopPropagation();

        }

    </script>

</html>

10vue中的事件修饰符

demo05

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-on:事件修饰符</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <form action="http://www.baidu.com" method="get" @submit.prevent >

                 <input type="submit" value="submit提交">

             </form>

            <!--<form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">

                 <input type="submit" value="submit提交">

             </form>-->

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

        })

        //传统js方式

        function checkForm() {

            //表单验证必须有一个明确的boolean类型返回值

            //在应用验证方法时必须加上return 方法名称()

            //阻止事件的默认行为

            return false;

        }

    </script>

</html>

11vue中的按键修饰符

demo6

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-on:按键修饰符</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            Vue的按键修饰符:<input type="text" v-on:keydown.enter="fun1('你按的是Enter键')">

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            methods:{

                fun1:function (msg) {

                    alert(msg);

                }

            }

        });

    </script>

</html>

12 Vue中v-text和v-html以及v-bind的使用

demo7

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-text与v-html</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <div id="div1"></div>

            <div id="div2"></div>

        </div>

    </body>

    <script>

        //view model

        // 传统js的innerText和innerHTML

        // 这里还是个匿名函数

        window.onload = function () {

            document.getElementById("div1").innerHTML="<h1>Hello</h1>";

            document.getElementById("div2").innerText="<h1>Hello</h1>";

        }

    </script>

</html>

显示效果：

使用Vue的语法实现

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-text与v-html</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <div v-html="message"></div>

            <div v-text="message"></div>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                message:"<h1>Hello Vue</h1>"

            }

        });

</script>

</html>

demo8

v-bind: 给html标签的属性，设置data:变量的值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-text与v-html在v-bind上的使用</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <font size="5" v-bind:color="ys1">传智播客</font>

            <br><!--换行符-->

            <font size="5" v-bind:color="ys2">黑马程序员</font>

        </div>

    </body>

    <script>

        //view model

        //Vue的插值表达式不能用于html标签的属性取值

        //可以通过使用v-bind：给html标签的属性设置变量的值

        new Vue({

            el:"#app",

            data:{

                ys1:"red",

                ys2:"blue"

            }

        })

    </script>

</html>

13vue中的v-model的使用

demo9

把form表单中的<input>标签的 value属性替换成 v-model

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-model</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <form action="" method="post"  >

                用户名：<input type="text" name="username" v-model="user.username"><br/>

                密码：<input type="text" name="password" v-model="user.password"><br/>

                <!--用户名：<input type="text" name="username" value="user.username"><br/>

                密码：<input type="text" name="password" value="user.password"><br/>-->

            </form>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                user:{

                    username:"test",

                    password:"root"

                }

            }

        })

    </script>

</html>

14vue中的v-for的遍历使用

v-for遍历数组

demo10

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-for遍历数组</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <ul>

                <li v-for="(item,index) in arr ">{{item}}={{index}}</li>

            </ul>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                arr:[1,2,3,4,5,6]

            }

        })

    </script>

</html>

v-for遍历对象 (重点)

demo11

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-for遍历对象</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

    <div id="app">

        <ul>

            <li v-for="(value,key) in product ">{{key}}==={{value}}</li>

<!--            <li v-for="(key,value) in product ">{{value}}==={{key}}</li>-->

        </ul>

    </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                product:{

                    id:1,

                    name:"笔记本电脑",

                    price:5000

                }

            }

        })

    </script>

</html>

demo 12

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-for遍历对象demo12</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <table border="1">

                <tr>

                    <td>索引</td>

                    <td>编号</td>

                    <td>名称</td>

                    <td>价格</td>

                </tr>

                <tr v-for="(product,index) in products">

                    <td>{{index}}    </td>

                    <td>{{product.id}}        </td>

                    <td>{{product.name}}    </td>

                    <td>{{product.price}}    </td>

                </tr>

            </table>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                products:[

                    {id:1, name:"笔记本电脑",price:5000},

                    {id:2, name:"手机", price:2000},

                    {id:3, name:"电视", price:4000}

                ]

            }

        })

    </script>

</html>

15vue中的v-if与v-show

demo13

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>v-if与v-show</title>

        <script src="js/vuejs-2.5.16.js"></script>

    </head>

    <body>

        <div id="app">

            <span v-if="flag">hello itcast</span><br/>

            <span v-show="flag">hello ithemai</span><br/>

            <button v-on:click="fun">切换</button>

        </div>

    </body>

    <script>

        //view model

        new Vue({

            el:"#app",

            data:{

                flag:true //model

            },

            methods:{

                fun:function(){

                    //!实现布尔值取反

                    this.flag=!this.flag;

                }

            }

        });

    </script>

</html>

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

end

黑马eesy_15 Vue：常用语法的更多相关文章

黑马eesy_15 Vue：04.综合案例（前端Vue实现）
黑马eesy_15 Vue:02.常用语法黑马eesy_15 Vue:03.生命周期黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）
黑马eesy_15 Vue:02.常用语法黑马eesy_15 Vue:03.生命周期黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法黑马eesy_15 Vue:03.生命周期黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
Vue常用语法
一.模板语法 1.双大括号表达式 [语法:] {{exp}} 用于向页面输入数据,即页面显示数据. [举例:] <!doctype html> <html lang="en ...
vue 常用语法糖
//来自 https://www.cnblogs.com/lhl66/p/8021730.html 侵删 el:element 需要获取的元素,一定是HTML中的根容器元素 data:用于数据的存储 ...
vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
vue学习（一）ES6常用语法
1 ES6常用语法 1.1 变量提升例① # 变量提升 <div id="app"> </div> <script> console.log( ...
Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

随机推荐

C++基础--随机数
C/C++要产生随机数的方法一般是采用rand()函数核srand()函数来实现的. rand()函数返回的是一个伪随机数,这个函数内部采用线性同余法来实现伪随机数,而这个伪随机数是在一定范围内可以看 ...
bzoj1415 NOI2005聪聪和可可
%%%http://hzwer.com/2819.html 先各种暴力搞出来p[x][y](从x到y下一个最近应该到达的位子) 然后就记忆化搜索??(雾) #include<bits/stdc+ ...
精选干货在java中创建kafka
这个详细的教程将帮助你创建一个简单的Kafka生产者,该生产者可将记录发布到Kafka集群. 通过优锐课的java学习架构分享中,在本教程中,我们将创建一个简单的Java示例,该示例创建一个Kafka ...
vagrant 学习笔记
之所以学习他是因为最近换了电脑又要重新搭环境很烦躁然后就有了然后 1.先安装 virtualbox2.安装 vagrant3.安装xshell4.重启5.下载系统镜像 (可以去vagrant官网 ...
C# 遇到的报错：1、试图加载格式不正确、2、线程间操作无效
一. 调用第三方控件出现“试图加载格式不正确的程序”原因与解决办法二. 线程间操作无效: 从不是创建控件"Form1"的线程访问它. 1) C#中Invoke的用法
Codeforces 1296D - Fight with Monsters
题目大意: n 只怪兽,每只的血量为 h[i] ,你的攻击力为 a ,你的对手攻击力为 b 打每只怪兽时,都是你先出手,然后你的对手出手,这样轮流攻击如果是你给予了怪兽最后一击,你就能得到一分你还 ...
数据可视化BI平台——CBoard的部署与使用（笔记整理）
CBoard作为国内自主开发的数据可视化平台,因其方便好用而受到广大用户的使用和好评.现今CBoard有社区版和企业版两个版本,本文所述为社区版的0.4.2版本.注意:所需的一切资源以及相关参考链接都 ...
GPLT L3-021 神坛
在古老的迈瑞城,巍然屹立着 n 块神石.长老们商议,选取 3 块神石围成一个神坛.因为神坛的能量强度与它的面积成反比,因此神坛的面积越小越好.特殊地,如果有两块神石坐标相同,或者三块神石共线,神坛的面 ...
Freemarker的一点延生
1.freemarker一般不是单独使用,他可以和activeMQ互相结合,来完成功能的. 使用它有几点好处, 首先就是提高程序效率,一般情况我们的页面都是jsp,而jsp实际上是servlet,在 ...
ADB 用法大全【转】
https://github.com/mzlogin/awesome-adb awesome-adb ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代 ...

黑马eesy_15 Vue：常用语法