1. 说说如何在Vue.js中实现数字输入组件的方法
我们对普通输入框进行扩展，实现一个可快捷输入数字组件。
首先制定规则：
只能输入数字。
设计两个快捷按钮，可直接在当前值的基础上增1或者减1。
数字输入组件可设置初始值、最大值与最小值。
接着，规划好API。一个Vue.js组件最重要的3个部分就是props、events以及slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到props与events。
1基础版
html：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>数字输入组件</title>
</head>
<body>
<divid="app">
<number-inputv-model="value":min="0":max="6"></number-input>
</div>
<scriptsrc="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<scriptsrc="number.js"></script>
<script>
varapp=newVue({
el:'#app',
data:{
value:3
}
});
</script>
</body>
</html>
这里，我们使用了v-model，双向绑定了value。
number.js：
/**
*是否为数字
*@paramval
*@returns{boolean}
*/
functionisNum(val){
return(/^[0-9]*$/).test(val);
}
/**
*数字输入组件
*/
Vue.component('number-input',{
template:'
<divclass="number-input">
<input
type="text"
:value="currentVal"
@change="change">
<button
@click="down"
:disabled="currentVal<=min">-</button>
<button
@click="up"
:disabled="currentVal>=max">+</button>
</div>',
props:{//校验
//最大值
max:{
type:Number,
default:Infinity
},
//最小值
min:{
type:Number,
default:-Infinity
},
//初始值
value:{
type:Number,
default:0
}
},
data:function(){
return{
currentVal:this.value
}
},
watch:{
currentVal:function(val){
console.log("currentVal:"+this.currentVal);
this.$emit('input',val);
},
value:function(val){//更新currentVal
this.update(val);
}
},
methods:{
/**
*更新
*@paramval
*/
update:function(val){
//让输入的值在限定范围内
if(val>this.max){
val=this.max;
}
if(val<this.min){
val=this.min
}
this.currentVal=val;
},
/**
*减少
*/
down:function(){
if(this.currentVal<=this.min){
return;
}
this.currentVal-=1;
},
/**
*增长
*/
up:function(){
if(this.currentVal>=this.max){
return;
}
this.currentVal+=1;
},
/**
*如果输入的值，
*@paramevent
*/
change:function(event){
varval=event.target.value.trim();//获取输入值
if(isNum(val)){//赋值currentVal
val=Number(val);
this.currentVal=val;
//超出限定范围时，规整
varmax=this.max;
varmin=this.min;
if(val>max){
this.currentVal=max;
}elseif(val<min){
this.currentVal=min;
}
}else{//还原为currentVal
event.target.value=this.currentVal;
}
}
},
mounted:function(){
//对初始值进行范围限定
this.update(this.value);
}
});这里，我们专门定义了一个number.js，用于定义数字输入组件。
在number.js中，我们做了如下工作：
利用正则表达式，定义了一个判断“是否为数字”的函数。
在模板定义中，我们定义了一个输入框以及两个按钮，首先在input中绑定了currentVal数据以及原生的change事件。接着，定义了递增与递减按钮，每个按钮都绑定了相应的事件，还绑定了disabled属性，这样当输入的值超出范围时，按钮就会置灰不可用。
在定义的change()方法中，先获取输入值，然后判断是否为数字。如果是数字，则赋值给currentVal；如果不是数字，则还原为currentVal，这样可以保证组件的内容始终是数字。
接着在props中，对每一个参数（最大值、最小值、初始值）定义了相应的校验规则。这样就可以在父组件中初始化这个数字输入组件啦O(∩_∩)O~
因为Vue.js组件时单向数据流，所以不能在组件内部修改之前在props中定义的value。我们可以在data函数中，声明一个currentVal，并把props中定义的value值赋给它。这样就实现了组件初始化时，引用父组件中的值的工作。
为了当父组件修改了输入值，也要更新子组件中的currentVal的功能，我们需要用到watch属性。watch属性用于监听某个prop或者data，当它们发生变化时，会触发定义在watch中的函数。这里我们监听了currentVal与value，监听了currentVal是为了将来当内部更新了currentVal的场景时，可以同步到Value，这里起核心作用的是监听value值。为了让输入的值在限定范围内，这里封装了一个update()函数。
watch中的监听函数，有两个入参，第一个是新值，第二个是旧值。这里只用到新值。因为监听函数中的this，指向的是当前组件实例，所以可以直接调用定义在methods中的函数。
为了在组件初始化时，对初始值进行范围限定，这里在mounted挂载函数中，也调用了update()函数。
效果：
2按键支持
当输入框获得焦点时，按下“向上键”时，增长；按下“向上键”时，减少。
这可以利用按键修饰符来实现，我们修改示例中的组件模板：
...
<input
type="text"
:value="currentVal"
@change="change"
@keyup.up="up"
@keyup.down="down">
...
Vue.js定义按键别名有这些：
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
效果：
3控制步伐
新增一个步伐属性，增长或者减少以步伐值为变化量。之前的示例，步伐为1。
首先在props中，定义一个步伐属性：
//步伐
step:{
type:Number,
default:1
}
然后在增长与减少函数中，使用步伐属性做为变化量：
/**
*减少
*/
down:function(){
if(this.currentVal<=this.min){
return;
}
this.currentVal-=this.step;
},
/**
*增长
*/
up:function(){
if(this.currentVal>=this.max){
return;
}
this.currentVal+=this.step;
},
最后为组件重新配置参数：
<number-inputv-model="value":min="0":max="50":step="5"></number-input>
效果：
本文示例代码
2. Vue.JS入门篇--列表渲染
查看一下效果，应该很容易得到结果
有时我们可能需要重复一个包含多个节点的块，这时可以用 <template> 标签包裹这个块。这里的 <template> 标签只起到语义上的包裹作用，其本身不会被渲染出来。例如：
简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组，你可用 $value 直接访问值:
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:
Vue.js 内部对被观察数组的变异方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截，因此调用这些方法也将自动触发视图更新。
下面是一个演示的例子，点击按钮的时候数据项会被移除
Vue.js 给被观察数组添加了两个便捷方法：$set() 和 $remove() 。
你应该避免直接通过索引来设置数据绑定数组中的元素，比如 demo.items[0] = {}，因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:
$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时，$remove() 将在数组中搜索该值并删除第一个发现的对应元素。
当你使用非变异方法，比如filter(), concat() 或 slice()，返回的数组将是一个不同的实例。在此情况下，你可以用新数组替换旧的数组:
你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心，Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例， 并尽可能地进行有效复用。
在某些情况下，你可能需要以全新的对象（比如 API 调用所返回的对象）去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性，那么你可以使用 track-by 特性参数给 Vue.js 一个提示，这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如：你的数据是这个样子的
那么你可以像这样给出提示:
在替换 items 数组时，Vue.js 如果碰到一个有 _uid: ྔf869d' 的新对象，它就会知道可以直接复用有同样 _uid 的已有实例。 在使用全新数据重新渲染大型 v-repeat 列表时，合理使用 track-by 能极大地提升性能。
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值，你也可以象访问数组中的简单值那样使用 $value 属性。
在 ECMAScript 5 中，对于给对象添加一个新属性，或是从对象中删除一个属性时，没有机制可以检测到这两种情况。针对这个问题，Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回，所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。
v-repeat 也可以接受一个整数。在这种情况下，它将重复显示一个模板多次。 下面的例子将迭代3次。
有时候我们只需要显示一个数组的过滤或排序过的版本，而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求： filterBy 和 orderBy。
3. js自动生成递增编号
vari;
for(i=0;i<10000;i++){
console.log('CK'+'1804'+("0000"+i).substr(-4))
}
4. js怎么在textarea里自动加序号
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<script>
functionaddNumber(){
vart=document.getElementById("ta"),s=t.value.split(" "),len=s.length;
for(vari=1;i<=len;i++){
if(""!=s[i-1]){
s[i-1]=i+"."+s[i-1];
}
}
t.value=s.join(" ");
}
</script>
<textareaid="ta"cols="30"rows="4"></textarea>
<inputvalue="添加序号"type="button"onClick="addNumber();">
做的比较简单，粗糙，你先看看能不能满足你的基本需求
5. js如何实现div的循环排序
页面一旦刷新就不会知道上次的顺序了，可以随机产生一个顺序，
可以把里面的4个div写在页面，在js中box_0531这个div，然后把那4个按随机出来的顺序插入。