黑马eesy_15 Vue：常用语法

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

posted @ 2019-10-06 17:44 Marlon康阅读(735) 评论(0) 编辑收藏举报

刷新页面返回顶部

Marlon康，致力于软件测试开发