vue学习大纲1-基础，事件和数据交互

vue快速上手

vue.js

• 是一套构建用户界面的，渐进式框架；
• MVVM框架，易学，轻量，灵活
• vue的质量以v-xxx,属性方法均挂在VUE的实例上，适用于移动端项目；

vue1.0 & vue2.0

• 通过npm install bower
• bower info vue 查看vue的所有版本；

双向数据绑定+表达式

• 一块json+html
• 双向数据绑定viewModel
  view <--> viewModel -><-model
• 双向数据绑定，必须满足视图可以更改， eg：表单元素input
  • 双向数据绑定，需要一个指令;所有的表单元素，都需要增加v-model元素
• 表达式{{}}

    
    
    
    {{msg}}{{age=100}} {{msg=="hello"?200:msg}} {{1+3*2}}

常用指令

+ v-model 双向数据绑定
+ v-once 注意：绑定一次在 1.0中用{*msg} {{{msg}}}；已被废弃；
+ v-html="msg"  =>msg的数据为`
哈哈哈哈哈哈
`
+ v-on:click 但他会报错，建议写成@click

arr-for 遍历数组

+ 1.0 如果数组中有相同的数据，可以用track-by=$index;

```




    
    

        
        
        
{{val}} {{index}}
    

```
+ 2.0 中，track-by已被废弃;key和value的顺序已接近原生forEach();arr.forEach((item,index)=>{})

```

    
    
{{val}} {{index}}

```

obj-for遍历对象

+ 1.0 可以使用$index,$key
```
//不使用小括号

   // val代表的是obj中的值
    
{{val}} {{$index}} {{$key}}

```
```
//使用小括号

    
{{val}} {{$index}} {{key}}

```
+ 2.0 不能使用不认识的字符，比如$index,$key等
```

    
    
{{key}} {{val}}

```

v-show和v-if

• 真的消失（v-if="flag"） 和 样式上的消失(v-show)
• 如果频繁切换显示或隐藏，就用v-show;它的原理是display:none
• 判断数据是否存在，就用v-if ;它的原理：removeChild()

//html部分

    
是否为true，true显示，否则消失
    
{{obj.name}}


//js部分
new Vue({
        el:'#app',
        data:{
            flag:false,
            obj:{name:1} //切记obj不能删，可以赋值为null或undefined
        }
    })

实战-购物车:

实战样式

• 涉及技术栈：
  • bootstrap央视布局
  • 绑定数据，事件，函数
  • v-show 条件显示和隐藏
  • v-modle 双向数据绑定
  • v-for 遍历数组

vue中的事件和数据交互

事件基础

• fn：加括号，一般用于传递参数，如果传递参数要手动增加$event;
  //如果用v-on:click会报红，所以简写成@事件名，如@click

  增加手机按钮
  

  • 所有关在data上的东西，都是实例的属性；所以所有数据都会挂在this实例上；
    数据存放地，和函数存放地；

  var vm=new Vue({
      el:'#app',
      data:{//这里放所有数据；所有放在data上的东西，都是实例的属性；所以所有数据都会挂在this实例上；
          arr:["iphone6","iphone7","iphone8"]
      },
      methods:{//这里放所有函数；所有方法中的this指向都是实例；
          fn(e){
              console.log(this)//this就是实例；
              this.arr.push('66666')
          }
      }
  })
  

高级事件

• 阻止冒泡：

  • 思路1：在fn中用原生 e.stopPropagation()
  • 思路2：利用vue自带的修饰符 @click.stop="fn"

  child
  

• 阻止默认事件

  • 思路1：在fn中用原生 e.preventDefault()
  • 思路2：利用vue自带的修饰符 @click.prevent

  ymy
  

键盘事件

• 思路1：利用原生e.keyCode进行判断
• 思路2：vue自身提供的修饰符 @keydown.enter="fn"
  • 以上enter，也可以写为数字 @keydown.13="fn"
  • 其他类似 @keydown.up @keydown.down @keydown.right @keydown.left

动态绑定：

• 绑定动态数据，需要使用bind;v-bind:src="attr" 可以简写为 :src="attr"

  • ![](attr)

• 动态绑定class

  • 对象形式：根据boolean类型，增加样式

  ymy
  data:{
      flag:true
  }
  

  • 数组形式：

  ymy
  data:{
      back1:"back",
      col1:"color"
  }
  

• 动态绑定style

  • 对象绑定

  哈哈哈哈
  

  • 数组绑定

  aaaaaaaaa
  data:{
      a:{fontSize:"55px"},
      b:{backgroundColor:'yellow'},
      flag:true
  }
  

请求数据

vue-resource

• get请求

//配合服务器
//this是vue的实例； get请求
this.$http.get('/getData').then(function (res) {
    this.msg=res.body;
})

• post请求，配合body-parser

//前端
this.$http.post('/postUser',{"name":"ymy"}).then(function (res) {
    console.log(res.body);

})

//服务器
app.use(bodyParser.json())；//利用bodyparser模块接收传过来的json数据；
this.$http.post('/postUser',{"name":"ymy"}).then(function (res) {
    console.log(res.body);
})

• jsonp请求

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    params:{//参数
        wd:'c'
    },
    jsonp:'cb'//回调的函数名
}).then(function (res) {
    console.log(res.body.s)
})

实战：百度搜索