20201015岳浩天

学习知识

filter/map/reduce练习:

<script>
        const arr = [10, 50, 122, 50, 40, 90, 188, 55]
        //需求一:取出所有小于100的数
        let newArr = [];
        // for (let i = 0; i < arr.length; i++) {
        //     if (arr[i] < 100) {
        //         newArr.push(arr[i])
        //     }
        // }
        for (n of arr) {
            if (n < 100) {
                newArr.push(n)
            }
        }
        console.log(newArr);
        //需求二:将所有小于100的数*2
        let new2Arr = []
        for (n of newArr) {
            new2Arr.push(n * 2)
        }
        console.log(new2Arr);
        //需求三:将得出的数相加
        let sum = 0;
        for (n of new2Arr) {
            sum += n
        }
        console.log(sum);



        //需求一:取出所有小于100的数
        let new3Arr = arr.filter(function (n) {
            return n < 100
        })
        console.log(new3Arr);
        //需求二:将所有小于100的数*2
        let new4Arr = new3Arr.map(function (n) {
            return n * 2
        })
        console.log(new4Arr);
        //需求三:将得出的数相加
        let sum1 = new4Arr.reduce(function (pre, n) {
            return pre + n
        }, 0)
        console.log(sum1);


        //需求一:取出所有小于100的数
        //需求二:将所有小于100的数*2
        //需求三:将得出的数相加
        let sum2 = arr.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
        console.log(sum2);
    </script>

v-model修饰符

.lazy回车或者失去焦点是调用

.number 比如:input输入的默认string类型 .number将其转换成number类型

.trim 过滤输入内容首尾的空格

组件

第一步:创建组件构造器对象

第二步:注册组件(Vue.component(')全局组件)(局部组件注册在Vue实例内部)

第三步:使用

组件抽离写法

<body>
    <div id="app">
        <!-- 3.使用组件 -->
        <yht></yht>
        <yht></yht>
        <yht></yht>
        <yht></yht>
    </div>
    <!-- 组件模板抽离一 -->
    <!-- <script type="text/x-template" id="Y">
        <div>
            <h3>第一个自写组件</h3>
            <p>我自己写的!</p>
            <p>早点回去休息!</p>    
              
          </div>
    </script> -->
    <!-- 组件模板抽离二 -->
    <template id="Y">
        <div>
            <h3>第一个自写组件</h3>
            <p>我自己写的!</p>
            <p>早点回去休息!</p>

        </div>
    </template>


    <script src="./js/vue.js"></script>
    <script>
        // 创建组件构造器对象
        const cpnY = Vue.extend({
            template: '#Y'
        })
        //注册组件(全局组件 可以在多个Vue实例下面使用  app2)
        Vue.component('yht', cpnY)
        var data = {}
        var vm = new Vue({
            el: "#app",
            data: data,
            methods: {

            },
        })
    </script>
</body>

父子组件:将子组件注册在父组件内部,父组件可以用 父组件外部不能用

心得

今天学了一些Vue,在父子组件通讯的部分还有些懵懵懂懂,还要多梳理。

标签

评论