目录
1、forEach()和for循环
var arr = ['a','b','c'];
arr.forEach(function(val,index){
console.log(val);
})
//按顺序输出a b c
forEach和for都是遍历数组,但forEach可用于数组长度未知的情况,且当数组为空时,回调函数不会执行。for循环相对要啰嗦些,更建议使用forEach。
2、Object.keys()
var obj = { id: '1', name: 'cyh', city: 'guangzhou' };
console.log(Object.keys(obj));
//输出 ["id", "name", "city"]
顾名思义,返回由对象的键组成的数组,即属性名的数组,可与数组遍历结合使用,如下图。
let obj = { id: '1', name: 'cyh', city: 'guangzhou' };
let arr = Object.keys(obj);
arr.forEach(val => {
console.log(val,obj[val]);
})
//输出
//id 1
//name cyh
//city guangzhou
3、<template>标签
- <template>标签默认为隐藏,其display属性默认为none
- 标签位置任意性,可放在任意标签中
- childNodes为空,使用template.content获取伪子元素
用于场景
- 在vue中用来写html模板
- 列表渲染,v-for循环,与使用div标签相比,可减少一层div
- 用于条件渲染,和v-if使用,默认隐藏
4、v-model双向绑定数据
- 实现单选场景,v-model和value搭配使用
<input type="radio" id="vue" v-model="selectedRadio" value="vue"/>
<label for="vue">VUE</label>
<input type="radio" id="js" v-model="selectedRadio" value="js"/>
<label for="js">JS</label>
<input type="radio" id="css" v-model="selectedRadio" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是:{{selectedRadio}}</p>
// data数据
selectedRadio: 'vue',
- 实现多选场景,v-model和value搭配使用
<input type="checkbox" id="vue" v-model="checked" value="vue"/>
<label for="vue">VUE</label>
<input type="checkbox" id="js" v-model="checked" value="js"/>
<label for="js">JS</label>
<input type="checkbox" id="css" v-model="checked" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是:{{checked}}</p>
// data数据
checked: ['vue'],
单选和多选主要的不同在于data数据,单选为字符串,多选为数组
常用修饰符
- lazy,v-model默认在input事件中同步输入框的值,但使用lazy则变为在change事件中同步
<input type="text" v-model.lazy="message"/>
<p>当前输入是:{{message}}</p>
- number,将输入转为Number类型,默认为String
- trim,自动过滤首尾空格
5、v-html
v-html用于内嵌html标签
6、vue-router跳转方式
(1)router-link
//不带参数
<router-link :to="{name:'home'}"> //推荐用name
<router-link :to="{path:'/home'}">
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
//带参数
<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
(2)this.$router.push()
// 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
// query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
//params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
// query和params区别
// query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params
// params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id会消失
(3)this.$router.replace()
和this.$router.push()用法相同,区别:
- push会向history栈中添加一个新纪录,点击浏览器的返回按钮,可返回到当前页
- replace不像history栈添加记录,而是替换当前的记录,返回时,直接跳过该页
(4)this.$router.go(n)
this.$router.go(-1); //向后跳转一个页面
this.$router.go(2); //向前跳转两个页面
//参数为整数,向前或向后跳转n个页面
7、filters过滤器
平常开发中用的最多的是下面这种形式,对内容进行过滤,只有一个参数
{{ number | textFilters }}
filters: {
textFilters(val) {
if (val === 0){
return false;
} else {
return true;
}
}
}
前段时间开发中遇到一个场景,需要对返回的数据进行稍微复杂的过滤,循环遍历显示,需要另外两个data变量值,一开始只想到把这两个data变量值push到目标数组中,但这么处理怎么看怎么繁琐,后百度才知道过滤器是可以最多传3个参数的,也怪了解的太少。
{{ number | textFilters('hello','world' }}
filters: {
textFilters(val,data1,data2) {
if (val === 0){
return 'hhh' + data1;
} else {
return 'hhh' + data2;
}
}
}
去看了下官网,原来过滤器还可以串联
{{ message | filterA | filterB }}
filterA
被定义为接收单个参数的过滤器函数,表达式message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB
,将filterA
的结果传递到filterB
中。