vue-2

1. 阻止事件冒泡
   • @click.stop='事件名'
   • e.stopPropagation?e.stopPropagation():e.cancelBubble=true
2. 阻止默认事件
   • @click.prevent
   • e.preventDefault?e.preventDefault():e.returnValue=true
3. 键盘事件
   • @keydown @keyup @keypress
   • 使用指定键
     • @keydown.enter
     • @keydown.13
4. 动态绑定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}">你能看见我吗</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            bok: true
        }
    })
</script>

• data创建数据

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

    <div :class="objClass">你能看见我吗</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>

• 数组形式

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

5. 动态添加style

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

• 对象添加

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

6. 数据请求

• app.js 服务
  • express -》node
  • bodyParser --》
  • app.use('bodyParser') -->中间件
  • app.use(express.static('./')) --》中间件静态资源
• 请求 vue-resource
  • npm install --save-dev vue-resource
  • get请求

     服务端：
      app.get('/get',(req,res)=>{
          res.send('这是通过get发送的请求')
      })
     前端：
     <div id="app">
         <button type="button" @click="get">get请求</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 请求

      服务端：
      app.post('/post',(req,res)=>{
          console.log(req.body);
          res.send(req.body);
      })
      前端：
      <div id="app">
          <button type="button" @click="post">post请求</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=`这是通过post请求的数据${str}`
                      })
                  }
              }
          })
      </script>
  
  

• jsonp

     前端：
     <div id="app">
         <button type="button" @click="jsonP">jsonP请求</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>