vue
简介
- 前端渐进式javaScript框架
- soc原则 (关注点分离原则)只关心视图层
- 分层(m v vm)
- 核心:前后端分离
官方:cn.vuejs.org
结构
- 网络通信:axios/ajax
- 页面跳转:vue-router
- 状态管理:vuex(所有的东西统一管理)
- vue-ui:ICE
科普:javaScript框架
- jQuery:大家熟知的javaScript框架,优点是简化DOM操作,缺点DOM操作太频繁,影响前端性能
- Angular:Google收购的前端框架,java开发,特点是MVC模式并且增加了模块化开发的理念,采用TypeScropt开发,缺点是版本迭代不合理
- React:faceboot出品,一款高性能的js前端框架,特点是【虚拟DOM】,用于减少DOM操作,内容中模拟DOM操作,有效的提升了前端渲染效率,缺点是 需要学习一门【jsx】语言
- Axios:前段通信框架,因为vue就是为了处理DOM,所以不具备通信能力,所以需要额外使用通信框架,也可以使用AJAX
科普:ui框架
- Ant-design:阿里巴巴出品,基于react的ui框架
- ElementUI、iview、ice:饿了么出品基于vue的ui框架
- bootstrap:twitter推出的一个用于前端开发的开源工具包
- AmazeUI:又叫"妹子ui"一款HTML5跨屏前端框架
科普:构建工具
- babel:js编译工具,主要用于浏览器不支持的es新特性,比如用于编译TypeScript
- webPack:模块打包器,主要作用是打包、压缩、合并、及按顺序加载
科普:主流前端框架
- iView:是一个强大的基于vue的ui的库,主要特点是移动端支持多
- 官网:iviewui.com
- ElementUI:饿了么前端开源维护的Vue UI组件库,支持桌面端较多
MVVM模式
model、view、viewmodel
Model:模型层,在这里表示javaScript对象
View:视图层,在这里表示DOM(html操作的元素)
ViewModel:连接视图和数据的中间件,vue.js就是MVVM的VIewModel层的实现者
注意:在mvvm架构中,不允许数据和视图直接通信,只能通过VIewModel来通信于是就定义了一个Observer观察者
-
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
-
ViewModel能够监听到试图的变化,并能够通知数据发生的变化
所以他的核心就是实现DOM监听与数据绑定
第一个VUE
-
安装插件 idea =》 设置 =》PIugins =》vue.js 安装重启
-
引入vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-
第一个实例
<div id="app"> {{ message }} </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
用法
绑定属性 v-bind:属性名=""
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{ message }}
<hr/>
<div id="app">
<span v-bind:title="message">
哈哈哈哈哈哈
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
判断语句 v-if=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="message">yse</h1>
<h1 v-else>no</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:true
}
})
</script>
</html>
for语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items"> {{item.message}}------{{index}}</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
items:[
{message:"aaa"},{message:"bbbb"},{message:"ccccc"}
]
}
})
</script>
</html>
监听事件 用v-on指令监听dom事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">aaa</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message:"哈哈哈哈"
},
methods:{//方法定义在method中
sayHi:function () {
alert(this.message);
}
}
})
</script>
</html>
双向数据绑定 使用 v-model 指令与表单元素进行绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入文本:<input type="text" v-model="message">
<h1>{{message}}</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message:"哈哈哈哈"
}
})
</script>
</html>
vue它的7个属性
-
el属性
-
- 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
-
data属性
-
- 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
-
template属性
-
- 用来设置模板,会替换页面元素,包括占位符。
-
methods属性
-
- 放置页面中的业务逻辑,js方法一般都放置在methods中
-
render属性
-
- 创建真正的Virtual Dom
-
computed属性
-
- 用来计算
-
watch属性
-
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数,一个返回新值,一个返回旧值
组件
什么是组件
组件时可复用的vue实例,说白了就是一组可以重复使用的模板,跟jstl的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙,通常一个应用会以一颗嵌套的组件树的形式来组织:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<didi v-for="item in items" v-bind:item1="item"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
//定义一个vue组件component
Vue.component("didi",{
props:["item1"],//接收参数
template:`<h1>{{item1}}</h1>`//组件
});
var app = new Vue({
el: "#app",
data: {
items:["aaaaa","bbbbb","cccccc"]
}
})
</script>
</html>
Axios异步通信
什么是Axios
Axios是一个开源的可以在浏览器端和NodeJS的异步通信框架,她主要的作用就是实现了AJAX异步通信,其功能特点如下:
-
从浏览器中创建XMLHttpRequests
-
从node.js创建http请求
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换json数据
-
客户端支持防御xsrf(跨站请求伪造)
中文文档:http://www.axios-js.com
为什么要使用Axios
由于vue.js是一个视图层框架并且作者(尤雨溪)严格遵守SoC(关注度分离原则),所以vue.js并不包括AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为Vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架,少用jQuery,因为他操作Dom太频繁!
如何使用
导入js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用钩子函数第一个axios
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
mounted(){
axios.get("data.json").then(Response=>(console.log(Response.data)));
}
});
</script>
</html>
data.json 数据
{
"name": "弟弟们",
"url": "http://www.didimen.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "山西",
"city": "太原",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com"
},{
"name": "bing",
"url": "https://cn.bing.com/"
},{
"name": "baidu",
"url": "https://www.baidu.com"
}
]
}
vue生命周期
vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是vue的生命周期。通俗说就是vue实例从创建到销毁的过程,就是生命周期。
在vue的整个生命周期中,他提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应中的this直接指向的是vue的实例。
解决闪烁问题
<!--解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app" v-cloak>
<div>
{{info.name}}
</div>
vue:计算属性、内容发布、自定义事件
什么是计算属性
计算属性的重点突出在属性两个字上(属性是名词),首先它是一个属性其次这个属性有计算的能力(计算是动词),这里的计算就是一个函数;简单说,他就是一个能够将计算结果缓存起来的属性(将行为装换成了静态的属性),仅此而已;可以想象成缓存 内存中运行(虚拟DOM)
-
计算属性:methods,computed方法名不能重名 ,重命之后只会调用methods中
-
methods执行需要带括号,computed执行不需要带括号
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--解决闪烁问题--> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app" v-cloak> <p>currentTime1:{{currentTime2}}</p> <p>currentTime1:{{currentTime1()}}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var app = new Vue({ el: "#app", data:{ message:"aaa" }, methods:{ currentTime1:function () { return Date.now();//返回一个时间戳 } }, computed:{//计算属性:methods,computed方法名不能重名 ,重命之后只会调用methods中 currentTime2:function () { this.message; return Date.now();//返回一个时间戳 } } }); </script> </html>
重点:计算属性的主要特性就是为了将不经常变化的计算结果缓存起来,节约系统开销
插槽
可以应用在组合组件场景中(开了一个口方便之后的插入组件)
ntTime1:function () {
return Date.now();//返回一个时间戳
}
},
computed:{//计算属性:methods,computed方法名不能重名 ,重命之后只会调用methods中
currentTime2:function () {
this.message;
return Date.now();//返回一个时间戳
}
}
});