图片服务器-前端-vue简单语法 jQuery

最新推荐文章于 2024-09-13 23:40:08 发布

小黄很白

最新推荐文章于 2024-09-13 23:40:08 发布

阅读量170

点赞数

文章标签： vue.js javascript 前端 jquery java

本文链接：https://blog.youkuaiyun.com/weixin_45706903/article/details/126245321

版权

本文介绍如何在IntelliJ IDEA中安装Vue.js插件，并通过实例演示Vue的基本用法，包括声明式渲染、条件与循环、事件处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Idea中安装vue插件

vue是实现了数据和dom元素双向绑定

1.File->Settings

2.Plugins->Marketplace->搜索Vue->Installed

3.在点击Installed->搜索Vue->勾选->apply->重启Idea

二、编写html

在title语句下要添加一句

 <script src="../js/vue.js"></script>

1.声明式渲染

用了vue框架后，修改标签内容，不用原生的方式(innerHTML),而是修改vue的变量

<body>
    <div id="app">
        {{message}} //在页面中显示的变量
    </div>
    <script>
        var app = new Vue({
            el: "#app", //设置哪个id的dom元素要通过vue渲染(id为app的)
            data: {
                message: "Hello Vue"  //定义变量message的值，可以在div标签中引用
            },
        });
        //通过修改vue的变量来修改标签内容
        app.message="修改后";
    </script>
</body>

-------修改app的变量message的值后------>>>

2.条件与循环

（1）条件语句：v-if

当变量值(seen)为true时，才可以显示出标签中的内容

<div id="app1">
    <p v-if="seen">现在可以看见了</p>
    </div>
    <script>
        var app3 = new Vue({
            el:'app1',
            data:{
                seen:true
            }
        });
    </script>

（2）标签属性绑定vue变量

a.dom元素的标签内容绑定vue变量

<h2>{{message}}</h2>

b.dom元素的属性绑定vue变量

使用冒号+html标签元素属性名

<img :id="images[0].imageId" :src="images[0].src">

 <div id="app2">
        <h2>{{message}}</h2>
        <img :id="images[0].imageId" :src="images[0].src">
</div>
<script>
        var app2 = new Vue({
            el:"#app2",
            data:{
                message:"hhhhh",
                images:[{   //数组
                    imageId: 1,
                    src: "../assets/i/b1.jpg"
                },{
                    imageId: 2,
                    src: "../assets/i/b2.jpg"
                }],
            },
        });
</script>

此时页面显示的就是图片数组的第一张图片，但是数组中的内容最好使用for循环来显示，而不是，一个一个的写，很麻烦。

（3）循环语句：v-for

 <div id="app2">
        <ul>
            <li v-for="a in images">
                <img :id="a.imageId":src="a.src">
            </li>
        </ul>
 </div>

3.事件处理

绑定dom元素的事件和vue的函数

a.dom元素的on..事件都可以转换成v-on：...，等号后面的是vue中的函数，当点击这个按钮后执行changeH函数

<div id="app3">
        {{message}}
        <button v-on:click="changeH()">改变按钮</button>
</div>

b.在vue中写函数(修改标签内容)

<script>
        var app3 =new Vue({
            el:"#app3",
            data:{
                message:"修改前",
            },
            methods:{
                changeH: function (){
                    app3.message = "修改后";
                }
            }
        });
 </script>

4.jQuery框架

在title前添加

 <script src="assets/js/jquery.min.js"></script>

eg:在如上的改标签内容函数时，发送ajax请求

语法：$ajax({....});

<script>
        var app3 =new Vue({
            el:"#app3",
            data:{
                message:"修改前",
            },
            methods:{
                changeH: function (){
                    app3.message = "修改后";
                    $ajax({
                        url:"",//请求路径
                        type:"",//请求方法
                        contentType:"",//数据格式
                        data:"",//请求数据
                        //匿名函数的定义方式，data是响应数据，status是状态码
                        //success是响应成功即状态码为200的回调函数
                        success(data,status){

                        },
                        //error是响应失败或success函数出错会进入的函数
                        error(jqXHR,status,err){
                            console.log("响应状态码："+status)
                        }
                    });
                }
            }
        });
    </script>

其中contentType，如果请求方法是GET则不用设置；如果是POST时form-data不用设置，其他都要设置