首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

递归函数+redis使用+Vue认识

1.递归查找一个多维数组中,是否存在‘low’,如果存在将其设置为‘0’,同时,返回结果。

2.PHP+redis消息队列实现抢购

实现功能:基于redis队列,防止高并发超卖。

实现思路:

a.根据商品表中的库存,创建redis商品库存队列;

b.client端访问秒杀API接口;

c.web服务器从redis队列中查询剩余库存,如果有,创建订单,更新数据库库存量,抢购成功,反正,提示客户端库存不足(重点);

3.vue.js理解

一,绑定方法v-bind

1,绑定方法:

缩写:

2,监听方法:

缩写:

二,vue实例

1,构造器

var vm = new Vue({

//选项

})

缩写 new Vue({

//选项

})

2,属性和方法

3,条件语句v-if,v-else,v-else-if

4,根据条件展示元素v-show

example:

Hello!

new Vue({

el: '#app',

data: {

ok: true

}

})

5,循环语句v-for=“site in sites”

example1:

{{ site.name }}

new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] }})

v-for 可以通过一个对象的属性来迭代数据

example2:可以输对象

{{ value }}

new Vue({ el: '#app', data: {object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术,更是梦想!' } }})

example3:键值对(value,key)

{{ key }} : {{ value }}

new Vue({ el: '#app', data: {object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术,更是梦想!' } }})

example4:索引

{{ index }}. {{ key }} : {{ value }}

example4:循环整数

{{ n }}

new Vue({ el: '#app'})

总结:v-for循环输出,键值对,索引,整数,对象。vue中存在视图模板template。

6,计算属性computed,用于处理复杂逻辑,属性默认getter,也存在setter。

区别:computed与methods,computed是将数据缓存而执行,methods在重新渲染时,函数重新调用执行,不缓存。

7,v-bind设置HTML样式(style)和属性(class)。返回结果可以是字符串,对象或数组。

8,事件处理器v-on,常用于button,submit。

example:

增加 1

这个按钮被点击了 {{ counter }} 次。

new Vue({

el: '#app',

data: {

counter: 0

}

})

9,修饰符

(1)事件修饰符:.stop,.prevent,.capture,.self,.once;

...

...

(2)按键修饰符:.enter,.tab,.delete,.esc,.space,.down,.left,.right,.ctrl,.alt,.shift,.meta

example;

example:

10,表单:输入框 input和textarea,复选框checkbox,单选按钮radio

11,组件component(重点)

(1)全局组件component

注册全局组件语法:Vue.component(tagName,options)

调用:

example1:

// 注册

Vue.component('runoob', {

template: '自定义组件!'

})

// 创建根实例

new Vue({

el: '#app'

})

(2)局部组件child

varChild= {

template: '自定义组件!'

}

// 创建根实例

new Vue({

el: '#app',

components: {

// 将只在父模板可用

'runoob': Child

}

})

*重点(3)prop使用(prop验证)

example:

Vue.component('example',{props:{// 基础类型检测 (`null` 意思是任何类型都可以)propA:Number,// 多种类型propB:[String,Number],// 必传且是字符串propC:{type:String,required:true},// 数字,有默认值propD:{type:Number,default:100},// 数组/对象的默认值应当由一个工厂函数返回propE:{type:Object,default:function(){return{message:'hello'}}},// 自定义验证函数propF:{validator:function(value){returnvalue>10}}}})

注释:prop验证规则type:string,number,boolean,function,object,array

type 也可以是一个自定义构造器,使用instanceof检测。

12,自定义指令(directive)

页面载入时,input 元素自动获取焦点:

// 注册一个全局自定义指令 v-focus

Vue.directive('focus', {

// 当绑定元素插入到 DOM 中。

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

// 创建根实例

new Vue({

el: '#app'

})

总结

vue组件

步骤:1.创建组件component。

example:js中

//组件创建

Vue.component('todo-item',{

props:['todo'],

template: '

{{todo.text}}

'

})

2.创建HTML

3.js中,逻辑绑定

example:

var app7 = new Vue({

el:'#app-07',

data: {

items:[

{text:'component'},

{text:'组件使用'},

{text:'dome'},

]

}

})

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180607G1R3BJ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券