vue知识点总结

目录

1、forEach()和for循环

2、Object.keys()

3、标签

4、v-model双向绑定数据

5、v-html

6、vue-router跳转方式

7、filters过滤器

 

 

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 中。