Vue.js入门

最新推荐文章于 2024-08-05 19:35:10 发布

zuo_paopao

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量908

点赞数

本文链接：https://blog.csdn.net/zuo_paopao/article/details/79011717

版权

vue.js理解

今天是整整一个月，实习生活，感触是很深的，提高的方面很多，但对我来说最主要的是工作能力与学习习惯的进步。毕业实习主要的目的就是提高我们应届毕业生社会工作的能力，如何学以至用，给我们1次将自己在大学期间所学习的各种书面理论以及实际的知识应用于实际操作，让我们拥有演练的机会，自走进实习单位开始我本着积极肯干，虚心好学、工作认真负责的态度，以自己最快的速度融入公司。这一周还是像以往一样回顾一下自己的所学所感：

1．这一周自己开始学习了vue.js,在学校以及刚出来求职的时候一直就开始听到vue.js的名声了，自己当时就一直在想这是个什么技术，跟js有什么关系，这一周终于接触到了。他是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。自己跟着vue.js的官网https://cn.vuejs.org/进行学习，主要学习了其中的一些基本渲染、事件处理、表单输入绑定、计算属性与观察者等等。在学习过程中自己也遇到了一些困难，比如在学习组件组合使用的时候，还是感觉比较吃力的，主要原因还是认为自己并没有将最基础的知识点看透搞清楚，看懂了个大概就觉得自己掌握了，所以现在要求自己不管多么基础的东西自己一定要去看更要去看懂看透，这样才能够运用于实际。
下面先贴个简单的小例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <body>
        <div id="content">
            <mycomponent label="价格" v-model="price"></mycomponent>
            <mycomponent label="折扣" v-model="discount"></mycomponent>
            <span>总计:{{total}}</span>
        </div>
    </body>
    <script>

        Vue.component('mycomponent', {
            template: '<div>\
            <span>{{label}}</span>\
            <span>$</span>\
            <input\
                ref="input"\
                v-bind:value="value"\
                v-on:input="updateValue($event.target.value)"\
            />\
            </div>',
            //props父组件向自组件传递数据
            props: {
                value:{
                default:0.00    
                },
                label: {
                    type: String
                }
            },
            methods: {
                updateValue: function(value) {
                    var formattedValue = value
                        .trim()
                        // 保留 2 位小数
                        .slice(
                            0,
                            value.indexOf('.') === -1 ?
                            value.length :
                            value.indexOf('.') + 3
                        )
                    // 如果值尚不合规，则手动覆盖为合规的值
                    if(formattedValue !== value) {
                        this.$refs.input.value = formattedValue
                    }
                    // 通过 input 事件带出数值
                    this.$emit('input', Number(formattedValue))
                }
            }
        })


        var vm=new Vue({
            el: '#content',
            data: {
                price: 0,
                discount: 0
            },
            computed:{
                total:function(){
                return this.price-this.discount;
            }
            }
        })
    </script>

</html>

这里写图片描述

详细vue.js学习请参考vue.js官方网站

2．周四开始复习了Spring、springmvc框架，自己将之前学的一些jquery的表单验证以及bootstarp知识结合Springmvc框架做了一个对表单用户名的验证的小例子，从这个小例子里自己也学到不少的新知识，比如mvc框架中的@ResponeBody注解，该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。使用时机：返回的数据不是html标签的页面，而是其他某种格式的数据时（如json、xml等）使用。这次正好验证插件使用remote异步验证用户名时用到，他所需要服务端返回false或者true来进行验证，而一般情况下mvc返回的字符串都会通过视图解析器解析成jsp或者html页面，所以必须要使用这个注解才能越过试图解析器的作用，先上代码：

//前台代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/holder.min.js"></script>
<script src="bs/js/jquery-3.0.0.min.js"></script>
<script src="bs/js/jquery.validate.js"></script>
<script src="bs/js/bootstrap.js"></script>
<style type="text/css">
#login {
    margin-top: 100px;
}
.error {
    color: red;
}
</style>
</head>
<script type="text/javascript">
    $(function() {
        $("#ff").validate({
            rules : {
                username : {
                    required : true,
                    rangelength : [ 4, 12 ],
                    remote : {
                        url : "loginvalidate.do", //后台处理程序
                        type : "get", //数据发送方式
                        data : { //往后台传送的数据
                            username : function() {
                                return $("#name").val();
                            }
                        }
                    }
                }
            },
            messages : {
                username : {
                    required : "请填写用户名",
                    rangelength : $.validator.format("用户名长度为{4}-{12}个字符"),
                    remote : "该名称已经存在"
                }
            }
        });
    });
</script>

<body>
    <div class="container">
        <center>
            <h1 class="page-header">用户中心</h1>
        </center>
        <div class="input-group">
            <span class="input-group-addon">Who Is you?</span> <input type="text"
                class="form-control" placeholder="name" />
        </div>
        <div class="col-md-4 col-md-offset-4" id="login">
            <form id="ff" action="login.do" method="get">
                <div class="form-group has-success has-feedback">
                    <label for="">用户名:</label> <input type="text"
                        class="form-control input-lg" name="username"
                        placeholder="username" id="name" /> <span
                        class="glyphicon glyphicon-user form-control-feedback"></span> <span
                        id="helpBlock2" class="help-block">A block of help textthat
                        breaks onto a new line and may extend beyond one line.</span>
                </div>
                <div class="form-group has-success has-feedback">
                    <label for="">密码:</label> <input type="password"
                        class="form-control input-lg" name="pwd" placeholder="password" />
                    <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" name="confirm"
                        value="OK" /> <input type="button" class="btn btn-danger"
                        value="Cancel" name="cancel" />
                </div>
            </form>
        </div>
    </div>
</body>

</html>

//后端代码
package www.zuo.Controller;

import java.util.Arrays;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class LoginController
{

    @RequestMapping("/loginvalidate.do")
    @ResponseBody
    public String loginvalidate(HttpServletRequest request) {
        String name=request.getParameter("username");
        List<String> list=Arrays.asList("deng_paopao","zuo_paopao");
        if (list.contains(name)) {
            return "false";
        }else {
            return "true";
        }
    }

    @RequestMapping("/login.do")
    public String login() {
        return "success";
    }
}

这里写图片描述

注意：@RequestBody
作用：
i) 该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；

ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

使用时机：
A) GET、POST方式提时，根据request header Content-Type的值来判断:application/x-www-form-urlencoded，可选（即非必须，因为这种情况的数据@RequestParam, @ModelAttribute也可以处理，当然@RequestBody也能处理）；
multipart/form-data, 不能处理（即使用@RequestBody不能处理这种格式的数据）；
其他格式，必须（其他格式包括application/json, application/xml等。这些格式的数据，必须使用@RequestBody来处理）；
B) PUT方式提交时，根据request header Content-Type的值来判断:
application/x-www-form-urlencoded，必须；
multipart/form-data, 不能处理；
其他格式，必须；
说明：request的body部分的数据编码格式由header部分的Content-Type指定；