2020.08-Study_update.1

最新推荐文章于 2021-03-17 11:38:49 发布

洋葱骑士_1995

最新推荐文章于 2021-03-17 11:38:49 发布

阅读量71

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46146882/article/details/107789046

版权

笔记专栏收录该内容

51 篇文章 0 订阅

订阅专栏

week 8.3-8.9

-	Study-update
-Mon	生日放假
-Tue	Vue学习
-Wes	Axios，计算属性
-Thu	参与项目，分析项目
-Fri	请求体.mybatis-plus学习
-Sat	mybatis-plus lambda
-	Study-update

8.3 Monday

安装vue
参考博客

安装

8.5 Wednesday

vue中的mounted函数，钩子函数，一般用来做ajax请求取得初始化数据，在整个实例中只运行一次。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    [v-clock] {
        display: none;
    }
</style>
<body>

<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">点我</a>
    <a v-bind:href="info.links[0].url">B站</a>
</div>

<script>
    var vm = new Vue({
        el: '#vue',
        //data()方法
        data() {
            return {
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: null
                },
            }
        },
        mounted() {//钩子函数 mounted 在初始化后异步获取数据
            axios.get('../test.json').then(response => (this.info = response.data));
        }
    })
</script>
</body>
</html>

计算属性
把计算结果缓存起来，节省系统开销

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app1">
    <p>当前时间：{{currentTime1()}}</p>
    <p>当前时间：{{currentTime2}}</p>
</div>
<script>
    'use strict';
    var app1 = new Vue({
        el: '#app1',
        data: {
            message: 'hi',
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
            currentTime2: function () {//属性调用 计算属性，最后调用方式是用属性 把计算结果缓存起来。
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    千米：<input type="text" v-model="km">
    米: <input type="text" v-model="m">
    <p>{{km}}</p>
    <p>{{m}}</p>
    <p>{{message}}</p>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            km: '0',
            m: '0',
            message: null
        },
        watch: {
            km: function (val) {//var为改变后的值
                this.m = val * 1000;
            },
            m: function (val) {
                this.km = val / 1000;
            }
        }
    });
    app.$watch('km', function (newValue, oldValue) {//第一个参数为修改后参数，第二个参数为修改前参数
        this.message = '修改前值为:' + oldValue + '千米，修改后值为:' + newValue + '千米。';
    })
</script>
</body>
</html>

洋葱骑士_1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020.08-Study_update.1

week 8.3-8.9-Study-update-MonStudy-update-TueVue学习-Study-update---Study-update---Study-update7.27 Monday安装vue参考博客安装
复制链接

扫一扫