vue学习大纲1-基础，事件和数据交互
2017-06-02 本文已影响509人
cd72c1240b33
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元素
- 表达式{{}}
<div id="app">
<!--双向数据绑定，需要一个指令;所有的表单元素，都需要增加v-model元素-->
<input type="text" v-model="msg">
<!--表达式,支持赋值; 三元表达式; 运算-->
{{msg}}{{age=100}} {{msg=="hello"?200:msg}} {{1+3*2}}
</div>
常用指令
+ v-model 双向数据绑定
+ v-once 注意：绑定一次在 1.0中用{*msg} {{{msg}}}；已被废弃；
+ v-html="msg" =>msg的数据为`<h1>哈哈哈哈哈哈</h1>`
+ v-on:click 但他会报错，建议写成@click
arr-for 遍历数组
+ 1.0 如果数组中有相同的数据，可以用track-by=$index;
```
<!--遍历数组时，需要增加 track-by=$index -->
<!--我们常绑定的数据为对象和数组-->
<!--<div id="app">{{arr}}</div>-->
<div id="app">
<!--要重复谁，就在谁的身上写v-for -->
<ul>
<!--a变量，代表就是arr中的某一个;这是1.0的写法-->
<!--track-by="$index":强制跟随索引遍历数组，这样就不会报错-->
<li v-for="(index,val) in arr" track-by="$index">{{val}} {{index}}</li>
</ul>
</div>
```
+ 2.0 中，track-by已被废弃;key和value的顺序已接近原生forEach();arr.forEach((item,index)=>{})
```
<ul>
<!--track-by="$index":在2.0已被废弃-->
<li v-for="(val,index) in arr">{{val}} {{index}}</li>
</ul>
```
obj-for遍历对象
+ 1.0 可以使用$index,$key
```
//不使用小括号
<ul>
// val代表的是obj中的值
<li v-for="val in obj">{{val}} {{$index}} {{$key}}</li>
</ul>
```
```
//使用小括号
<ul>
<li v-for="(key,val) in obj">{{val}} {{$index}} {{key}}</li>
</ul>
```
+ 2.0 不能使用不认识的字符，比如$index,$key等
```
<ul>
<!--如果v-for不使用小括号，还只是value；使用小括号，在1.0中是key，val;在2.0中是val,key-->
<li v-for="(val,key) in obj">{{key}} {{val}}</li>
</ul>
```
v-show和v-if
- 真的消失（v-if="flag"） 和 样式上的消失(v-show)
- 如果频繁切换显示或隐藏，就用v-show;它的原理是display:none
- 判断数据是否存在，就用v-if ;它的原理：removeChild()
//html部分
<div id="app">
<div v-if="flag">是否为true，true显示，否则消失</div>
<div v-if="obj">{{obj.name}}</div>
</div>
//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<button @click="fn($event)">增加手机按钮</button>- 所有关在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') } } }) - 所有关在data上的东西，都是实例的属性；所以所有数据都会挂在this实例上；
高级事件
-
阻止冒泡：
- 思路1：在fn中用原生 e.stopPropagation()
- 思路2：利用vue自带的修饰符 @click.stop="fn"
<div @click.stop="fn">child</div> -
阻止默认事件
- 思路1：在fn中用原生 e.preventDefault()
- 思路2：利用vue自带的修饰符 @click.prevent
<a href="http://www.baidu.com" @click.prevent="fn1">ymy</a>
键盘事件
- 思路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"
-
动态绑定class
- 对象形式：根据boolean类型，增加样式
<div :class="{back:flag,color:!flag}">ymy</div> data:{ flag:true }- 数组形式：
<div :class="[back1,col1]">ymy</div> data:{ back1:"back", col1:"color" } -
动态绑定style
- 对象绑定
<div :style="{background:'green',color:'white'}">哈哈哈哈</div>- 数组绑定
<div :style="[a,b]">aaaaaaaaa</div> 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)
})
