目录
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 是数组元素迭代的别名。
?
网络请求
-
引入axios （Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中）
?
1.安装：
npm install axios --save2.引入（main.js中）：
import Axios from "axios"
Vue.prototype.$axios = Axios3.使用：
后台代码
??
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);
? })