SOURCE

var that;
var app = new Vue({
  el: '#app',
  data() {
    return {
      element:{
          name:'vue获取当前元素内容 以及标签'
      },
      imageurl:"https://www.baidu.com/img/flexible/logo/pc/result@2.png",
      //输入框初始值
      content:'输入框内容',
      blurcontent:'失去焦点'
    }
    
  }, 
  methods: {
      //提交表单 获取输入框值
      formInfor(){
          console.log(this.content)
      },
       //失去焦点时 获取输入框值
      blurInfor(){
          console.log(this.blurcontent)
      },
      
      sumPrice(){
          return 999;
      },
      price(e){
          console.log(e)
      },
      
  }
  
});

<div id="app">
   <div>{{element.name}}</div>
   <h4>（v-on 缩写 @）</h4>
   <div @click="price(7)">点击计算{{sumPrice()}} </div>
   <h4>（v-bind 缩写 ：）</h4>
   <img :src="imageurl" alt=""/><br>
<br>
<hr>
<h3>获取当前输入框内容</h3>
   <div>1：定义初始值 2.v-model 绑定输入 <h4>3.点击事件提交表单</h4></div>
   <input type="text" v-model="content">
   <input type="submit" value="提交" @click="formInfor">


   <div><h4>3.输入失去焦点时输出</h4></div>
   <input type="text" v-model="blurcontent" @blur="blurInfor">

</div>

img{
    width: 20%;
}