Vue基础操作(三)


前端Vue的基础操作(三)

image-20211025175251282

1. axios请求示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<!--
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]])
当使用别名方法时(axios.xxx),不需要在config中指定url,method和data属性。
-->
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">Jerome</a>
</div>
<script>
    var app = new Vue({
        el: "#app",
        //data: 属性
        data: function () {//需要处理(返回)后台数据在页面上渲染时使用
            return {
                //请求的返回参数格式必须和json字符串一样
                info: {
                    name: null,//相当于形参占位,实际参数data.json会赋予
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted: function () {
            //mounted钩子函数,可以调用methods中定义的函数
            /*
            axios({
                method: 'post',
                url: '/test/4r42',
                data: {
                    firstName: 'qizai',
                    lastName: 'Jerome'
                },
                header: {"token": "decrypt"}
            });
            */
            axios.get('json/1.data.json').then(resp => (this.info = resp.data));

        }
    })
</script>
</body>

</html>

1.data.json文件

{
  "name": "Jerome",
  "url": "https://bree.vip",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "Jom",
    "city": "广东深圳",
    "country": "中国"
  },
  "links": [
    {
      "name": "GitHub",
      "url": "https://github.com"
    },
    {
      "name": "Jerome",
      "url": "https://bree.vip"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

2. computed计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<!--
计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,
    那么每次访问的时候计算属性都会立即返回之前的计算结果,不再执行函数
每次触发重新渲染时,调用方法将总会再次执行函数
-->
<body>
<div id="app">
    <input type="text" v-model="num1"/> + <input type="text" v-model="num2"/>
    <p>求和结果{{result}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {num1: 1, num2: 2},
        computed: {//计算属性
            result: function () {
                return parseInt(this.num1) + parseInt(this.num2);
            }
        }
    })
</script>
</body>
</html>

文章作者: Jerome
文章链接: /article/54/
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoLiu!
侵权声明: 若无意对您的文章造成侵权,请您留言,博主看到后会及时处理,谢谢。
评论-----昵称和邮箱必填,网址选填
  目录