Vue的基本用法

目录

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);
    })