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

随机推荐

java内存模型（线程，volatile关键字和sychronized关键字）
volatile关键字用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致的情况. ...
id3算法python实现
import numpy as npimport operator def createDataSet(): dataSet = [ [1,1,'yes'], [1,1,'yes'], [1,0,'n ...
Java底层魔术类Unsafe用法简述
1 引子 Java中没有指针,不能直接对内存地址的变量进行控制,但Java提供了一个特殊的类Unsafe工具类来间接实现.Unsafe主要提供一些用于执行低级别.不安全操作的方法,如直接访问系统内存资 ...
洛谷 P2196 挖地雷
题目传送门解题思路: 记忆化搜索,题目比较坑的地方在于,这是个有向图,给的边是单向边!!!!!!!! AC代码: #include<iostream> #include<cstdi ...
mysql数值类型总结及常用函数
最近在学习下,总结一下mysql数值类型: mysql字符类型分: 1.整数类型: 字节值范围 INTERGER 1 ...
No module named cv2 报错处理
运行python脚本出现“No module named cv2 ”,这时我们安装下opencv-python依赖即可 python3 -m pip install opencv-python
javaweb01
Java web应用由一组servlet.HTML页,类,以及它可以被绑定的资源构成,它可以在各种供应商提供的实现servlet规范容器中运行javaweb包括这些:Servlet jsp 实用类静 ...
Thread--使用condition实现顺序执行
package condition; import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Re ...
系统学习python第三天学习笔记
day02补充运算符补充 in value = "我是中国人" # 判断'中国'是否在value所代指的字符串中. "中国"是否是value所代指的字符串的子 ...
VC调用VB写的COM
VB. 步骤: 1.创建类库:类库的创建必须分为接口和实现类:给外面提供的是COM接口: 创建了接口和类之后还要创建"Guid",这个在"工具->创建GUID&qu ...

黑马eesy_15 Vue：常用语法