VUE的学习笔记

vue和react的区别。

vue1.0是双向绑定的，vue2.0是单向绑定的，v-model是一个语法糖。
react是单向数据流。

vue有runtime版本和非runtime版本

node里面是没有DOM的
浏览器里面有DOM
runtime版不能操作DOM，是给node准备的。

v-model实现的双向绑定

v-model是语法糖

<input type="text"  :value=user.name @input="user.name = $event.target.name">

等价于
<input type="text" v-model="user.name">

vue记不住光标的位置，每次输入都是由父元素将输入重新渲染。每次光标回到最前面。

FLUX兴起之后，vue的作者发现了双向绑定的一些问题之后，更倾向于单向绑定。
如果两个input都绑定了一个元素，两个人同时去操作input，就会出现问题。数据可能在任何一个时间任何一个地点被修改了。
所以一个数据只能一个人改，拥有这个数据的人才能改。
所以有了现在的v-model拆成了两部分实现。
优点：
1.数据拥有者清楚的知道数据变化的原因和时机，因为是他自己操作的；
2.数据拥有者可以阻止非法的数据变化。

vue通过两个单向绑定来模拟双向绑定所以通过修改@input的回调函数实现拦截。要改的话v-model是不行的，要把语法糖解开。

vue-router

前端路由的优缺点

• 优点： 用户体验很好，不需要每次都从服务器获取，快速展现给用户
• 缺点： 1. 不利于seo，如果有十个页面，可能只有第一个页面会参与seo
  2. 使用浏览器前进后退，会重新发送请求，没有合理利用缓存
  3. 单页面无法记住之前滚动的位置，无法在前进后退的时候记住滚动的位置。

区分组件还是页面

可以通过文件夹去区分这里是组件还是一个独立的页面，但是本质上是一样的。

动态路由

页面可以用$route.params.来获取参数

路由的hash

地址后面有#：路由的hash 默认是这种方式 mode:'hsah'
还有一种方式是在new Router时指定mode:'history'，这样就访问不到hash了。 history也是目前主流的方式。history更加接近原始

嵌套路由

//Index.js
export default new Router({
  routes: {
      path: '/goods',
      name: 'GoodList',
      component: 'GoodList',
      children: [ //children注意都是数组
          path: 'title', //子路由的path不要加/，加了就是一级的路由了
          name: 'title',
          component: 'Title'
       ]
  }

})
//在子路由的router-link的to属性要几级写全to = '/goods/title'

编程式路由

1. 通过js实现页面跳转
2. $router.push("name")
3. $router.push({})