Vue入门

最新推荐文章于 2024-03-21 10:15:18 发布

8G_maker

最新推荐文章于 2024-03-21 10:15:18 发布

阅读量556

点赞数 1

文章标签： vue.js javascript 前端 java 数据库

本文链接：https://blog.csdn.net/corlinsu/article/details/125316334

版权

Vue入门

常见指令

{{属性}} var vue = new Vue({})

先引入vue.js的依赖,找到项目中放置的依赖直接拖拽进需要引用的页面
```
 <script src="../../js/vue/vue.js"></script> 
```
存在一个标签中依赖的标签存在
el:的用法有点类似jQuery $(“#app”),必定需要绑定标签的id,才能操作标签属性

data:则可以操作里面的标签中的属性,而{{}}的取值只能在标签的文本域中 ,标签的属性区无法使用

<div id="app">
    {{msg}}
</div>

var vue = new Vue({
    el:"#app",
    data:{
        msg: "love vue" 
    }
})

v-bild:

在需要导入标签包才该标签才能起作用

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

可以 v-bild:src=“src” 简写成->:src=“src”
可以操作标签的属性然后再data{}中给属性赋值,例如a和img标签
但是无法往文本域中设置值

data赋的值则是则是在文本中获取的

<div id="msg">
    {{msg}}

    <span v-bind:title="title">{{mess}}</span>
    <span :title="title">{{m}}</span>
    <img :src="src"/>
    <a :href="href">百度</a>
</div>

<script>
      var vue = new Vue({
          el:"#msg",
          data:{
              title:'爱你',
              m:"loveyou",
              msg: "love vue",
              mess:"渴望",
              src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F04%2F03%2FChMlWV279cyIEJKRAAWLE_dc-scAANGZgAEcPQABYsr692.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657692300&t=ced1bb7a468b1498123851853f3c8f3c",
              href:"https://www.baidu.com/"
          }
      });
</script>

v-model:

可以双向修改属性值,而v-bild拥有什么值只能由data中的属性决定 v-model:的值会双向改变

<div id="msg">
    {{msg}}
        <!--model的输入框中输入值时会影响到js中的值m  js中的值一改变,页面对应的值也会改变
            name这种叫双向影响-->
    <input type="text" v-bind:value="usname">
    <input type="text" v-model:value="usname">
    {{usname}}
</div>

<script>
      var vue = new Vue({
          el:"#msg",
          data:{
              title:'爱你',
              usname:"loveyou",
          }
      });
</script>

从图中可以得知v-model的输入框中的值改变时所有的他值都会随之改变,说明真正的属性值已经改变,v-bild:却没有这种功能
可以应用于编辑回显;值变时直接更改变

v-html:

可以将标签的值获取出来却不带标签

<div id="msg">
    <div>{{msg}}</div>
    <div v-html="msg"></div>
</div>

<script>
      var vue = new Vue({
          el:"#msg",
          data:{
             msg:"<span style='color: red'>演示html标签的插入</span>"
          }
      });
</script>

在这里插入图片描述

判断指令v-if:

判断标签中的值

<div id="app">
    <span v-if="age > 18">可以玩了</span>
    <span v-else-if=" age < 18">不能玩</span>
    <span v-else>玩的时候带上我</span>
    <input type="text" v-model:value="age">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            age:19
        }
    });
</script>

循环指令:v-for:

直接需要循环出现的中循环数组或者集合
arr存在值的数组 (索引值,元素对象) in arr in:在数组中的属性的意思
如果是集合那么遍历出来的对象可以直接使用{{}}属性值获取器中直接调用对象属性

需要注意的是集合中的值都是从后端查询出来进行赋值的

<div id="app">
             <ul>
                <li v-for="(index,item) in arr">{{index}}---{{item}}</li>
            </ul>
            <ul>
                <li v-for="item in arr">
                    {{item}};
                </li>
            </ul>
            <ul>
                <li v-for="e in emps">{{e.id}}---{{e.name}}----{{e.age}}</li>
            </ul>
</div>

 var vue = new Vue({
        el:"#app",
        data:{
           arr:["a","b","c","d"],
            emps: [
                {id:1,name:"admin",age: "13",sex:1},
                {id:2,name:"小小",age:"12",sex:0},
                {id:3,name:"笑笑",age:"11",sex:1},
                {id:4,name:"潇潇",age:"13",sex:1},
                {id:5,name:"丰登",age:"17",sex:1}
            ]
        }
    });

v-on:事件绑定指令，可缩写成@

以点击事件为例 v-on:click"函数方法体",也可以写成 @click"函数方法体"

<div id="app">
     <ul>
        <li v-for="(index,item) in arr" v-on:click="clickMe()">
            {{index}}---{{item}}</li>
    </ul>
    <ul>
        <li v-for="item in arr">
            {{item}};
        </li>
    </ul>
    <ul>
        <li v-for="e in emps" v-on:click="clickMe()">{{e.id}}---{{e.name}}----{{e.age}}---{{e.sex}}-</li>
    </ul>

</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
           arr:["a","b","c","d"],
            emps: [
                {id:1,name:"admin",age: "13",sex:1},
                {id:2,name:"小小",age:"12",sex:0},
                {id:3,name:"笑笑",age:"11",sex:1},
                {id:4,name:"潇潇",age:"13",sex:1},
                {id:5,name:"丰登",age:"17",sex:1}
            ]
        },
        methods:{
            clickMe:function () {
                alert("sb点我干嘛");
            }
        }
    });
</script>

在这里插入图片描述

事件$event/methods

事件中绑定的方法,事件中定义的方法都可以在methods:{}中定义
当前列调用的方法可以直接获取遍历的出来的对象或者元素作为参数传回方法中

$event为事件对象里面包含着所有的事件

<div id="app">

    <ul>
        <li v-for="e in emps" v-on:click="clickMe($event,e)">{{e.id}}---{{e.name}}----{{e.age}}---{{e.sex}}-</li>
    </ul>

</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
           arr:["a","b","c","d"],
            emps: [
                {id:1,name:"admin",age: "13",sex:1},
                {id:2,name:"小小",age:"12",sex:0},
                {id:3,name:"笑笑",age:"11",sex:1},
                {id:4,name:"潇潇",age:"13",sex:1},
                {id:5,name:"丰登",age:"17",sex:1}
            ]
        },
        //总结方法:定义参数个数,具体传什么参数回来由需求来定,可以是对象,如果是对象那么可以直接取到属性值
        
        methods:{
            clickMe:function (event,e) {
                var methods = this;
                console.log(methods);//Vue对象
                console.log(event);//事件对象
                console.log(e);//遍历得到的对象
                console.log(e.name,e.age,e.sex);//目标对象的属性值
                console.log(event.currentTarget);//当前标签
            }
        }
    });
</script>

管道过滤filter

性别的值只有0和1或者别的数值但是,我们想要展示的值确是男女保密,需要通过管道过滤进行判断

<div id="app">

            <ul>
                <li v-for="e in emps" v-on:click="clickMe($event,e)">{{e.id}}---{{e.name}}----{{e.age}}---{{e.sex|sexFormat}}-</li>
            </ul>

</div>

又分为全局和局部过滤

局部存在Vue对象中定义,指定需要过滤的字段

 //这属于局部变量
        filters:{
            sexFormat:function (value) {
                //直接自带一个value,无需传参
                console.log(value);
                if (value==1) {
                    return "男";
                }else if (value==0){
                    return "女";
                }else {
                    return "保密";
                }
            }
        }

全局则是独立存在Vue对象之外

//全局过滤,当全局过滤和局部过滤都存在时执行的局部过滤
    Vue.filter("sexFormat",function (value) {
        if (value == 1) {
            return "男1";
        }else if (value == 0 ){
            return "女1";
        }else {
            return "保密1";
        }
    })

执行数据的初始化mounted

发起异步请求的时在mounted中定义函数执行
数据驱动:数据变动后立马去更新数据
在发送请求时,获取vue中的属性时,如果刚开始初始化就直接调用的是vue对象是获取不到vue对象,因为并未加载到该对象(undefined),如果使用this可以调用得到,但是页面信息未加载完,ajax发送完后调用vue是可以得到的,但是为了保险起见还是使用this对象

Vue生命周期

在这里插入图片描述

实例应用

前后端分离请求流程

先向前端服务器发送list.html的请求http://localhost/views/employee/list.html

在这里插入图片描述

list.html

前端(跨域访问):

页面发送一个请求:http://localhost/views/employee/list.html
页面加载到页面员工数据的请求
这时就能体验到mounted功能的强大了

会出现跨域访问的问题这

跨域访问:就是A服务器通过浏览器访问B服务器时,端口 ip 协议有一个不一致时就会出现跨域访问的问题
处理跨域访问总共有五种方法,其核心问题所有在就是需要设置被访问的服务器响应头为允许跨域访问的的请求即可

在配置类中进行配置,需要更多的了解可以百度搜索

//被访问服务器进行设置
//跨域访问
@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        //重写父类提供的跨域请求处理的接口
        public void addCorsMappings(CorsRegistry registry) {
            //添加映射路径
            registry.addMapping("/**")
                //放行哪些原始域
                .allowedOriginPatterns("*")
                //是否发送Cookie信息
                .allowCredentials(true)
                //放行哪些原始域(请求方式)
                .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                //放行哪些原始域(头部信息)
                .allowedHeaders("*")
                //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                .exposedHeaders("Header1", "Header2");
        }
    };
}

mounted的使用

//跨域访问
var vue = new Vue({
    el:"#app",
    data:{
        emps:[],
        href:""
    },
    mounted:function () {
        var _this = this;
        $.get("http://localhost:8080/employees/list",function (data) {
            _this.emps=data;
        })
    }
})

请求得到的员工集合数据回到回调函数中data
再将data赋值给emps

页面中对emps进行遍历展示

<li v-for="e in emps">{{e.id}}--{{e.name}}--{{e.age}}</li>

后端:

以json的格式返回员工数据集合,查询响应的数据也是对应前端get请求

 @GetMapping("/list")
    public List< Employee > list(){
       return employeeService.list();
    }

在这里插入图片描述

add.html

前端:

绑定一个点击事件按钮跳转到add.html页面http://localhost/views/employee/add.html
页面中填写需要添加的属性值
提交时在绑定一个button按钮绑定提交的函数,再次发送一个ajax请求到后端服务器中

添加成功返回list界面

<body>
<div id="forFormId">
    <form  id="formId">
        <input type="text" name="name">
        <input type="text" name="age">
        <input type="button" v-on:click="submitHandel()" style="color: red" value="提交">
    </form>
</div>

<script>
     var vue =  new Vue({

         el:"#forFormId",
         methods:{
             submitHandel:function () {
                $.post("http://localhost:8080/employees/save",$("#formId").serialize(),function (data) {
                   location.href="list.html";
                })
             }
         }
     });
</script>
</body>

后端:

只需要接收请求封装好employee,执行相应的添加Api,返回的是一个json格式的执行结果

@PostMapping("/save")
    public AjaxResult save(Employee employee){
        employeeService.save(employee);
        return  new AjaxResult().success();
    }

edit.html

前端:

需要注意的是编辑涉及到一个数据的回显当页面点击编辑按钮时需要携带id到编辑页面中http://localhost/views/employee/edit.html?id=1
```
<a v-bind:href="'edit.html?id='+e.id">编辑</a> 拼接id携带过去edit.html
```

编辑页面需要做的时将路径中的携带的数据截取出来,?开始截取,截取的id以对象的形式返回

function getParams() {
        //获取的?id=10&age=28&name=wiii
        var editUrl = window.location.search;
        //用这个对象封装截取完成后的key-vaule值
        var params = new Object();
        console.log(editUrl);
        if (editUrl.indexOf("?")!=-1){
            //substr(1),截掉问号
            var arr = editUrl.substr(1).split("&");
            for (var i = 0; i <arr.length ; i++) {
                //得到[id,10]
                var keyValues = arr[i].split("=");
                //对象赋值
                params[keyValues[0]]=keyValues[1];
            }
        }
        return params;
    }

发送一个get请求携带id值到后端,得到一个员工信息,设置到页面中,因为是请求式刷新的所以使用的mounted下初始化请求方式,得到data再赋值回去emp作为回显数据

mounted:function () {
    var _this = this;

    var id = getParams().id;

    $.get("http://localhost:8080/employees/detail",{id:id},function (data) {
        console.log(data);
        _this.emp=data;
    })
}

<div id="forFormId">
    <form  id="formId">
        <input type="hidden"  name="id" v-model:value="emp.id">
        <input type="text" name="name" v-model:value="emp.name">
        <input type="text" name="age" v-model:value="emp.age">
        <input type="button" v-on:click="submitHandel()" style="color: red" value="提交">
    </form>
</div>

提交时需要绑定一个点击事件,所以使用的method:的函数,提交完修改的数据

var vue =  new Vue({
    el:"#forFormId",
    data:{
        emp:{}
    },
    methods:{
        submitHandel:function () {

            $.ajax({
                url:"http://localhost:8080/employees/update",
                type:"put",
                data: $("#formId").serialize(),
                success:function (data) {
                    if (data.code==200){
                        location.href="list.html"
                    }else {
                        alert(data.msg)
                    }
                }
            });
        }
    },

后端:

接收数据进行修改

@PutMapping("/update")
public AjaxResult update(Employee employee){
    employeeService.updateById(employee);
    return  new AjaxResult().success();
}

“,
data: $(”#formId").serialize(),
success:function (data) {
if (data.code==200){
location.href=“list.html”
}else {
alert(data.msg)
}
}
});
}
},


### 后端:

1. 接收数据进行修改

```java
@PutMapping("/update")
public AjaxResult update(Employee employee){
    employeeService.updateById(employee);
    return  new AjaxResult().success();
}