第一种（不推荐）

用法：ref=”名字”
例子：

1
2
3
4
5
6
7
8
9

componentDidMount() {
   this.refs.dom.style.width = "100px";
   this.refs.dom.style.height = "100px";
   this.refs.dom.style.backgroundColor = "red";
 }

 render() {
   return (<div ref="dom"></div>)
 }

运行效果图：

一、app.get()、app.post()

配置客户端路由（请求地址）。

1
2
3

app.post('/get_json/:id', function (req, res) {
  // 响应块代码
})

这里配置了一个POST请求的地址。将app.post()改成app.get()也是可以的，只是请求类型会变成get。

一、路由复用

路由复用要在相对应的路由中添加的是在components里面，不是children。
例如：

1
2
3
4
5
6
7
8
9
10

{
    path: "/",
    name: "Home",
    components: { //这里是components不是component
      default: Home,
      "Delivery": Delivery,
      "History": History,
      "OrderingGuide": OrderingGuide
    }
}

Vue2.0以后内置过滤器都去掉了，要用filters只能自定义写。

一、自定义filters过滤器

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

版本

目前使用的是vue-cli4.0

1、打包vue 项目

vue项目：
现在github上传建一个github.io仓库，例如xxx.github.io，并再创建一个gh-pages分支。

在本地先把本地仓库上传到远程仓库的master分支。

indexOf和search的区别

search和indexOf的作用都是匹配出符合条件的字符串的索引位置，区别是search能用正则表达式匹配

需求

子组件想要改变父组件传入的值（props）

例子：
点击按钮，改变数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 父组件代码
<hello-world :msg="str"></hello-world>
data(){
    return{
        str:"啦啦啦"
    }
},
    
//子组件代码
<template>
  <div class="hello">
    <button @click="change">改变</button>{{ msg }}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    change(){
      this.msg="已改变"
    }
  }
}
</script>

先看一下源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 创建路由
  const router = express.Router();
  app.use("/api", router);

  // 创建session
  const session = require('express-session');
  app.use(session({
      secret: 'dfafadfadfa', //秘钥
      resave: true,          //即使 session 没有被修改，也保存 session 值，默认为 true。
      saveUninitialized: true,//无论有没有session cookie，每次请求都设置个session cookie ，默认给个标示为 connect.sid
      cookie: ('name', 'value', { secure: false })//当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效。
  }))
  
  router.use("/aaa",(req,res)=>{
      console.log(req.session)
  })

结果当访问到api/aaa地址时，node打印出来的是undefined

cookie、Local Storage、Session Storage 定义

Cookie（局限性）：用户可以禁用cookie，最多只能存储4kb，cookie有过期时间的（一般我们设置的时间最长1个月，用户使用杀毒软件也可以清除我们的cookie），cookie还需要指定作用域，不可以跨域调用。

LocalStorage：持久化存储到本地，没有过期时间，最大可存储5MB
都是采用的明文存储，我们在控制台（Resource）下可以看到存储的信息，所以本地存储都是不安全的（不要存储重要的信息，如果需要的话，我们需要对重要的信息进行严格的加密—md5加密）

WebStorage(localStorage(常用，sessionStorage))
由于我们的localStorage可以存储很多的数据，我们在项目中把不经常更新的数据进行存储，下一次打开页面，先把本地缓存的数据展示，减少对于服务器的请求压力—移动端的本地缓存。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

有个终极方法解决数组和对象的相互转换问题

下面的两个例子都是es6语法。

1. 数组转换成对象：
   知识点： 扩展运算符…

   1 2 3

   let arr = [1,2,3]; let obj = {...arr}; console.log(obj); //{0: 1, 1: 2, 2: 3}

2. 对象转换成数组
   知识点： Object.values(obj)

   1 2	var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c']