目录
Vue的基本用法
模板语法
指令v-bind
指令v-on:click
指令v-model
条件渲染
列表渲染
网络请求
1.安装:
2.引入(main.js中):
3.使用:
Vue的基本用法
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
模板语法
插值语法(插值表达式)
由于由于vue是基于数据驱动的,所以当我们需要在页面中显示一段文本时,可以使用如下操作:
export default {
data(){
return{
msg:"hello vue"
}
},
methods:{
handleClick(){
this.msg = "hello change"
}
}
在模板中输出msg中的值:可以使用{{}},需要注意的是 我们的模板中必须有一个根节点,也只能有一个根节点 我们的操作都要在这个根节点中。
<template>
<div>{{msg}}</div>
</template>
指令v-bind
v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值
指令v-on:click
设置点击事件
指令v-model
用于表单数据的双向绑定
条件渲染
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
也可以用 v-else
添加一个“else 块”:
列表渲染
用 v-for 指令根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组,item 是数组元素迭代的别名。
网络请求
- cdn地址:https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js
- 引入axios (Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中)
1.安装:
npm install axios --save
2.引入(main.js中):
import Axios from "axios"
Vue.prototype.$axios = Axios
3.使用:
后台代码
1.通过生命周期做网络请求:get请求
mounted(){
this.$axios.get("http://localhost:8088/spring/getnewsList")
.then(function(res){
console.log(res.data)
that.newList = res.data
})
//捕获错误
.catch(function(error){
console.log(error)
})
}
2.get、post请求传参
后台代码
前端代码
get请求
axios.get('/user?ID=12345')
//或者
axios.get('/user', {
params: {
ID: 12345
}
})
post请求
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php",qs.stringify{
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
})
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})
3.全局配置
写在main.js中
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
4.拦截器
写在main.js中:发送请求或响应(接收)请求对数据进行判断
// 拦截器
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么,利用qs进行格式转换
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(!response.data){
return {
msg:"数据返回不合理"
}
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
5.跨域处理
写在config文件的index.js中 配置:
proxyTable: {
'/doubai_api':{
target: 'http://api.douban.com',
pathRewrite: {
'^/doubai': ''
},
changeOrigin: true
}
}
main.js:
Vue.prototype.HOST = "/doubai_api"
访问:修改配置文件以后,需要重启服务器
var url = this.HOST + "/v2/movie/top250";
this.$axios({
method: 'get',
url: url
})
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})