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個按隨機出來的順序插入。