Vue模板文件

前端 Vue

创建时间:2022-12-31 10:30

阅读:

1.Vue3模板文件

<template>
</template>

<script >
import axios from 'axios';
export default {
    name: '',
    components: {
    },

    data() {
        return {
        }
    },

    methods:{
    },

    async mounted() {
    },
}
</script>

<style lang="less">

</style>

2.Vue script模板

<script>
import { getCurrentInstance } from "vue";

export default {
name: '',

// 定义数据
data(){
    return{
        username:"" 
    }
},

// 初始化
mounted(){
    this.username=Cookies.get("fund_username") // value
},

// 执行方法
methods: {
    login(){
        console.log(this.age) // 直接使用this.变量名 去读取setup函数的值
        console.log(this.username) // 直接使用this.变量名 去读取data函数的值
    },

    click(info){
        console.log(info)
    }

    useClick(){
        // 调用其它的方法  this.$options.methods.函数名.bind(this)()
        this.$options.methods.click.bind(this)("变量值")
    }

},

// 计算
computed: {
    now() {
      return Date.now()
    }
  },

// ts语法
setup(){
    
    // 如果要修改data函数里面的值需要用到 getCurrentInstance()
    const data_return = getCurrentInstance(); 
    console.log(data_return.data.username) // 就可以获取到data中的值, 直接console.log(username)是获取不到

    const dialogTableVisible = ref(false)
    const name =ref('小四')
    const age=ref(18)

    function plusOne(){
        age.value++ //想改变值或获取值 必须.value
        name.value = "新值"  // 修改值必须通过.value  
    }

    return{
        // 必须返回
        dialogTableVisible,age,nameplusOne
    }
    
    }

    }

</script>

axios语法

# 3 .1发送json数据模板
axios(
    {
        url:"url",
        method:post,
    }
).then((res)=>{}).catch((error)=>{})

demo:
// 需要导入的模块
import axios from 'axios'  

axios({
            url: constantdict.url_prefix +'/fund/api/login',
            method: 'post',
            data: {
            username: this.username,
            password: this.password,
            remember: this.remember
            }

    }).then((res) => {
            // 请求成功
            console.log(res.data)
            Cookies.set("fund_username", this.username)
            this.$router.push("/");

    }).catch(error => {
            // 请求异常
            console.log(error.response);
            })

# 3.2发送表单结构
    需要加上请求头
    qs.stringify 将对象转换成json格式
demo:
import qs from 'qs'
let data = { username: this.username, "password1": this.password1, "password2": this.password2 }
let option = {
        method: 'POST',
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(data),
        url: constant_value.url_prefix + '/fund/api/register/api/register',
}
axios(option).then((response) => {
        if (response.data.info == "success") {
        localStorage.setItem("token", "12121value");
        this.$router.push("/")
        } else {
        console.log(response)
        console.log("创建失败")
        }

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。