label 與laber for的區別之雞零狗碎

label 與laber for的區別

先上代碼：

<form role="form" >
        <div class="form-group">
            <label>user</label>
            <input type="text" class="form-control">
            <label for="username">user</label>
            <input type="text" id="username" class="form-control" placeholder="請輸入用戶名">
        </div>

    </form>

在上效果：

for屬性至關於綁定 label 和input，但點擊 label的時候，鼠標會focus到相應的input上

form中的role屬性

html 裏面的 role 本質上是加強語義性，當現有的HTML標籤不能充分表達語義性的時候，就能夠藉助role來講明。一般這種狀況出如今一些自定義的組件上，這樣可加強組件的可訪問性、可用性和可交互性。

在html5中的話，不建議使用

v-if 於v-show

v-if 是「真正的」條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下， v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好

    js中的splice() 方法與 slice() 方法

1. splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。（修改原數組）

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>
//輸出結果是
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

1. slice() 方法可從已有的數組中返回選定的元素。（不修改原數組）

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>
//輸出結果是
George,John,Thomas
John,Thomas
George,John,Thomas

Vue中對象數組怎麼初始化+賦值

var vue= new  Vue({
                el:'.box',
                data:{
                  userData:[ {name:'Jack',passwd:'hahha'},{name:'Nick',passwd:'213123'}],
                    username:'',
                    password:'',
                    nowIndex:-100

                },

動態添加對象到數組：

this.userData.push({
                            name:this.username,
                            passwd:this.password

                        });

input type 中：button和submit的區別

type = "submit" 用在表單內,裏面有相似的默認方法封裝,普通單擊就是提交所在表單
type = "button" 就是說這個是個普通的按鈕,若是不寫單擊等事件,那麼這個按鈕點擊是沒有任何反應的,
全部事件都須要本身手動寫

Vue事件

事件對象：$event

事件冒泡：由內至外，由下至上在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

如下事件不冒泡：blur、focus、load、unload。

阻止冒泡：

1. 標籤上@click.stop
2. 標籤上接受參數爲事件對象（$event）而後在函數體內ev.cancelBubble=true

阻止默認行爲

例子：鼠標右鍵點擊事件

1. @contextmenu.prevent
2. ev.preventDefault();

• 獲取鍵盤按鍵---鍵碼,用於Web遊戲

1.           event.keycode
2.           @keyup.13="pressEntry()"

標籤屬性

v-bind 綁定屬性值     縮寫    ：src

圖片例子

<img v-bind:src="url" alt="">

1. :calss  

•  :class="[red]"  red是數據   
• ：class="[a,b,c]"  能夠是數組
• :class="{red:a,blue:false}" 可使json

1. :style

•  :style="[red]"  red是數據   
• :style="[a,b,c]"  能夠是數組
• :style="{red:a,blue:false}" 可使json ,json 必須使用駝峯命名法

模板

• {{message}}  動態渲染
• {{*message}}  只渲染一次

過濾器

• uppercase
• lowercase
• capitalize 首字母大寫  {{'ascasc' | capitalize}} 首字母大寫
• currency 美圓格式     {{num |currency 參數}}    例： curency '￥'

vue-resouce用於交互的模塊($http)

• get

//獲取一個文本數據
function(){

this.$http.get('get.php',{a:1,b:2}).then(function(res){

alert(res.data);
},function(res){alert(res.status);}

)



}

• post

window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post('post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true  //消息頭，區分於get
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };

• jsonp(本質是走get)

get:function(){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:'a'
                        },{
                            jsonp:'cb'//關鍵字
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }