參數

  
  var vm = new Vue({
    el:‘#app‘,//綁定元素
    data:{
      message:‘helloworld‘
    },//數據
    methods:{
      sayhi:function(){
        alert(‘hi‘);
      }
    },//方法
    mounted:function(){
      console.log(‘vue mounted‘);
    },//vue加載完成後調用
    computed:{
      ‘options‘:function(){
        console.log(this.$options);
      }
    }//計算屬性
  })
 

常用的參數如上，生命周期

語法糖

1. 常見的語法糖如v-on: 和@ 、v-bind: 和:

2. v-model 使用在input和textarea標簽上能實現雙向綁定，其實下面兩個是相同的

     
     <input type=‘text‘ v-model=‘message‘ />

     
     <input type=‘text‘ :value=‘message‘ @input=‘message=$event.target.value‘ />

3. 思路同上延伸到單選框和復選框再修改下綁定就修改為

     
     <input type=‘checkbox‘ :checked=‘status‘ @change=‘status=$event.target.checked‘ />
    
   

常用方法

比如$refs $el $options $set $emit $event

$refs 能獲取設置了ref的元素

  
  <div ref=‘name‘></div>

  
  <script>
    var vm = new Vue({
      el:‘#app‘,
      methods:{
        ‘getName‘:function(){
          console.log(this.$refs.name);
        }
      }
    })
  </script>

$el 獲取vue綁定元素

$options

獲取配置項

$set 設置對象

$emit 子組件向父組件傳至的寫法

$envnt 獲取當前元素，$refs 可以替換為

  
  <div @click=‘getName($event)‘>hello world</div>//參數$event可忽略

  methods:{
    ‘getName‘:functione(){
      console.log(e.target);
    }
  }

Vue基礎知識