1. 阻止事件冒泡
   • @click.stop='事件名'
   • e.stopPropagation?e.stopPropagation():e.cancelBubble=true
2. 阻止默認(rèn)事件
   • @click.prevent
   • e.preventDefault?e.preventDefault():e.returnValue=true
3. 鍵盤(pán)事件
   • @keydown @keyup @keypress
   • 使用指定鍵
     • @keydown.enter
     • @keydown.13
4. 動(dòng)態(tài)綁定Class樣式

<style>
   .bg1 {
       background: red;
   }
   .bg2{
       color:blue
   }
</style>
<div id="app">
     <button type="button" @click="bok=!bok">切換class</button>
    <div :class="{bg1:bok,bg2:!bok}">你能看見(jiàn)我嗎</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            bok: true
        }
    })
</script>

• data創(chuàng)建數(shù)據(jù)

<div id="app">
    <button type="button" @click="fn">切換class</button>

    <div :class="objClass">你能看見(jiàn)我嗎</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            objClass: {
                bg1: true,
                bg2: false
            }
        },
        methods: {
            fn(){
                this.objClass.bg1 = false;
                this.objClass.bg2 = true
            }
        }
    })
</script>

• 數(shù)組形式

<div id="app">
    <div :class="[bg1Class,bg2Class]">你能看見(jiàn)我嗎</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            bg1Class: "bg1",
            bg2Class: "bg2"
        }
    })
</script>

5. 動(dòng)態(tài)添加style

    <div id="app">
        <div :style="{color:col1,background:col2}">你能看見(jiàn)我嗎</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                col1:'green',
                col2:'red'
            }
        })
    </script>

• 對(duì)象添加

    <div id="app">
        <div :style="objStyle">你能看見(jiàn)我嗎</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                objStyle:{
                    color:'red',
                    background:'blue'
    
                }
            }
        })
    </script>

6. 數(shù)據(jù)請(qǐng)求

• app.js 服務(wù)
  • express -》node
  • bodyParser --》
  • app.use('bodyParser') -->中間件
  • app.use(express.static('./')) --》中間件靜態(tài)資源
• 請(qǐng)求 vue-resource
  • npm install --save-dev vue-resource
  • get請(qǐng)求

     服務(wù)端：
      app.get('/get',(req,res)=>{
          res.send('這是通過(guò)get發(fā)送的請(qǐng)求')
      })
     前端：
     <div id="app">
         <button type="button" @click="get">get請(qǐng)求</button>
         <div>{{msg}}</div>
     </div>
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  msg: ""
              },
              methods: {
                  get(){
                      this.$http.get('/get?name=warm&age18').then(res => {
                          this.msg = res.body;
                      })
                  }
              }
          })    
              
  

• post 請(qǐng)求

      服務(wù)端：
      app.post('/post',(req,res)=>{
          console.log(req.body);
          res.send(req.body);
      })
      前端：
      <div id="app">
          <button type="button" @click="post">post請(qǐng)求</button>
          <div>{{msg}}</div>
      </div>
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  msg: ""
              },
              methods: {
                  post(){
                      this.$http.post('/post', {
                          name: 'warm',
                          age: 18
                      }).then(res => {
                          var str=JSON.stringify(res.body);
                          this.msg=`這是通過(guò)post請(qǐng)求的數(shù)據(jù)${str}`
                      })
                  }
              }
          })
      </script>
  
  

• jsonp

     前端：
     <div id="app">
         <button type="button" @click="jsonP">jsonP請(qǐng)求</button>
         <div>{{msg}}</div>
     </div>
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  msg: ""
              },
              methods: {
                  jsonP(){
                      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                          params:{
                              wd:'chuqiaozhuan'
                          },
                          jsonp:'cb'
                      }).then(res=>{
                          this.msg=res.body.s
                      })
                  }
              }
      
          })
      </script>