Vue基础

最新推荐文章于 2024-05-24 23:45:01 发布

银河猎户悬臂

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量62

点赞数

分类专栏： Java基础文章标签： vue javascript java html js

本文链接：https://blog.csdn.net/weixin_40617815/article/details/114368036

版权

Java基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 Vue相关学习链接

（1）Vue官网

（2）Vue在Github上的开源项目

（3）Vue中文社区

2 Vue的三个参数

（1）el

用于指定当前Vue实例对象所管理的HTML视图（标签），el的值通常是该视图所对应的id属性值，且el的值不能是html标签和body标签的id值。

（2）data

用于指定当前Vue对象的属性值

（3）methods

指定当前Vue对象的方法。

3 Vue常用指令

3.1 插值表达式

会将绑定的数据实时的显示出来，如果通过任何方式修改了所绑定的数据，那么所显示的数据都会被实时替换。
格式：{{vue对象的变量名}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue中的插值表达式（双大括号）</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>

</head>
<body>

<div id="app">
    {{message}} <br>
    <!--下面两行等价-->
    {{message+'abc'}} <br>
    {{message}}abc
    <!--正则表达式中还能“切割字符串”-->
    {{message.split("e")}} <br>
    <!--还能给数字做运算-->
    {{age+1}} <br>
    <!--Vue中的插值表达式还支持插值表达式-->
    {{age >9?"大于9":"小于等于9"}}
</div>


<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            message: "hello", //变量带引号是字符串
            age: 10 //不带引号是数字
        },
        methods: {}
    });
</script>

</body>
</html>

3.2 v-text 和 v-html

HTML中的DOM对象属性InnerText，用来操作标签体文本，对标签无效（只是单纯的显示文本，如果文本内容本身是另外一个标签的话不会显示）。
jQuery函数text()和DOM对象属性InnerText是一样的（如果文本内容本身是另外一个标签的话会显示该标签）。
Vue指令 v-text 也是同样的作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue的 v-text指令</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <!--
    渲染：通过Vue给标签加特效
    HTML中的DOM对象属性InnerText，用来操作标签体文本，对标签无效（只是单纯的显示文本，如果文本内容本身是另外一个标签的话不会显示）
    jQuery函数text()和DOM对象属性InnerText是一样的（如果文本内容本身是另外一个标签的话会显示该标签）
    Vue指令 v-text 也是同样的作用
    -->
    <div id="app">
        <!--p标签的标签体中明明没有写任何的文本，但是竟然会出现文本内容！
        这是因为vue给p标签加了“特效”
        只需要在p标签的属性处加“v-text”属性，属性值为和该标签所绑定的vue对象的属性（要显示的文本内容）
        注意：这里显示的文本是一个“超链接标签”，此时这个超链接标签是显示不出来的，只能以文本的形式呈现（因为用的是v-text指令，如果用v-html指令就能显示了）
        -->
        <p v-text="text"></p>
    </div>

    <br>


    <script type="text/javascript">
        //document.getElementById("app").innerText = "<h1>海马</h1>";
        //document.getElementById("app").innerHTML = "<h1>海马</h1>";
        new Vue({
            el:"#app",
            data:{
                text:"<a href='www.baidu.com'>这是超链接</a>"
            },
            methods:{}
        });


    </script>

</body>
</html>

3.3 v-if 和 v-show

根据表达式的bool值进行判断是否渲染该元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue的 if-show指令</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
        根据布尔值判断是否渲染标签
        v-if：取值如果是false，则该标签在浏览器中就不存在了（更推荐用这个指令，因为既然不想让这个标签显示，干脆就让它在html资源中消失）
        v-show：取值如果是false，该标签还存在，只是不再显示
        -->
        <p v-if="message">v-if</p>
        <p v-show="message">v-show</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                message:true
            }
        });
    </script>

</body>

</html>

3.4 v-on

使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的 v-on指令</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--通过v-on指令，给标签绑定“鼠标点击”、“鼠标悬浮”两个事件，且“v-on:事件名”可以简写为：“@事件名”-->
        <button value="v-on指令" v-on:click="fun1()" v-on:mouseover="fun1()">事件按钮</button> <br>
        <button value="v-on指令" @click="fun1()" @mouseover="fun1()">事件简写</button> <br>
    </div>

    <script type="text/javascript">
        new Vue({
           el:"#app",
           data:{},

            //事件响应时会调用该函数
           methods:{
                fun1:function () {
                    console.log("事件响应")
                }
           }
        });
    </script>
</body>
</html>

3.5 v-for

循环语句。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue的 v-for指令</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
        v-for 指令循环数组
        语法：v-for(元素：索引)in 数组键名
        取出数组元素和索引，用插值表达式
        -->
        <p v-for="(item,index) in array">{{item}}========={{index}}</p>

        <!--
        v-for指令循环对象
        语法：v-for(值：键：索引)in 对象键名
        -->
        <p v-for="(value,key,index) in person">{{value}}========={{key}}=========={{index}}</p>

        <!--v-for指令循环集合（数组中每个元素是对象，显示每个对象的name属性）-->
        <p v-for="(item,index) in personArray">{{item.name}}========={{index}}</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                array:["元素1","元素2","元素3"],
                person:{name:"小明",age:"25",gender:"男"},
                personArray:[
                    {name:"小明",age:"25",gender:"男"},
                    {name:"小红",age:"26",gender:"女"},
                    {name:"小黄",age:"27",gender:"男"}
                ]

            }
        });
    </script>
</body>
</html>

3.6 v-bind

v-bind 指令可以给标签的属性赋值：之前标签的属性值是在双引号中写死的，jquery解决这个问题是通过拼接来完成的，而Vue，通过v-bind（或者直接在标签属性前面加一个冒号），标签的属性值就是vue对象中管理的数据，这样就实现了标签属性值的动态绑定。

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue指令 v-bind</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
        v-bind 指令可以给标签的属性赋值
        -->
        <font v-bind:color="color1">文本颜色</font> <hr>
        <!--简化写法（不加v-bind，前面需要加个冒号 ：）-->
        <font :color="color2">文本颜色</font> <hr>
        <a :href="url">百度</a> <hr>
        <

    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                color1:"red",
                color2:"yellow",
                url:"http://www.baidu.com"
            }
        });
    </script>
</body>
</html>

3.7 v-model

数据与表单元素之间的双向绑定：页面中的文本框可以获取到vue对象中的数据，同样，一旦文本框中的数据被修改，则与其绑定的vue对象中的数据也会随之改变。
这样绑定好处在于：我们不用再去“获取参数”了，因为在页面上输入的参数直接和某个vue对象绑定了，所以可以直接通过ajax把这个vue对象传给服务器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue指令 v-model</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
        数据的双向绑定：页面中的文本框可以获取到vue对象中的数据，同样，一旦文本框中的数据被修改，则与其绑定的vue对象中的数据也会随之改变。
        这样绑定好处在于：我们不用再去“获取参数”了，因为在页面上输入的参数直接和某个vue对象绑定了，所以可以直接通过ajax把这个vue对象传给服务器
        -->
        用户：<input type="text" v-model="username"><br>
        密码：<input type="text" v-model="paasword"><br>

        另外一个文本框的值和用户名一样：<input type="text" v-model="username"><br>
        <button @click="fun1">修改用户名</button><br><br>
        <input type="text" :value="username"><br>

    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                username:"tom",
                paasword:"123"
            },
            //如果想在函数中使用data中的数据
            methods:{
                fun1:function () {
                    console.log(this.username)
                }
                }
        });
    </script>
</body>
</html>

4 Vue的Ajax异步请求（Get）

这个HTML做的事情：
（1）展示部分创建了一个按钮，以及一个文本框
（2）创建一个Vue对象，定义了属性message（初始值是“ajax”），创建了一个函数ajaxGet，它能调用axios对象来向服务器发起ajax请求，请求成功或失败时都可以进行相应处理。
（3）利用Vue中的v-model指令将属性message和文本框绑定起来，这样每次属性message的值发生改变时（请求成功时改变该值）文本框中的值也会马上跟着变。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue的Ajax Get请求</title>
    <!--先引入Vue-->
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <!--再引入axios文件-->
    <script type="text/javascript" src="../js/axios-0.18.0.js"></script>
</head>
<body>
<!--
Vue框架支持ajax技术（异步请求），需要插件axios.js
-->
<div id="app">
    <button @click="ajaxGet()">Get请求</button>
    <input type="text" v-model="message">
</div>

<!--
这个HTML做的事情：
（1）展示部分创建了一个按钮，以及一个文本框
（2）创建一个Vue对象，定义了属性message（初始值是“ajax”），创建了一个函数ajaxGet，它能调用axios对象来向服务器发起ajax请求，请求成功或失败时都可以进行相应处理。
（3）利用Vue中的v-model指令将属性message和文本框绑定起来，这样每次属性message的值发生改变时（请求成功时改变该值）文本框中的值也会马上跟着变。
-->

<script type="text/javascript">
   const v = new Vue({
        el: "#app",
        data: {
            message: "ajax"
        },
        methods: {
            ajaxGet: function () {
                /**
                 * get的异步请求
                 * axios插件中扩展了Vue的功能，插件中定义了对象axios，对象中有个方法get可以发送get请求
                 * 方法调用链：调用函数then()服务器响应成功时的回调函数、catch()服务器响应失败时的回调函数
                 * then()、catch()两个函数中的参数为为一个匿名函数，在匿名函数中处理Servlet的返回值
                 */
                axios.get("/ajaxServlet?name=lisi&age=20") //改成post就是post请求（但是会出现请求参数丢失，后面再讲）
                    .then(function (response) {
                        //服务器响应成功，先调用then，then再调用我们自己写的匿名函数，并且把相应成功的响应结果传到这个匿名函数
                        //响应回来的response是json数据，而json中的键“data”中存的才是从Servlet响应回的数据
                        console.log(response.data); //请求成功就会在console上显示：“hello vue in ajax”
                        //把这个返回结果存到变量res中，让res变量和一个文本框绑定，这样本次发送请求的结果都会显示在那个文本框中
                        v.message = response.data; //这里不能用this来更改message的值，因为当前的this指的是axios对象而不是那个vue对象！
                    })
                    .catch(function (error) {
                        console.log(error); //请求失败就会在console上显示：相关的错误信息
                    });
            }
        }
    });
</script>

</body>
</html>

银河猎户悬臂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue基础

1Vue相关学习链接（1）Vue官网（2）Vue在Github上的开源项目（3）Vue中文社区2 Vue的三个参数（1）el用于指定当前Vue实例对象所管理的HTML视图（标签），el的值通常是该视图所对应的id属性值，且el的值不能是html标签和body标签的id值。（2）data用于指定当前Vue对象的属性值（3）methods指定当前Vue对象的方法。3 Vue常用指令3.1 插值表达式会将绑定的数据实时的显示出来，如果通过任何方式修改了所绑定的.
复制链接

扫一扫