element組件知識點總結

1：單選框與多選框的change事件，html代碼

<div id="app">
    <div class="demo box">
            <h6>例子13</h6>
            <template>
              <el-checkbox v-model="checked" @change="ceshi2" label="備選項">備選項</el-checkbox>
            </template>
    </div>
     <div class="demo box">
            <h6>例子14</h6>
            <template>
                <el-radio-group v-model="radio2" @change="ceshi">
                    <el-radio :label="1">備選項</el-radio>
                    <el-radio :label="2">備選項</el-radio>
                </el-radio-group>
            </template>
    </div>
</div>

對應的js代碼

methods:{
                ceshi(value){
                    console.log(value);
                },
                ceshi2(event){
                    console.log(event.target.checked);
                }
 }

 2：vue監聽鍵盤事件

    <div class="demo">
            <input type="text" name="" v-on:keyup='submit'>
    </div>

js

methods:{
         submit:function(event){
                   alert(event.target.value);
          }
},

 3：組件

<div id="app">
    <div class="demo">
        <h6>例子13</h6>
        <div>
          <input v-model="parentMsg">
          <br>
          <!--child作為一個組件被js中的template替換-->
          <child v-bind:my-message="parentMsg"></child>
          <!--父組件通過props: ['myMessage']把父組件的值傳遞給子組件-->
          <!--，而js中template用來生成子組件-->
        </div>
        <div>{{parentMsg}}</div>
    </div>
</div>

對應的js

var vueInit = function() {
        Vue.component('child',{
            props: ['myMessage'],
            template: '<span style="color:red">{{myMessage}}你好</span>',
            /*data:function(){
                return {
                    parentMsg: 'Message from parent'
                }
            }*/
        });
        new Vue({
          el: '#app',
          data:{
            parentMsg: 'Message from parent'
          }
        })
    }

 

注冊組件component時，data是用來渲染組件中的參數，用來渲染myMessage；而組件構造器中的data是用來渲染頁面父節點參數，用來渲染頁面中的{{parentMsg}}；

 4：父子組件關系

Vue.component('child', {
  // 聲明 props,告訴后面的template中的message是prop父子傳遞的參數
  props: ['message'],
  // message是來自於父組件
  template: '<span>{{ message }}</span>'
})

對應的html

<child message="hello!"></child>

標簽<child>作為父組件，定義message（已經在js中定義為prop，用來傳遞參數）；