自学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 采用自底向上增量开发的 ...

随机推荐

全面掌握Nginx配置+快速搭建高可用架构一 random_index_module 随机主页
修改default.conf 保存重载Nginx,完成配置自动随机选择主页 string要替换的内容,replacement表示替换后的内容示例效果,只替换了第一个如果要替换所有的,需要用到s ...
centos 7.4 磁盘空间不足，扩容根分区 --lvm模式
背景:根分区磁盘空间不足,需要扩容root磁盘空间 1.查看现有磁盘信息,可以看出根分区有26G [root@localhost ~]# df -h 2.查看新增加的磁盘信息(改虚拟机已经添加好了,不 ...
openstack trove redis配置项
trove在mitaka版本更新了一个功能,configuration 具体如下: trove help |grep configuration configuration-attach Attach ...
CTF -bugku-misc（持续更新直到全部刷完）
1.签到题点开可见.(这题就不浪费键盘了) CTF- 2.这是一张单纯的图片图片保存到本地,老规矩,winhex看一看拉到最后发现因为做过ctf新手的密码所以一看就知道unicode 百度站 ...
Unity获取游戏对象详解
我觉得Unity里面的Transform 和 GameObject就像两个双胞胎兄弟一样,这俩哥们很要好,我能直接找到你,你也能直接找到我.我看很多人喜欢在类里面去保存GameObject对象.解决G ...
HDU_2604 矩阵快速幂较难推的公式
一个排队问题,f代表女,m代表男,f和m出现的几率相等.问一个长为L的队伍不能出现 fmf 和 fff这样的串总共有多少种. 这个题目的公式递推略难啊...我看了别人博客才想明白原来是这么递推出来的. ...
multi-task learning
多任务学习, CTR, CVR 任务同时训练, 同时输出概率.
Redhat7 开机启动服务
#!/bin/sh ### BEGIN INIT INFO # Provides: jboss # Required-Start: $local_fs $remote_fs $network $sys ...
树上问题&图论模板整理
去除过水的模板,包括但不限于dijkstra(甚至堆优化都被过滤了).SPFA.kruskal.拓扑排序等. 欧拉回路:http://uoj.ac/problem/117 #include<bi ...
python中selenium自动化常用关键字
一:定位八种方法例如: 二:常见的webdriver方法 1.浏览器相关:(打开浏览器先导入webdriver模块) (1)set_window_size(480,800)调整浏览器宽高大小 (2) ...

黑马eesy_15 Vue：常用语法