Vue入门(一)

最新推荐文章于 2023-02-28 15:25:06 发布

奋斗的小巍

最新推荐文章于 2023-02-28 15:25:06 发布

阅读量398

点赞数 1

分类专栏： Jquery 文章标签： vue入门 vue.js综合案例 vue的指令集

本文链接：https://blog.csdn.net/wangwei_620/article/details/86477243

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.概述

什么是Vue?

VueJs是【数据驱动】的【渐进式】前端框架。

渐进式：1、可以只是用部分功能，而不用全部实现

2、与第三方很好的兼容

VueJs的模型:MVVM模型具体指的是什么?

M model 模型（数据）

V view 视图 (页面)

VM controller 控制 (控制数据到页面的流程)

本质上就是【MVC】，分离数据与视图

二.入门

创建Vue对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vuejs-2.5.16.js" ></script>
		<script type="text/javascript" src="js/axios-0.18.0.js" ></script>
	</head>
	<body>
		<div id="app" >
			<!--注意:{{}}代表的是通过vue获取值,如果在Vue的环境中就可以直接获取值-->
			{{message}}   
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				message:"HelloWorld"
			},
			//定义方法
			methods:{}
		});
	</script>
</html>

插值表达式

在页面上显示data中的数据，可以用插值表达式 {{message}}。
插值表达式中可以是：三元表达式，基本运算符
如：{{istrue?"ok":"not ok"}} {{message+1}}
不是表达式如：if 、var n = 1

三.vuejs的指令集

1.v-on 这个指令主要是监听dom事件,并且触发是运行一些javascript

v-on:click指令

	<body>
		<div id="app" >
			<!--注意:{{}}代表的是通过vue获取值,如果在Vue的环境中就可以直接获取值-->
			{{message}}
			<input type="button" v-on:click="fun('点了 真乖')" value="快来点我呀" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",   //表示当前的div交由vue处理
			//数据
			data:{
				message:"HelloWorld"     //注意不能以分号结尾
			},
			//定义方法
			methods:{
				fun:function(msg){
					this.message= msg;
				}
			}
		});
	</script>
</html>

v-on:keydown

	<body>
		<div id="app" >
			<input type="text" v-on:keydown="fun($event)" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				message:"HelloWorld"
			},
			//定义方法
			methods:{
				fun:function(event){
					if(!(event.keyCode>=48 && event.keyCode<=57)){
						alert(event.keyCode);
						event.preventDefault();//如果输入的是字母就会阻止在框内填入
					}
				}
			}
		});
	</script>
</html>

v-on-mouseover 鼠标悬浮事件

	<body>
		<div id="app" >
			<div v-on:mouseover=fun1() id="div">
				<textarea v-on:mouseover=fun2($event)>这是一个文本区域</textarea>
			</div>
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				message:"HelloWorld"
			},
			//定义方法
			methods:{
				fun1:function(){
					alert("div");
				},
				fun2:function(event){
					alert("textarea");
					event.stopPropagation();//阻止冒泡  事件的传播属性
				}
			}
		});
	</script>
</html>

事件的修饰符:

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或
event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

使用.prevent 来代替 event.preventDefault()

使用 .stop 来代替event.stopPropagation();

还可以使用@来代替 v-on:

	<body>
		<div id="app" >
			<!--点击条提交阻止跳到指定页面-->
			<form @submit.prevent action="http://www.baidu.com" method="get">
				<input type="submit" value="提交"/>
			</form>
			
			<div @click="fun3();">
				<a href="http://spring.io" @click.stop>spring</a><br />
			<input type="text" @keydown.enter="fun4();"/>
			
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				message:"HelloWorld"
			},
			//定义方法
			methods:{
				fun1:function(){
					alert("spring");
				},
				fun4:function(){
					alert("回车");
				}
			}
		});
	</script>
</html>

按键修饰符:

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

v-text 和 v-html:

	<body>
		<div id="app" >
			<div v-text="message"></div><!--直接显示message中的文字-->
			<div v-html="message"></div><!--解析html-->
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				message:"<h1>vue真好用</h1>"
			},
			//定义方法
			methods:{
			
			}
		});
	</script>
</html>

v-bind:

插值表达式不能作用于html属性里面,只是一个单项绑定,只能从data中单项的获取数据

	<body>
		<div id="app" >
			<!--vue的插值表达式不能作用于 html属性里面-->
			<font v-bind:color="color1+color2">spring全家桶</font>
			<font v-bind:color="color2">spring家族</font>
			<input v-bind:value="color2" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				color1:"red",
				color2:"red"
			},
			//定义方法
			methods:{
			
			}
		});
	</script>
</html>

v-model:

数据的双向绑定

	<body>
		<div id="app" >
			<!--v-model数据的双向绑定-->
			姓名:<input type="text" id="username" v-model="user.username" /><br />
			密码:<input type="password" id="password" v-model="user.password" /><br />
			<input type="button" @click="fun()" value="获取" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				user:{username:"",password:""}
			},
			//定义方法
			methods:{
				fun:function(){
					alert(this.user.username+" "+this.user.password);
					this.user.username="tom";
					this.user.password="1234";
				}
			}
		});
	</script>
</html>

v-for:

循环。要循环谁，就写在那个标签里

	<body>
		<div id="app" >
			<ul>
				<li v-for="(v,i) in array">{{v+"---"+i}}</li>
			</ul>
			<ul>
				<li v-for="(p,i) in person">{{p+"--"+i}}</li>
			</ul>
			<table>
				<tr v-for="p in pp">
					<td>{{p.name}}</td>
					<td>{{p.age}}</td>
					<td>{{p.sex}}</td>
				</tr>
			</table>
			<table>
				<tr v-for="p in pp">
					<td v-for="vp in p">{{vp}}</td>
				</tr>
			</table>
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{//我们在data中声明我们需要遍历的数据
				
				array:["aa","bb","cc"],
				person:{name:"tom",age:"21",sex:"男"},
				pp:[{name:"tom1",age:"21",sex:"男"},{name:"tom2",age:"21",sex:"男"},{name:"tom3",age:"21",sex:"男"}]
			},
			//定义方法
			methods:{
				
			}
		});
	</script>
</html>

v-if和v-show:

v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

	<body>
		<div id="app" >
			<span v-if="flag">淘宝</span><br />
			<span v-show="flag">天猫</span><br />
			<input type="button" @click="fun()" value="切换" />
		</div>
	</body>
	<!--Vue的初始化-->
	<script>
		new Vue({
			//挂载  相当于jquery的选择器$("#app")
			el:"#app",
			//数据
			data:{
				
				flag:false
			},
			//定义方法
			methods:{
				fun:function(){
					this.flag=!this.flag;
				}
			}
		});
	</script>
</html>

四.Vue的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中有这些状态，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容
beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创
建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们
就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并
进行各种操作
当我们的data发生改变时，会调用beforeUpdate和updated方
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还
没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到
dom上面，完成更新
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据
与view的绑定，即数据驱动

引入axios:

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

当然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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);
});

post请求:

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

为了方便提供了别名:

为方便起见，为所有支持的请求方法提供了别名
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]])

五.实现综合案列

1.导入数据库:

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `age` int(11) DEFAULT NULL,
  `user_name` varchar(20) COLLATE utf8_bin DEFAULT NULL,
  `pass_word` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `email` varchar(50) COLLATE utf8_bin DEFAULT NULL,
  `sex` varchar(20) COLLATE utf8_bin DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

/*Data for the table `user` */

insert  into `user`(`id`,`age`,`user_name`,`pass_word`,`email`,`sex`) values 
(1,19,'tom','123456','tom@163.com','男'),
(2,20,'jerry','abcdef','jerry@163.com','女');

2.创建springboot工程导入jar包

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.0.RELEASE</version>
    </parent>
    <groupId>com.itheima</groupId>
    <artifactId>day05VueSpringBoot</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <dependencies>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

3.编写持久类

@Entity
public class User implements Serializable {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private Integer age;
    @Column(name = "user_name")
    private String userName;
    @Column(name = "pass_word")
    private String passWord;
    private String email;
    private String sex;

4.编写接口,继承JpaResponsiy

public interface IUserDao extends JpaRepository<User,Integer> {

5.编写service

@Service
public class UserServiceImpl implements UserService {

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

    @Override
    public User findOne(Integer id) {
        Optional<User> optionalUser = userDao.findById(id);
        return optionalUser.isPresent()?optionalUser.get():null;
    }

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

6.编写Controller

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    //查所有的信息
    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    //通过指定id查找
    @RequestMapping("/findOne/{id}")
    public User findOne(@PathVariable Integer id){
        return userService.findOne(id);
    }
    //修改
    @RequestMapping("/updateUser")
    public void updateUser(@RequestBody  User user){
        userService.updateUser(user);
    }

前端页面的编写:

new Vue({
    el:"#app",
    data:{
        userlist:[],
        oneuser:{}
    },
    created: function() {
        this.findAll();
    },
    methods:{
        findAll:function(){
            var url ="user/findAll";
            var _this = this;
            //ajax请求
            axios.get(url)
                .then(function(result){
                    console.log(result);
                    _this.userlist = result.data;
                 })
                .catch(function(err){
                    console.log(err);
                });
        },
        findOne:function (id) {
            var url = "user/findOne/"+id;
            var _this = this;
            //ajax请求
            axios.post(url).then(function (result) {
                _this.oneuser=result.data;
                $("#myModel").modal("show")
            }).catch(function (err) {
                console.log(err);
            })
        },
        updateUser:function () {
            var url = "user/updateUser/";
            var _this=this;
            axios.post(url,_this.oneuser).then(function (result) {
                console.log(result);
                _this.findAll();
            }).catch(function (err) {
                console.log(err);
            })
        }
    }
});

页面修改:

 <tbody>

                                    <tr v-for="userinfo in userlist">
                                        <td><input name="ids" type="checkbox"></td>
                                        <td>{{userinfo.id}}</td>
                                        <td>{{userinfo.userName}}</td>
                                        <td>{{userinfo.passWord}}</td>
                                        <td>{{userinfo.sex}}</td>
                                        <td>{{userinfo.age}}</td>
                                        <td class="text-center">{{userinfo.email}}</td>
                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs">订单</button>
                                            <button type="button" class="btn bg-olive btn-xs">详情</button>
                                            <button type="button" class="btn bg-olive btn-xs" @click="findOne(userinfo.id)">编辑</button>
                                        </td>
                                    </tr>

                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">用户信息</h4>
                                            </div>
                                            <div class="modal-body">

                                                <div class="box-body">
                                                    <div class="form-horizontal">
<input type="text" class="form-control" v-model="oneuser.id">

                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">用户名:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="oneuser.userName">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">密码:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="oneuser.passWord">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">性别:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="oneuser.sex">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">年龄:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="oneuser.age">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="col-sm-2 control-label">邮箱:</label>
                                                            <div class="col-sm-5">
                                                                <input type="text" class="form-control" v-model="oneuser.email">
                                                            </div>
                                                        </div>

  <div class="modal-footer">
                                                <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-outline" data-dismiss="modal" @click="updateUser()" >修改</button>
                                            </div>