实例"/>
Vue_入门实例
文章目录
- 4.Vue实例
- 4.1.创建Vue实例
- 4.2.模板或元素
- 4.3.数据
- 4.4.方法
- 4.5.生命周期钩子 函数
- 4.5.1.生命周期
- 4.5.2.钩子函数
- 4.5.3.this
- 4.5.4 回顾
- 5.指令
- 5.1.插值表达式
- 5.1.1.大括号
- 5.1.2.插值闪烁--问题
- 5.1.3.v-text和v-html
- 5.2.v-model-双向绑定的指令
- 5.2.1 input
- 5.2.2 checkbox
- 5.2.3 radio
- 5.2.4 textarea
- 5.2.5 select--需要结合属性绑定v-bind和循环v-for
- 5.3.v-on
- 5.3.1v-on:click基本用法，简写@click
- 5.3.2 **v-on:keydown**
- 5.3.3 **v-on:mouseover**和v-on:mouseout
- 5.3.4 js冒泡事件--是一个问题，需要解决
- 5.3.5 **事件修饰符**--vue中解决冒泡等问题的方案
- 5.3.6 **按键修饰符**
- 5.4.v-for
- 5.4.1.遍历数组
- 5.4.2.数组角标
- 5.5.v-if和v-show
- 5.5.1.基本使用
- 5.5.2.与v-for结合
- 5.5.3.v-else
- 5.5.4.v-show
- 5.6.v-bind
- 5.6.1.绑定class样式
- 5.6.2.简写
- 5.7.计算属性--本质是方法，写的时候是方法，用的时候是属性
- 6 VueJS ajax
- 6.1 **axios**-发送ajax的js技术
- 6.2 **引入axios**
- 6.3 **案例**
- 6.3.1 **get请求**
- 6.3.2 **post请求**
- 6.4 **代码：**
- 7 Vue结构的总结
4.Vue实例
4.1.创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({// 选项
})
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
- el
- data
- methods
- …
等等
接下来我们一 一介绍。
4.2.模板或元素
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板：
<div id="app"></div>
然后创建Vue实例，关联这个div
var vm = new Vue({el:"#app"
})
这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
4.3.数据
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app">{{name}}<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({el:"#app",data:{name:"刘德华"}
})
- name的变化会影响到
input的值 - input中输入的值，也会导致vm中的name发生改变
4.4.方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
html:
<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
js写法一：
<div id="app">{{num}}<button v-on:click="add">加</button>
</div>
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{num:0},methods:{add:function(){this.num++;}}});
</script>
js写法二：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="">
<head><meta charset="UTF-8"><title>事件</title><script src="vue-2.6.10.js"></script>
</head>
<body>
<div id="app">num的值:{{num}}<br><!-- v-on :指令， 是Vue中的语法，可以访问data的值--><input type="button" value="+" v-on:click="num++"><input type="button" value="-" v-on:click="num--"><br><!--调用方法--><input type="button" value="+" v-on:click="add()"><input type="button" value="+" v-on:click="add2()"><input type="button" value="-" v-on:click="minus()"></div>
<script>var vm = new Vue({el:"#app",data:{num:1},methods:{add:function () {this.num++},minus(){this.num--},add2: () => vm.num++}})
</script>
</body>
</html>
4.5.生命周期钩子 函数
回顾：servlet的生命周期–生老病死
生命周期函数–钩子函数：当处于Vue实例处于某个阶段的时候，会自动触发该阶段的钩子函数
4.5.1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
生命周期：
生命周期的流程：–每个流程对应一个函数，当vue处于某个阶段的时候，会自动触发该阶段的函数
1 初始化前 --BeforeCreate
2 初始化完成 —发送ajax --created
3 双向数据绑定前/挂载前 —BeforeMount
4 双向数据绑定完成/挂载完成 --Mounted
5 更新前 --BeforeUpdate
6 更新完成–updated
7 销毁前–BeforeDestroy
8 销毁完成–Destroyed
4.5.2.钩子函数
- 例1：created代表在vue实例创建后；
我们可以在Vue中定义一个created函数，代表这个时期的构造函数：
html:
<div id="app">{{hello}}
</div>
js:
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{hello:''},created(){this.hello = 'czdx,一统江湖，千秋万代'}});
</script>
结果：
- 例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script><div id="app">{{msg}}</div>
<script>var vm = new Vue({el:"#app",data:{msg:'传智大学，一统江湖，千秋万代'},methods:{},// 创建前beforeCreate(){showData("创建前",this);},created(){showData("创建完成",this);},// 双向数据绑定前beforeMount(){showData("双向数据绑定前",this)},// 双向数据绑定完成mounted(){showData("双向数据绑定完成",this)},beforeUpdate(){showData("更新前",this)},updated(){showData("更新完成",this)},beforeDestroy(){showData("销毁前",this)},desed(){showData("销毁完成",this)}});// 打印 "创建前" 这几个字// 打印msg的值// 打印 页面id=app的div中的内容// 第一个参数：创建前 创建完成 销毁前 销毁后 ......function showData(process,obj){console.log(process);console.log(obj.msg);console.log(document.getElementById("app").innerHTML)console.log("----------------------------------")}// 更新数据//vm.msg="good. good study day day up."// 销毁数据vm.$destroy();
</script>
</body>
</html>
总结：
1 vue的生命过程很丰富的，每个过程都有要完成的事情
2 created的生命周期：vue已经创建完成，数据已经有了—>通过ajax向后台
往后操作就是进行双向数据绑定
3 beforeCreate：初始化前/创建前，此时data中的数据还没有初始化
created：初始化完成/创建完成,data中的数据已经初始化
beforeMount：双向绑定前
mounted：双向绑定完成，页面会显示data中的数据
beforeUpdate：更新前，此时变量的内容会被更新，但是页面没有变化
updated：更新完成，此时页面会发生改变
beforeDestroy:销毁前
destroyed:销毁完成
4.5.3.this
我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this
var vm = new Vue({el:"#app",data:{hello: '' // hello初始化为空},created(){this.hello = "czdx,一统江湖，千秋万代";console.log(this);}
})
控制台的输出：
总结：
this就是代表当前的vue对象
4.5.4 回顾
1、生命周期 -钩子函数
beforeCreate：初始化前/创建前，此时data中的数据还没有初始化
created：初始化完成/创建完成,data中的数据已经初始化
beforeMount：双向绑定前
mounted：双向绑定完成，页面会显示data中的数据
beforeUpdate：更新前，此时变量的内容会被更新，但是页面没有变化
updated：更新完成，此时页面会发生改变
beforeDestroy:销毁前
destroyed:销毁完成
2、this关键字：this关键字在vue中指vue的实例
5.指令
什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如我们在入门案例中的v-model、v-on…，都是指令。
5.1.插值表达式
5.1.1.大括号
格式：
{{表达式}}
说明：
- 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
- 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
示例：
HTML：
<div id="app">{{name}}</div>
JS:
var app = new Vue({el:"#app",data:{name:"奇哥"}
})
5.1.2.插值闪烁–问题
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。
我们将网速调慢一些，然后试试看刚才的案例：
刷新页面：
5.1.3.v-text和v-html
使用v-text和v-html指令来替代{{}}
作用：用来进行数据呈现的，可以代替{{}}，可以有效的解决插值表达式的闪烁问题
说明：
- v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:
<div id="app"><span v-text="hello"></span><br><span v-html="hello"></span></div>
JS:
var vm = new Vue({el:"#app",data:{hello:'大家好，我是奇哥'}});
效果：
并且不会出现插值闪烁，当没有数据时，会显示空白。
5.2.v-model-双向绑定的指令
刚才的插值表达式、v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
- input-text
- input-password
- select
- textarea
- checkbox
- radio
- components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
5.2.1 input
<div id="app"><input type="text" v-model="num"><h2>{{num}}</h2><input type="button" value="+" v-on:click="num++"><input type="button" value="-" v-on:click="num--">
</div><script>var vm = new Vue({el:"#app",data:{num:1}});</script>
效果：
5.2.2 checkbox
<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你选择了：{{language.join(',')}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}})
</script>
- 多个
CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型 - radio对应的值是input的value值
input和textarea默认对应的model是字符串select单选对应字符串，多选对应也是数组
效果：
5.2.3 radio
<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio" value="female" v-model="sex">女<h2>{{sex}}</h2>
</div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male'}});
</script>
效果：
5.2.4 textarea
<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio" value="female" v-model="sex">女<h2>{{sex}}</h2><textarea v-model="sex"></textarea>
</div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male'}});
</script>
效果：
5.2.5 select–需要结合属性绑定v-bind和循环v-for
<div id="app"><input type="radio" value="male" v-model="sex">男<input type="radio" value="female" v-model="sex">女<h2>{{sex}}</h2><textarea v-model="sex"></textarea><br><select v-model="favor"><option v-for="item in items" :value="item">{{item}}</option></select></div><script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{sex:'male',favor:'弹琴',items:['唱歌','跳舞','弹琴']}});
</script>
5.3.v-on
5.3.1v-on:click基本用法，简写@click
v-on指令用于给页面元素绑定事件。语法：
v-on:事件名="js片段或函数名"
示例：
<div id="app"><!--事件中直接写js片段--><button v-on:click="num++">增加</button><br/><!--事件指定一个回调函数，必须是Vue实例中定义的函数--><button v-on:click="decrement">减少</button><br/><h1>num: {{num}}</h1>
</div>
<script src="vue-2.6.10.js"></script>
<script type="text/javascript">var app = new Vue({el:"#app",data:{num:1},methods:{decrement(){this.num--;}}})
</script>
效果：
另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'
5.3.2 v-on:keydown
表示键盘按下事件。
=4
ascii码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><input type="text" v-model="name" v-on:keydown="show($event)"></div>
<script>new Vue({el:"#app",data:{name:""},methods:{show(e){var keyCode = e.keyCode;console.log(keyCode)}}})
</script>
</body>
</html>
5.3.3 v-on:mouseover和v-on:mouseout
鼠标移入和移出事件区域事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><div style="width: 100px;height: 100px; border: 1px solid red" @mouseover="show()" @mouseout="go()"></div></div>
<script>new Vue({el:"#app",data:{name:""},methods:{show(){console.log("进来了")},go(){console.log("出来了")}}})
</script>
</body>
</html>
5.3.4 js冒泡事件–是一个问题，需要解决
概念：
当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，会触发所有父层或者子层的方法
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js">
</script>
<div id="app"><div style="width: 100px;height: 100px; border: red 1px dashed"@mouseover="over()" @mouseout="out()"><textarea @mouseover="myover($event)"></textarea></div></div>
<script>var vm = new Vue({el:"#app",methods:{over(){console.log("进来了")},out(){console.log("出去了")},myover(e){console.log("进入txt了");// js中冒泡的解决方案// 阻止事件的传播行为e.stopPropagation();}}});
</script></body>
</html>
5.3.5 事件修饰符–vue中解决冒泡等问题的方案
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
**.stop // 停止触发，阻止冒泡修饰符** .prevent // 阻止默认事件发生，阻止事件默认行为
.capture // 捕获 .self //只点自己身上才运行.once // 只执行一次
案例1：
<script src="vue-2.6.10.js">
</script>
<div id="app"><div style="width: 100px;height: 100px; border: red 1px dashed"@mouseover="over()" @mouseout="out()"><textarea @mouseover.stop="myover($event)"></textarea><form @submit.prevent action=""><input type="submit" value="提交"></form><a href="" @click.prevent="show()">百度</a></div></div>
<script>var vm = new Vue({el:"#app",methods:{over(){console.log("进来了")},out(){console.log("出去了")},myover(e){console.log("进入txt了");// js中冒泡的解决方案// 阻止事件的传播行为//e.stopPropagation();},show(){console.log("a标签的点击事件..")// 处理业务逻辑.....}}});</script>案例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="vue-2.6.10.js"></script>
<div id="app"><form @submit.prevent action=""><input type="submit" value="提交"></form></div>
<script>new Vue({el:"#app",data:{name:""},methods:{}})
</script></body>
</html>
5.3.6 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter // 表示键盘的enter键
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta案例：
<script src="vue-2.6.10.js"></script><div id="app"><!-- 随意按什么键都显示ascii码 -->
<input type="text" @keydown="show($event)"><br><!-- 判断是否是enter键 -->
<input type="text" @keydown.13="show($event)"><br><!-- 判断是否是enter键 -->
<input type="text" @keydown.enter="show($event)"></div><script>var vm = new Vue({el:"#app",methods:{show(e){console.log(e.keyCode)}}});
</script>
5.4.v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
5.4.1.遍历数组
语法：v-for=“item in items”
- items：要遍历的数组，需要在vue的data中定义好。
- item：迭代得到的数组元素的别名
示例：ul显示
<div id="app"><ul><li v-for="user in users">{{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>
<script src="vue-2.6.10.js"></script>
<script>var vm = new Vue({el:"#app",data:{users:[{name:"张三",gender:"男",age:21},{name:"李四",gender:"男",age:22},{name:"王二",gender:"女",age:23},{name:"赵六",gender:"男",age:24},{name:"孙七",gender:"男",age:25}]}});
</script>
效果：
示例：表格显示
html代码：
<table border="1" cellpadding="0" cellspacing="0" width="300" height="200"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr v-for="user in users"><td>{{user.name}}</td><td>{{user.gender}}</td><td>{{user.age}}</td></tr></table>
效果：
5.4.2.数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法: v-for="(item,index) in items"
- items：要迭代的数组
- item：迭代得到的数组元素别名
- index：迭代到的当前元素索引，从0开始。
示例
<div id="app"><ul><li v-for="(user,index) in users">{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>
效果：
5.5.v-if和v-show
共同点：都是条件判断
v-if：移除元素
v-show：只是简单的加display:none
5.5.1.基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"示例：
<script src="vue-2.6.10.js"></script>
<div id="app"><input type="button" @click="show = !show" value="点我切换"><h1 v-if="show">你好</h1></div>
<script>new Vue({el:"#app",data:{show:true},methods:{}})
</script>
效果：
5.5.2.与v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：筛选出所有性别为女的人
<script src="vue-2.6.10.js"></script>
<div id="app"><ul><li v-for="(user,index) in users" v-if="user.gender==='女'">{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}</li></ul></div>
<script>new Vue({el:"#app",data:{users:[{name:"tom",gender:"男",age:21},{name:"meiei",gender:"男",age:21},{name:"lily",gender:"女",age:21},{name:"jack",gender:"男",age:21},{name:"lucy",gender:"女",age:21}]},methods:{}})
</script>
5.5.3.v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：
<div v-if="Math.random() > 0.5">Now you see me
</div>
<div v-else>Now you don't
</div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
5.5.4.v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
示例：
<div id="app"><!--事件中直接写js片段--><button v-on:click="show = !show">点击切换</button><br/><h1 v-if="show">你好</h1></div><script src="vue-2.6.10.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{show:true}})</script>
5.6.v-bind
页面的HTML标签有很多属性，如果属性想获取vue中的data的值，怎么处理？
5.6.1.绑定class样式
假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：
<div class="{{mystyle}}"></div>
因为插值表达式不能用在属性的值中。
案例：
<script src="vue-2.6.10.js"></script>
<div id="app"><span v-bind:class="a">传智大学</span><br><span v-bind:class="b">传智大学</span><br><span :class="c">传智大学</span><br>
</div>
<script>new Vue({el:"#app",data:{a:"a",b:"b",c:"c"},methods:{}})</script>
<style>.a{color: red;}.b{color: yellow;} .c{color: orchid;}
</style>
代码：
<script src="vue-2.6.10.js"></script>
<div id="app"><!--学习过的指令v-onv-modelv-textv-htmlv-forv-ifv-showv-else{{}}--><!-- 对于属性的值，插值表达式是无法获取的 --><!--错误的方式：<a href="{{url}}">百度</a><br>-->正确的方式：<a v-bind:href="url">百度</a><!-- class是标签的属性，属性如何从vue中获取值呢？ --><div :class="mydiv"></div>
</div>
<script>var vm = new Vue({el:"#app",data:{url:"",mydiv:"redDiv"}});
</script><style type="text/css">.redDiv{width: 100px;height: 100px;border: 1px solid red;}.greenDiv{width: 100px;height: 100px;border: 1px solid green;}
</style>
5.6.2.简写
v-bind:class可以简写为:class
- 综合案例：下拉列表框改变div样式
<script src="vue-2.6.10.js"></script>
<div id="app"><!-- 当下拉列表框改变的时候，div的样式要发生改变也就是要将下拉列表框新选中的样式作用div，也就是将值给mydiv--><select v-model="mydiv"><!-- value是option的HTML属性 v-for是vue指令，两者能直接互相访问吗？答：不可以 --><option v-for="style in myStyles" v-bind:value="style">{{style}}</option></select><!-- class是标签的属性，属性如何从vue中获取值呢？ --><div :class="mydiv"></div>
</div>
<script>var vm = new Vue({el:"#app",data:{mydiv:"redDiv",myStyles:['redDiv','greenDiv','blackDiv','yellowDiv'],mySelectValue:''}});
</script><style type="text/css">.redDiv{width: 100px;height: 100px;background: red;}.greenDiv{width: 100px;height: 100px;background: green;}.blackDiv{width: 100px;height: 100px;background: black;}.yellowDiv{width: 100px;height: 100px;background: yellow;}
</style>
5.7.计算属性–本质是方法，写的时候是方法，用的时候是属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，需要显示在页面，默认的显示方式是：
如果只想显示年月日呢？
<body><script src="vue-2.6.10.js"></script>
<div id="app">{{birthday.getFullYear() +"-" + birthday.getMonth() + "-" +birthday.getDate()}}
</div>
<script>new Vue({el:"#app",data:{birthday:new Date()},methods:{}})
</script>
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
<script src="vue-2.6.10.js"></script>
<div id="app">您的生日是： {{birth}}
</div>
<script>new Vue({el:"#app",data:{birthday:new Date()},methods:{},computed:{birth(){return this.birthday.getFullYear() +"-" + this.birthday.getMonth() + "-" +this.birthday.getDate();}}
})
</script>
- 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
页面使用：
效果：
6 VueJS ajax
6.1 axios-发送ajax的js技术
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:
6.2 引入axios
可以用script引入
<script src=".min.js"></script>
引入axios-0.18.0.js
6.3 案例
6.3.1 get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {//200console.log(response);
})
.catch(function (error) {//500console.log(error);
});// 可选地，上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});6.3.2 post请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});
为方便起见，为所有支持的请求方法提供了别名
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]])
6.4 代码：
【需求】：创建data/user.json文件----获取所有用户
使用axios读取user.json文件的内容，并在页面上输出内容。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>vuejs中axios数据调用</title><script src="vue-2.6.10.js"></script><script src="axios-0.18.0.js"></script>
</head><body>
<div id="app">{{message}}
</div>
</body>
<script>var vm = new Vue({el: "#app",data: {message: ''},methods: {init: function(){axios.get("./data/user.json").then(function(response){// alert(response);alert(JSON.stringify(response))alert(response.data[0].username);})}},created: function(){this.init();}});
</script></html>
创建data目录，创建user.json
[{"username":"张三","age":22},{"username":"李四","age":21},{"username":"王五","age":20},{"username":"赵六","age":23}
]
7 Vue结构的总结
<head><meta charset="UTF-8"><title>Title</title><script src="../vue-2.6.10.js"></script>
</head>
<body>
<div id="app"></div>
<script>var vm = new Vue({el:"#app",data:{users:[],// 定义数组user:{},//定义对象username:'',//定义string类型的属性num:10// 定义int类型的属性},methods:{},created(){},//计算属性computed:{}})
</script>
更多推荐
Vue_入门实例
发布评论