Vue简介

最新推荐文章于 2022-12-09 20:20:00 发布

dexi.Chi 攻城狮

最新推荐文章于 2022-12-09 20:20:00 发布

阅读量465

点赞数 4

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43949154/article/details/104129929

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

Vue

在这里插入图片描述
首先我下载了一个vue.js，然后用的软件是Webstrom开发。而外用vscode也可以但是需要去cmd配置环境变量我没有使用(就是懒)，还有另一个可以用IDEA开发，这个本人试过但是并没有必要毕竟IDEA用它写后台写js练习有点小题大做了。
推荐用Webstrom来练习，去官网下载就可以。以下是两个页面的截图。
Webstrom界面
在这里插入图片描述
IDEA界面

vue的入门

Vue概述
1. vue的插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--Vue插值表达式，把data中定义的数据显示到此处-->
    {{ message }}
    <!--三元运算符-->
    {{true ? "ok" : "no"}}
    {{false ? "ok" : "no"}}
    <!--数学运算-->
    {{number * 3.14}}
    <!--插值表达式不支持 {{var a = 1; }} {{if(a = 10){}}}-->
</div>
</body>
<script>
    //view model
    //创建VUE对象
    new Vue({
        el:'#app',//由vue接管id为app区域
        data:{
            message:'Hello Vue!',  //注意：此处不要加分号 用逗号分割
            number:100
        },
    });
</script>
</html>

2. vue的v-on绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-on:click</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
    <button v-on:click="fun1('vue v-on')">vue的onclick</button>
</div>
</body>
<script>
    //view model
    //创建VUE对象 里面就是json格式  key：value
    new Vue({
        el:'#app',//由vue接管id为app区域
        data:{
            message:'Hello Vue!',  //注意：此处不要加分号 用逗号分割
        },
        methods:{
            fun1:function(msg){
                alert("Hello");
                this.message = msg;
            }
        }
    });
</script>
</html>

3. vue的v-on键盘事件和阻止事件默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-on:keydown</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    Vue-->
    Vue:<input type="text" v-on:keydown="fun($event)">
    <hr/>
<!--    传统-->
    传统JS:<input type="text" onkeydown="showKeyCode()">
</div>
</body>
<script>
    //view model
    //创建VUE对象 里面就是json格式  key：value
    new Vue({
        el:'#app',//由vue接管id为app区域
        methods:{
            /* $event它是vue中的事件对象，和我们传统js的event对象是一样的
            */
            fun:function(event){
                var keyCode = event.keyCode;
                if(keyCode < 48 || keyCode > 57){
                    //不让键盘的按键起作用
                    event.preventDefault();
                }
            }
        }
    });
   **加粗样式** //传统js键盘按下事件
    function showKeyCode(){
        //event对象和document对象以及window对象是一样的，可以不用定义直接使用
        var keyCode = event.keyCode;
        if(keyCode < 48 || keyCode > 57){
            //不让键盘的按键起作用
            event.preventDefault();
        }
        // alert(keyCode);

        // if(event.keyCode == 13){
        //     alert("你按的是回车");
        // }
    }
</script>
</html>

4. vue的v-on鼠标移动事件和阻止事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-on:onmouseover</title>
    <script src="js/vue.js"></script>
    <style>
        #div{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
<!--    <div v-on:mouseover="fun1" id="div">-->
<!--        <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>-->
<!--    </div>-->
    <div @mouseover="fun1" id="div">
        <textarea @mouseover="fun2($event)">这是一个文件域</textarea>
    </div>
    <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();
            }
        }
    });
    //传统方式
    function divmouseover(){
        alert("鼠标移动到div上");
    }
    function textareamouseover(){
        alert("鼠标移动到textarea上");
        event.stopPropagation();
    }
</script>
</html>

5. vue中的事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on:事件修饰符</title>
    <script src="js/vue.js"></script>
    <style>
        #div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
<!--        <form @submit.prevent action="http://www.baidu.com" method="post">-->
<!--            <input type="submit" value="提交">-->
<!--        </form>-->
        <form action="http://www.baidu.com" method="post" onsubmit="return checkForm()">
            <input type="submit" value="提交">
            <hr/>
            <div @mouseover="fun1" id="div">
                <textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
            </div>
        </form>

    </div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        methods:{
            fun1:function(){
                alert("鼠标移动到div上");
            },
            fun2:function(event){
                alert("鼠标移动到textarea上");
            }
        }
    });
    //传统js方式
    function checkForm(){
            alert(1);
            //表单验证必须有一个明确的boolean类型返回值，在应用验证方法时必须加上 return 方法名称
            return false;
    }
</script>
</html>

6. vue中v-text和v-html以及v-bind的使用
v-text、v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-text和v-html</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-text="message"></div>
    <div v-html="message"></div>
<!--    <div id="div1"></div>-->
<!--    <div id="div2"></div>-->
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:"<h1>Hello</h1>"
        }
    });
    //传统js方式的innerText和innerHTML
    window.onload = function () {
        document.getElementById("div1").innerHTML="<h1>Hello</h1>"
        document.getElementById("div2").innerText="<h1>Hello</h1>"
    }
</script>
</html>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <font size="5" v-bind:color="ys1">大连</font>
    <font size="5" :color="ys2">青岛</font>
</div>
</body>
<script>
    //view model
    //插值表达式不能用于html标签的属性取值
    //要想给html标签的属性设置变量的值，需要使用v-bind
    //v-bind 也可以简化 直接使用：
    new Vue({
        el:"#app",
        data:{
            ys1:"red",
            ys2:"green"
        }
    });
</script>
</html>

7. vue的按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-on:按键修饰符</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    Vue:<input type="text" v-on:keydown.enter="fun1">
<!--    Vue:<input type="text" @keydown.enter="fun1">-->
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("按下的是回车");
            }
        }
    });
</script>
</html>

8. vue中的v-for的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr ">{{item}}={{index}}</li>
        </ul>
    </div>
    <div id="spp">
        <ul>
            <li v-for="(key,value) in product ">{{key}}={{value}}</li>
        </ul>
    </div>
    <div id="dpp">
        <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:{
            arr:[1,2,3,4,5]
        }
    });
    new Vue({
        el:"#spp",
            data: {
                product: {
                    id: 1,
                    name: "笔记本电脑",
                    price: 5000
                }
            }
    });
    new Vue({
        el:"#dpp",
        data: {
            products:[
                {id: 1,name: "戴尔笔记本电脑",price: 8000},
                {id: 2,name: "苹果笔记本电脑",price: 10000},
                {id: 3,name: "联想笔记本电脑",price: 6000}
            ]
        }
    });
</script>
</html>

v-for
9. vue中的v-mode的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-model</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <form action="" method="post">
        用户名:<input type="text" name="username" v-model="user.username"><br/>
        密&nbsp;&nbsp;码:<input type="text" name="password" v-model="user.password"><br/>
    </form>
</div>
</body>
<script>
    //view model
    //v-model获取json user.什么就可以取出
    new Vue({
        el:"#app",
        data:{
            user:{
                username:"test",
                password:"root"
            }
        }
    });
</script>
</html>

vue的生命周期介绍

8个生命周期的执行点（4个基本的、4个特殊的）
vue生命周期
在这里插入图片描述
先罗列出生命周期然后一个一个讲解

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

beforeCreate

实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

beforeCreate（创建前）
1.当前生命周期函数主要用来做初始化工作
2.在这个生命周期函数中我们可以创建一个loading

created（创建后）

数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。有人问了，请求都是异步的，并不会阻碍实例加载。这是我个人水平的问题，这边改正，在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。

beforeMount（挂载前）

DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。

mounted（挂载后）

数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。

beforeUpdate（更新前）

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated（更新后）

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

beforeDestroy（销毁前）

这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

Destroyed（销毁后）

说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。

代码
在这里插入图片描述

控制台

axios的ajax异步请求

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
axios的gitHub：https://github.com/axios/axios

1. get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
    .then(function(response){
        console.log(response);
    })
    .catch(function(err){
        console.log(err);
    })
//以上请求也可以通过这种方式来发送
axios.get('/user',{
    params:{
        ID:12345
    }
})
.then(function(response){
    console.log(response);
})
.catch(function(err){
    console.log(err);
})

2.post请求

axios.post('/user',{
    firstName:'Fred',
    lastName:'Flintstone'
})
.then(function(res){
    console.log(res);
})
.catch(function(err){
    console,log(err);
})

3. 为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

综合案例(完成用户的查询与修改操作)

前台Vue，后台SSM

后台(前提是完成配置文件):

pom.xml 配置mybatis、c3p0、slf4j等等
放在resources中:
db.properties

applicationContext.xml 配置要扫描的包、加载配置文件(db.properties)、配置MyBatis的Session工厂数据库连接池、配置数据源、配置Mapper扫描器、配置事务管理器、配置事务的通知、配置aop

注意：tx:annotation-driven可以去掉因为下方都配置了

数据库的设计与表结构

CREATE DATABASE vuejsdemo;
USE vuejsdemo;
CREATE TABLE USER(
	id INT(11) PRIMARY KEY AUTO_INCREMENT,
	age INT(11),
	username VARCHAR(20),
	PASSWORD VARCHAR(50),
	email VARCHAR(50),
	sex VARCHAR(20)
)ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO USER VALUES ('1','33','张老师','123','zzz@163.com','男');
INSERT INTO USER VALUES ('1','23','李老师','123','lll@163.com','女');
INSERT INTO USER VALUES ('1','36','王老师','123','www@163.com','男');

User类

import java.io.Serializable;

public class User implements Serializable{
    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String sex;
    private String email;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

}

IUserDao.java(持久层)

import java.util.List;
/*
* 用户的持久层接口
* */
public interface IUserDao {
    /*
    * 查询用户列表
    * */
    @Select("select * from User")
    List<User> findAll();
    /*
    * 根据ID查询
    * */
    @Select("select * from User where id = #{userId}")
    User findById(Integer userId);
    /*
    * 更新用户
    * */
    @Update("update User set username=#{username},password=#{password},age=#{age},sex=#{sex},email=#{email} where id=#{id}")
    void updateUser(User user);
}

IUserService(业务层)

import java.util.List;
/*
* 用户的业务层接口
* */
public interface IUserService {
    /*
     * 查询用户列表
     * */
    List<User> findAll();
    /*
     * 根据ID查询
     * */
    User findById(Integer userId);
    /*
     * 更新用户
     * */
    void updateUser(User user);
}

userServiceImpl.java

package service.impl;

import dao.IUserDao;
import dao.User;
import service.IUserService;

import java.util.List;
@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    private IUserDao userDao;

    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }

    @Override
    public User findById(Integer userId) {
        return userDao.findById(userId);
    }

    @Override
    public void updateUser(User user) {
        userDao.updateUser(user);
    }
}

UserTest.java(测试)

package com.test;
import dao.User;
import service.IUserService;
import java.util.List;
/*
* 用户的业务层测试
* */
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:applicationContext.xml")
public class UserTest {
//    自动按类型注入
    @Autowired
    private IUserService userService;

    @Test
    public void testFindAll(){
        List<User> users = userService.findAll();
        System.out.println(users);
    }

    @Test
    public void testFindById(){
        User user = userService.findById(userId : 1);
        System.out.println(user);
    }

    @Test
    public void testUpdate(){
        User user = userService.findById(userId : 1);
        System.out.println("修改之前的用户"+user);

        user.setAge(55);
        userService.updateUser(user);
        
        User user = userService.findById(userId : 1);
        System.out.println("修改之后的用户"+user);
    }
}

在这里插入图片描述

前台

1. 配置web.xml(手动指定spring配置文件位置、配置spring提供的监听器、配置spring MVC的核心控制器、配置spring MVC编码过滤器、)
在这里插入图片描述

2. 在resources下放入springmvc.xml

要想专门扫面controller就在base-package下再多加个子包例如web.controller 建一个UserController.java

package web.controller;
import dao.User;
import java.util.List;

@Controller
@RequestMapping("/user")
@ResponseBody
public class UserController {
    @Autowried
    priavte IUserService userService;

    /*
    * 查询所有
    * */
    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    /*
    * 根据id查询
    * */
    @RequestMapping("/findById")
    public User findById(Integer id){
        return userService.findById(id);
    }
    @RequestMapping("/updateUser")
    public void updateUser(@RequestBody User user){
        userService.updateUser(user);
    }
}

在这里插入图片描述
user.js

new Vue({
    el:"#app",
    data:{
        user:{
            id:"",
            username:"",
            password:"",
            email:"",
            age:"",
            sex:""
        },
        userList:[]
    },
    methods:{
        findAll:function(){
            //在当前方法中定义一个变量，表明是Vue对象
            var _this = this;
            axios.get('/vue/user/findAll.do')
                .then(function(response){
                    //handle success 请求成功干什么
                    _this.userList = response.data;//响应数据给userList赋值
                    console.log(response);
                })
                .catch(function(err){
                    //handle error 请求失败干什么
                    console.log(err);
                })
        },
        findById:function(userid){
            //在当前方法中定义一个变量，表明是Vue对象
            var _this = this;
            axios.get('/vue/user/findById.do',{params:{id:userid}})
                .then(function(response){
                    //handle success 请求成功干什么
                    _this.user = response.data;//响应数据给user赋值
                    $("#myModal").modal("show");
                    console.log(response);
                })
                .catch(function(err){
                    //handle error 请求失败干什么
                    console.log(err);
                })
        },
        update:function(user){//post请求
            //在当前方法中定义一个变量，表明是Vue对象
            var _this = this;
            axios.post('/vue/user/updateUser.do',_this.user)//这里的user本质是个json
                .then(function(res){
                    _this.findAll();
                    console.log(res);
                })
                .catch(function(err){
                    console,log(err);
                })
        }
    },
    //这么写编译会报错但是跟下面一样不影响
    // created(){
    //     this.findAll();
    // }
    created:function(){//当页面加载的时候触发请求，查询所有
        this.findAll();
    }
});

在这里插入图片描述

dexi.Chi 攻城狮

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue简介

文章目录Vuevue的入门vue的生命周期介绍axios的ajax异步请求综合案例(完成用户的查询与修改操作)后台(前提是完成配置文件):前台Vue首先我下载了一个vue.js，然后用的软件是Webstrom开发。而外用vscode也可以但是需要去cmd配置环境变量我没有使用(就是懒)，还有另一个可以用IDEA开发，这个本人试过但是并没有必要毕竟IDEA用它写后台写js练习有点小题大做了。...
复制链接

扫一扫