vue调用python脚本获得返回 vue获取函数返回值

转载

数据小探 2024-07-23 10:24:05

文章标签 vue调用python脚本获得返回 vue Vue vue.js 数组 文章分类 Python 后端开发

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);

补充：filter不会改变原数据，但sort会改变原数据，如下面这样

let arr = [1, 6, 5, 2, 7, 8, 9, 10];
arr.sort((a, b) => {
	return a - b;//重小到大
    //return b - a;//重大到小
})

二、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>

回顾

Vue学习（第三天）

一、高阶函数的使用

1.1 filter
1.2 map
1.3 reduce
1.4 实例

1.4.1 写法一
1.4.2 写法二

二、v-model的使用

2.1 快速入门
2.2 实现原理
2.3 结合radio
2.4 结合checkbox
2.5 结合select
2.6 input中的值绑定
2.7 v-model的修饰符

2.7.1 懒加载lazy
2.7.2 数字类型number
2.7.3 截取两端字符串trim

三、组件化开发

3.1组件化的基本使用
3.2 全局组件和局部组件
3.3 父组件与子组件
3.4 组件的语法糖写法
3.5 组件模板的分离写法
3.6 组件中的数据为何要函数返回
3.7 组件通信-父组件向子组件传递数组
3.8 html中驼峰标识的坑
3.9 组件通信-子向父传递信息

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：react nginx使用方法

下一篇：springboot的任务调度框架 spring任务调度task

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

vue调用python脚本获得返回 vue获取函数返回值

vue调用python脚本获得返回 vue获取函数返回值

Vue学习（第三天）

一、高阶函数的使用

1.1 filter

1.2 map

1.3 reduce

1.4 实例

1.4.1 写法一

1.4.2 写法二

二、v-model的使用

2.1 快速入门

2.2 实现原理

2.3 结合radio

2.4 结合checkbox

2.5 结合select

2.6 input中的值绑定

2.7 v-model的修饰符

2.7.1 懒加载lazy

2.7.2 数字类型number

2.7.3 截取两端字符串trim

三、组件化开发

3.1组件化的基本使用

3.2 全局组件和局部组件

3.3 父组件与子组件

3.4 组件的语法糖写法

3.5 组件模板的分离写法

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

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

3.8 html中驼峰标识的坑

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

回顾

51CTO博客