Vue
第一个Vue程序
1.在idea中下载vue插件
2.新建一个html文件导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> //官网中有具体新版本,可自行去查询
3.写下如下程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{
{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model :数据
data:{
message:"hello,vue!"
}
});
</script>
</body>
MVVM模式
MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用
ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个 Observer观察者
- ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化,并能够通知数据发生改变
Vue组件
<!--view层 模板-->
<div id="app" >
<lqc v-for="item in items" v-bind:data="item"></lqc>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
Vue.component('lqc',
{
props: ['data'],
template: '<li>{
{data}}</li>'
});
var vm = new Vue({
el:"#app",
data: {
items: ["一一","二二","三三"]
}
});
</script>
Axios异步通信
是什么
【我自认为就是,前端页面数据,同json文件中的数据,双向绑定】****【axios.get(‘…/data.json’).then(response=>(this.info=response.data));这里是关键,钩子函数】
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
为什么要用Axios
由于Vue.js是一个视图层框架并且作者(尤雨溪)严格准守SoC(关注度分离原则)),所以vue.js并不包含AJAX的通信功能,为了解决通信问题,作者单独开发了一个名为vue-resource的插件,不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery,因为它操作Dom太频繁!
第一个Axios应用程序
我们开发的接口大部分采用JSON格式
在此为模拟接口数据,创建一个data.json的文件,放在项目的根目录下
{
"name": "lqc啊",
"url": "https://www.baidu.com",
"address": {
"street": "西街",
"house": "蘑菇屋"
}
}
测试代码
<body>
<!--view层 模板-->
<div id="app" >
<div>{
{info.name}}</div>
<div>{
{info.address.house}}</div>
<a v-bind:href="info.url">click me</a>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!--2.导入Axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"