Vue基础知识

Posted 2020-10-22 kkform

参数

  
  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);
    }
  }