Vue学习（第三天）

其他 2021-03-08 12:18:39 阅读次数: 0

Vue学习（第三天）

一、高阶函数的使用

1.1 filter

​ filter中的回调函数有一个要求，必须返回boolean类型的值，当返回true时，将当前的值加入到结果中

nums: [1, 2, 3, 4, 5, 6, 7, 8, 9];
//返回nums中数值大于5的元素集合
let result = this.nums.filter(function(n) {
	return n > 5;
});

1.2 map

​ 对数组中的每个值都进行操作

对result数组中的每个元素值乘以2
let newResult = result.map(function(n) {
	return n * 2
})

1.3 reduce

​ 可做求和等运算

//求和运算
//function(preValue, currentValue) 回调函数 preValue:前一个结果 currentValue当前值
//初始结果
//对result数组中的元素进行求和运算
let sum = result.reduce(function(preValue, currentValue) {
	return preValue + currentValue;
}, 0);

1.4 实例

​ 从array数组中筛选中大于5的元素，并且对这些元素值扩大2倍，计算出他们的和

1.4.1 写法一

return this.array.filter(function(n) {
    return n >= 5;
}).map(function(n) {
    return n * 2;
}).reduce(function(preValue, currentValue) {
    return preValue + currentValue;
}, 0);

1.4.2 写法二

this.nums.filter(n => n >= 5).map(n => n * 2).reduce((preValue, currentValue) => preValue + currentValue,1);

二、v-model的使用

2.1 快速入门

​ v-model可以实现双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{
   
   {message}}</h2>
        <input type="text" v-model="message">
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        }
    })
    </script>
</body>

</html>

2.2 实现原理

<div id="app">
        <input type="text" v-text="message">
        <h2 v-text="message"></h2>
        <!-- <input type="text" :value="message" @input="valueChange"> -->
        <input type="text" :value="message" @input="message = $event.target.value">
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        methods: {
        	valueChange(event){
        		this.message = event.target.value;
        	}
        }
    })
    </script>

2.3 结合radio

    <div id="app">
        <!-- <label for="male">
            <input type="radio" id="male" name="gender"  value="男" v-model="gender">男
        </label>
        <label for="female">
            <input type="radio" id="female" name="gender" value="女" v-model="gender">女
        </label> -->
		
		<!-- v-model绑定后的元素可省略name属性 -->
        <label for="male">
            <input type="radio" id="male" value="male" v-model="gender">男
        </label>
        <label for="female">
            <input type="radio" id="female" value="female" v-model="gender">女
        </label>
        <hr>
        <h2>{
   
   {gender}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            gender: 'male',
        }
    })
    </script>

2.4 结合checkbox

    <div id="app">
        <!-- 单选复选框 -->
        <div>
            <input type="checkbox" v-model='licences'>同意协议
            <button :disabled="!licences">下一步</button>
            <h2>{
   
   {licences}}</h2>
        </div>
        <hr>
        <!-- 多选复选框 -->
        <div>
            <input type="checkbox" value="篮球" v-model='hobbies'>篮球
            <input type="checkbox" value="乒乓球" v-model='hobbies'>乒乓球
            <input type="checkbox" value="羽毛球" v-model='hobbies'>羽毛球
            <input type="checkbox" value="足球" v-model='hobbies'>足球
            <input type="checkbox" value="街舞" v-model='hobbies'>街舞
        </div>
        <h2>{
   
   {hobbies}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！',
            hobbies: [],
            licences: false,
        }
    })
    </script>

2.5 结合select

<div id="app">
        <div>
            <select v-model='fruit'>
                <option value="apple">苹果</option>
                <option value="pear">梨</option>
                <option value="grape">葡萄</option>
                <option value="banana">香蕉</option>
            </select>
            <h2>{
   
   {fruit}}</h2>
        </div>
        <hr>
        <div>
        	<!-- 多选框 -->
            <select v-model='fruit' multiple>
                <option value="apple">苹果</option>
                <option value="pear">梨</option>
                <option value="grape">葡萄</option>
                <option value="banana">香蕉</option>
            </select>
            <h2>{
   
   {fruit}}</h2>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！',
            fruit: 'banana',
        }
    })
    </script>

2.6 input中的值绑定

<div id="app">
        <!-- <input type="checkbox" v-for='hobby in hobbies'>{
   
   {hobby}} -->
        <label v-for='hobby in hobbies' :for="hobby">
            <input type="checkbox" :id="hobby" :value="hobby" v-model='result'>{
   
   {hobby}}
        </label>
        <h2>{
   
   {result}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            hobbies: ['篮球', '乒乓球', '羽毛球', '足球', '街舞','高尔夫球'],
            result: [],
        }
    })
</script>

2.7 v-model的修饰符

2.7.1 懒加载lazy

​ 输入后当鼠标离焦后或按回车后才更新变量信息

<div>
    <input type="text" v-model.lazy='message'>
    <h3>{
   
   {message}}</h3>
</div>

2.7.2 数字类型number

​ 不必进行类型的转化

<div>
      <input type="number" v-model.number='number'>
      <h2>{
   
   {number}} - {
   
   {typeof number}}</h2>
</div>

2.7.3 截取两端字符串trim

​ 截取字符串两端的空白字符

<div>
   <input type="text" v-model.trim='name'>
   <h2>{
   
   {name}}</h2>
</div>

三、组件化开发

3.1组件化的基本使用

   <!-- 组件必须挂载在某个Vue实例下，否则它不会生效 -->
    <my-cpn></my-cpn>
    <hr>
    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    //创建组件构造器对象
    const component = Vue.extend({
        //自定义组件的模板
        template: `
			<div>
				<h2>我是标题</h2>
				<p>我是内容，哈哈哈</p>
				<p>我是内容，呵呵呵</p>
			</div>`
    });
    //2.注册组件
    Vue.component('my-cpn', component);

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        }
    })
    </script>

3.2 全局组件和局部组件

    <div id="app">
        <!-- html不区分大小写 -->
        <my-Component></my-Component>
    </div>
    <hr>
    <div id="other">
        <my-component></my-component>

        <!-- 等价于 -->
        <!-- <my-component></my-component> -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
    //  创建组件构造器
    const component = Vue.extend({
        template: `
            <div>
                <h2>这是一个标题</h2>
                <p>这是内容</p>
            </div>
            `
    });
    //全局组件
    // Vue.component('my-component', component);


    const app = new Vue({
        el: '#app',
        components: {
            myComponent: component,//true

            // my-Component: component,//false
        }
    })

    const other = new Vue({
        el: '#other',
        components: {
            myComponent: component
        }
    });
    </script>

3.3 父组件与子组件

	const component1 = Vue.extend({
        template: `
    			<div>
    				<h1>这是标题1</h1>
    				<p>这是内容，呵呵呵</p>
    			</div>
    		`
    });

    const component2 = Vue.extend({
        template: `
    			<div>
    				<h1>这是标题2</h1>
    				<my-component></my-component>
    				<p>这是内容，呵呵呵</p>
    			</div>
    		`,
        components: {
            myComponent: component1
        }
    });
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        components: {
            myComponent: component2,
        }
    })
    </script>

3.4 组件的语法糖写法

    <div id="app">
        <my-component></my-component>
    </div>
    <script src="../js/vue.js"></script>
    <script>

    //全局组件的注册
     Vue.component('my-component',{
         template: `
    <div>
    	<h1>this is a title</h1>
    	<p>this is a passage</p>
    </div>
     	`
     });
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        components: {
            myComponent: {
                template: `
					<div>
						<h1>this is a Title</h1>
						<p>this is a Passage</p>
					</div>
	    		`
            }
        }
    })
    </script>

3.5 组件模板的分离写法

 <div id="app">
    	<my-component></my-component>
    </div>
    <script src="../js/vue.js"></script>
	
	<!-- 方式一： -->
    <!-- <script type="text/x-template" id="myTemplate">
    	<div>
    		<h1>this is a title</h1>
    		<p>this is a passgae</p>
    	</div>
    </script> -->
	
	<!-- 方式二： -->
	<template id="myTemplate">
		<div>
    		<h1>This is a title</h1>
    		<p>This is a passgae</p>
    	</div>
	</template>
    <script>
    Vue.component('myComponent', {
        template:'#myTemplate'
    });

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        }
    })
    </script>

3.6 组件中的数据为何要函数返回

 <div id="app">
        <my-component></my-component>
        <hr>
        <my-component></my-component>
        <hr>
        <my-component></my-component>
    </div>
    <template id="myTemplate">
        <div>
            <h1>当前计数：{
   
   {counter}}</h1>
            <button @click='add'>+</button>
            <button @click='sub'>-</button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
    // 组件内部是不能访问Vue实例中的数据的 
    Vue.component(
        'myComponent', {
            template: '#myTemplate',
            data() {
            	// 变量不共享
                return {
                    counter: 0,
                }
            },
            methods: {
                add() {
                    this.counter++;
                },
                sub() {
                    this.counter--;
                }
            }
        }
    );


    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        }
    })
    </script>

3.7 组件通信-父组件向子组件传递数组

 <div id="app">
        <my-component :cmovies='movies'></my-component>
    </div>
    <template id="myTemplate">
        <!-- template中：必须包含在一个div内 -->
        <div>
            <h1>{
   
   {message}}</h1>
            <h1>{
   
   {cmovies}}</h1>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['海王', '胖子行动队', '小兵张嘎', '生化危机', '速度与激情']
        },
        components: {
            myComponent: {
                template: '#myTemplate',
                data() {
                    return {
                        message: '你好！~'
                    }
                },
                //数组
                // props: ['cmovies']

                //对象
                props: {
                    //1.类型限制
                    // cmovies:Array,

                    //2.提供一些默认值
                    cmovies: {
                        type: Array,
                        //类型是对象或者数组时，默认值必须是一个函数
                        // default: ['a', 'b', 'c'],、

                        default () {
                        	return []
                        },
                        // 必须传该值
                        required: true
                    }
                }
            }
        }
    })
    </script>

3.8 html中驼峰标识的坑

<div id="app">
        <my-component :my-first-message='message'></my-component>
    </div>
    <template id="myTemplate">
        <div>
            <h1>{
   
   {myFirstMessage}}</h1>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        components: {
            myComponent: {
                template: '#myTemplate',
                data() {
                    return {
                    };
                },
                props: {
                    myFirstMessage: {
                        type: String,
                        default () {
                            return;
                        },
                        required: true
                    }
                }
            }
        }
    })
    </script>

3.9 组件通信-子向父传递信息

<div id="app">
        <my-component v-on:item-click='insBtnClick'></my-component>
    </div>
    <template id="myTemplate">
        <div>
            <button v-for='item in categories' v-on:click='tmpBtnClick(item)'>{
   
   {item.value}}</button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀！'
        },
        components: {
            myComponent: {
                template: '#myTemplate',
                data: function() {
                    return {
                        categories: [
                            { name: 'a', value: '数码相机' },
                            { name: 'b', value: '家用电器' },
                            { name: 'c', value: '电脑办公' },
                            { name: 'd', value: '热门推荐' }
                        ]
                    }
                },
                methods: {
                    tmpBtnClick: function(item) {
                        this.$emit('item-click', item);
                    }
                }
            }
        },methods:{
        	insBtnClick(item){
        		console.log(item);
        	}
        }
    })
    </script>

回顾

猜你喜欢

转载自blog.csdn.net/qq_44486437/article/details/113357498
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022