Vuejs

最新推荐文章于 2024-06-07 10:08:27 发布

小橙汁儿

最新推荐文章于 2024-06-07 10:08:27 发布

阅读量1.9k

点赞数 1

分类专栏： Java技术文章标签： Vuejs java

本文链接：https://blog.csdn.net/qq_42121746/article/details/102736404

版权

Java技术专栏收录该内容

47 篇文章 0 订阅

订阅专栏

vuejs简单入门

1.VueJS 概述与快速入门

1.1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
Vue官网=====>

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
抽象化，让我们将视图 UI 和业务逻辑分开
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端
开发更加高效、便捷

在这里插入图片描述

1.3 VueJS 快速入门

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
}
});
</script>
</body>
</html>

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对
象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个
表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2.VueJS 常用系统指令

2.1 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

2.1.1 v-on:click

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('good')">点击改变</button>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
},
methods:{
fun1:function(msg){
this.message=msg;
}
}
});
</script>
</body>
</html>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例2</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text"v-on:keydown="fun2('good',$event)">
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun2:function(msg,event){
if(!
((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){
event.preventDefault();
}
}
}
});
</script>
</body>
</html>

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例3</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
</div>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("div");
},
fun2:function(event){
alert("textarea");
event.stopPropagation();//阻止冒泡
}
}
});
</script>
</body>
</html>

2.1.4 事件修饰符

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 事件修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itcast.cn" method="get">
<input type="submit" value="提交"/>
</form>
<div @click="fun1">
<a @click.stop href="http://www.itcast.cn">itcast</a>
</div>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("hello itcast");
}
}
});
</script>
</body>
</html>

2.1.5 按键修饰符

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 按钮修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="fun1">
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function(){
alert("你按了回车");
}
}
});
</script>
</body>
</html>

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

2.2 v-text与v-html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-html与v-text</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:"<h1>传智黑马</h1>"
}
});
</script>
</body>
</html>

2.3 v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font>
<font size="5" :color="ys2">黑马程序员</font>
<hr>
<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
ys1:"red",
ys2:"green",
id:1
}
});
</script>
</body>
</html>

v-bind简写方式

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

2.4 v-model

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
姓名:<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>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
user:{username:"",password:""}
},
methods:{
fun:function(){
alert(this.user.username+" "+this.user.password);
this.user.username="tom";
this.user.password="11111111";
}
}
});
</script>
</body>
</html>

2.5 v-for

操作array

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{{item+" "+index}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
list:[1,2,3,4,5,6]
}
});
</script>
</body>
</html>

操作对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in product">{{key}}--{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
product:{id:1,pname:"电视机",price:6000}
}
});
</script>
</body>
</html>

操作对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="p in products">
<td>
{{p.id}}
</td>
<td>
{{p.pname}}
</td>
<td>
{{p.price}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000},
{id:3,pname:"电风扇",price:600}]
}
});
</script>
</body>
</html>

2.6 v-if与v-show

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
<script>
new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
flag:false
},
methods:{
toggle:function(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>

3.VueJS生命周期

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

在这里插入图片描述
vue在生命周期中有这些状态，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子
中，vue实例到底执行了那些操作，我们先看下面执行的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.message)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
vm.message="good...";
vm.$destroy();
</script>
</body>
</html>

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的绑定，即数据驱动

4.VueJS ajax

4.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios .
4.2 axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
Axios的GitHub地址===>
4.2.1 引入axios
首先就是引入axios,如果你使用es6，只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

4.2.3 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs

vuejs简单入门1.VueJS 概述与快速入门1.1 VueJS介绍Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue官网=====>1.2 MVVM模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC...
复制链接

扫一扫

专栏目录