正文
2018.7.13vue知识小结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
for循环
<ul>
普通循环
<li v-for="value in arr">{{value}}</li>
<li v-for="value in user">{{value}}</li> 键值循环
<li v-for="(v,k) in arr">{{k}}={{v}}</li>
<li v-for="(v,k) in user">{{k}}={{v}}</li> 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by
<li v-for="(v,k) in arr2" :key="k">{{v}}</li> <li v-for="(user,index) in users">
{{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>
</ul>
通过表单给table添加行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习：用户管理</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<script src="bootstrap/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<body>
<div class="contaienr">
<h2 class="text-center">添加用户</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名</label>
<div class="col-sm-6">
<input class="form-control" id="name" placeholder="请输入姓名" v-model="user.name">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-primary" value="重置" @click="addUser">
<input type="reset" class="btn btn-primary" value="添加" >
</div>
</form>
<hr>
<!--表格-->
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" class="text-center">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>
<button class="btn btn-danger btn-sm" @click="nowIndex=index" data-toggle="modal" data-target="#del">删除</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1" data-toggle="modal" data-target="#del">删除所有</button>
</td>
</tr>
</tbody>
</table> <!-- 模态框，弹出框 -->
<div class="modal fade" id="del">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4>
<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
</div>
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-primary" data-dismiss="modal" @click="deleteUser">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vm=new Vue({
el:'.contaienr',
data:{
users:[
{name:'tom',age:24,email:'tom@itany.com'},
{name:'jack',age:23,email:'jack@sina.com'}
],
user:{},
nowIndex:-1,
},
methods:{
addUser(){
this.users.push(this.user)
this.user={}
},
deleteUser(){
if(this.nowIndex=-1){
this.users=[];
}else{
this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个 }
}
}
})
</script>
自定义一个全局过滤器：
<body>
<div id="itany">
<h3>{{3 | addZero}}</h3>
<h3>{{30 | addZero}}</h3>
</div>
</body>
</html>
<script>
Vue.filter('addZero',function(date){
return date<10?'0'+date:date;
})
new Vue({
el:'#itany',
data:{
date:'',
}
})
//页面返回值：03||30
</script>
自定义全局格式化日期的过滤器：
<body>
<div id="itany">
<h3>{{date | date}}</h3>
</div>
</body>
</html>
<script>
Vue.filter('date',function(date){
let d=new Date(date)
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
//2018-7-13 17:22:14
})
new Vue({
el:'#itany',
data:{
date:Date.now(),
}
})
</script>
自定义四舍五入局部过滤器：
<body>
<div id="itany">
<h3>{{12.345678 | number(2)}}</h3>
</div>
</body>
</html>
<script> new Vue({
el:'#itany',
data:{
data:'',
},
filters:{
number:(data,n)=>{
return data.toFixed(n)//12.35
}
}
})
</script>
讲义内容：
+ 是一个构建用户界面的框架
+ 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
+ 数据驱动+组件化的前端开发（核心思想）
+ 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
+ 更容易上手、小巧
## 二、起步
### 1. 下载核心库vue.js
bower info vue
npm init --yes
cnpm install vue --save
vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快
### 2. Hello World（对比angular）
#### 2.2 vue实现
js:
new Vue({
el:'#itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div> ### 3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中 //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息 ## 三、 常用指令
### 1. 什么是指令？
用来扩展html标签的功能
### 2. vue中常用的指令
+ v-model
双向数据绑定，一般用于表单元素
+ v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隐式变量，如$index、$key
在vue2.0中去除了隐式变量，已被废除
+ v-on
用来绑定事件，用法：v-on:事件="函数"
+ v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似
## 五、 事件和属性
### 1. 事件
#### 1.1 事件简写
v-on:click=""
简写方式 @click=""
#### 1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx
#### 1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop
#### 1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
#### 1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
#### 1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
### 2. 属性
#### 2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:src="" 简写为 :src=""
#### 2.2 class和style属性
绑定class和style属性时语法比较复杂：
## 六、 模板
### 1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
### 2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
### 3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
## 七、 过滤器
### 1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}
### 2. 关于内置过滤器
vue1.0中内置许多过滤器，如：
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器
各种请求封装：
methods:{
send(){
axios({
method:'get',
url:'user.jsonaaa'
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
// console.log(resp);
console.log('请求失败：'+resp.status+','+resp.statusText);
});
},
sendGet(){
// axios.get('server.php?name=tom&age=23')
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
sendPost(){//post请求传参数的时候，需要改变样式；
// axios.post('server.php',{
// name:'alice',
// age:19
// })
// axios.post('server.php','name=alice&age=20&') //方式1
axios.post('server.php',this.user,{
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
getUserById(uid){
axios.get(`https://api.github.com/users/${uid}`)
.then(resp => {
// console.log(resp.data);
this.user=resp.data;
});
},
sendJSONP(){
//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(resp => {
console.log(resp.data.s);
});
},
sendJSONP2(){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改
}).then(resp => {
console.log(resp.data.s);
});
}
}
组件的生命周期：
beforeCreate(){
alert('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){ //常用！！！
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){ //常用！！！
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
vue的属性：
/*var vm=new Vue({
// el:'#itany',
data:{
msg:'welcome to itany'
},
name:'tom',
age:24,
show:function(){
console.log('show');
}
});*/
/**
* 属性
*/
//vm.属性名 获取data中的属性
// console.log(vm.msg);
//vm.$el 获取vue实例关联的元素
// console.log(vm.$el); //DOM对象
// vm.$el.style.color='red';
//vm.$data //获取数据对象data
// console.log(vm.$data);
// console.log(vm.$data.msg);
//vm.$options //获取自定义属性
// console.log(vm.$options.name);
// console.log(vm.$options.age);
// vm.$options.show();
//vm.$refs 获取所有添加ref属性的元素
// console.log(vm.$refs);
// console.log(vm.$refs.hello); //DOM对象
// vm.$refs.hello.style.color='blue';
// this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
局部属性watch:
watch:{ //方式2：使用vue实例提供的watch选项
age:(newValue,oldValue) => {
console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
},
user:{
handler:(newValue,oldValue) => {
console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
},
deep:true //深度监视，当对象中的属性发生变化时也会监视
}
}
全局watch:
//方式1：使用vue实例提供的$watch()方法
vm.$watch('name',function(newValue,oldValue){
console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue);
});
父子组件之间的数据传递：
<body>
<div id="itany">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是hello父组件</h3>
<h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
<h3>访问子组件的数据：{{sex}},{{height}}</h3>
<hr>
<my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
</div>
</template>
<template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
<h4>访问自己的数据：{{sex}},{{height}}</h4>
<button @click="send">将子组件的数据向上传递给父组件</button>
</div>
</template>
<script>
var vm=new Vue({ //根组件
el:'#itany',
components:{
'my-hello':{ //父组件
methods:{
getData(sex,height){
this.sex=sex;
this.height=height;
}
},
data(){
return {
msg:'网博',
name:'tom',
age:23,
user:{id:9527,username:'唐伯虎'},
sex:'',
height:''
}
},
template:'#hello',
components:{
'my-world':{ //子组件
data(){
return {
sex:'male',
height:180.5
}
},
template:'#world',
// props:['message','name','age','user'] //简单的字符串数组
props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
message:String,
name:{
type:String,
required:true
},
age:{
type:Number,
default:18,
validator:function(value){
return value>=0;
}
},
user:{
type:Object,
default:function(){ //对象或数组的默认值必须使用函数的形式来返回
return {id:3306,username:'秋香'};
}
}
},
methods:{
send(){
// console.log(this); //此处的this表示当前子组件实例
this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
}
}
}
}
}
}
});
</script>
</body>
reduce()方法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue) function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。 total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值
购物车代码：
<body>
<div id="app" class="container">
<h2 class="text-center">购物车</h2>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="text-center">商品编号</th>
<th class="text-center">商品名称</th>
<th class="text-center">购买数量</th>
<th class="text-center">商品单价</th>
<th class="text-center">商品总价</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in commodities" class="text-center">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button class="btn btn-primary" @click="subtract(index)">-</button>
<input type="text" v-model="item.quantity">
<button class="btn btn-primary" @click="add(index)">+</button>
</td>
<td>{{item.price | filterMoney}}</td>
<td>{{item.price*item.quantity | filterMoney}}</td>
<td>
<button class="btn btn-danger" @click="remove(index)">移除</button>
</td>
</tr>
<tr>
<td colspan="2">总数量：{{totalNum}}</td>
<td colspan="2">总金额：{{totalMoney | filterMoney}}</td>
<td colspan="2">
<button class="btn btn-danger" @click="empty()">清空购物车</button>
</td>
</tr>
<tr v-show="commodities.length===0">
<td colspan="6" class="text-center text-muted">
<p>您的购物车空空如也....</p>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
commodities: [
{id: 1001,name: 'iphone5s',quantity: 3,price: 4000},
{id: 1005,name: 'iphone6',quantity: 9,price: 5000},
{id: 2001,name: 'imac',quantity: 4,price: 7000},
{id: 2004,name: 'ipad',quantity: 5,price: 2000}
]
},
computed:{
totalNun:function(){
var sum=0;
this.commodities.forEach(function(item){
sum_=item.quantity;
})
return sum;
},
totalMoney:function(){
return this.commodities.reduce(function(pre,cur,index,array){
return pre+cur.price*cur.quantity
},0)
},
},
filters:{
filterMoney:function(value){
return '$'+value;
}
},
methods:{
add:function(index){
this.commodities[index].quantity++
},
substract:function(index){
var item=this.commodies[index];
if(item.quantity==1){
if(confirm(`确定要删除商品：${item.name} 吗？`)){
this.commodities.aplice(index,1);
}
return;
}
item.quantity--;
},
remove:function(index){
if (confirm(`确定要删除商品：${this.commodities[index].name} 吗？`)) {
this.commodities.splice(index, 1)
}
},
empty:function(){
this.commodities=[];
}
}
})
</script>
</body>
