vue 入门notes

vue

• 每一个组件都是一个页面(html/template+js+css/scss)，实现组件的完整性——组件化

• main.js入口文件，在这里可以引入用到的node_modules包(模块)以及插件，即用即导入——模块化

• App.vue 根组件(根页面)，

• meta viewport 移动端窗口（视口），可以使用百度界面的meta标签的 viewport属性

• 若在全局样式有 html{font-size:62.5%} —— 将字体变为0.625倍，为了适合移动端，则此时的 1rem 就 相当于电脑的 1px ！

• 创建项目：
  
  第一次安装脚手架：
  cnpm install -g vue-cli （安装vue cli2脚手架）
  vue init webpack demo1 （vue init webpack-simple demo1）
  npm run dev
  npm run build
  OR
  cnpm install -g @vue/cli （安装vue cli3脚手架）
  vue create demo1
  运行：npm run serve （运行速度比2快了许多）
  编译：npm run build

• vue cli3 提供了GUI界面来创建（管理）项目：
  vue ui
  然后进入locallhost:8080

一、js基础

二、封装缓存

1、直接使用：

2、封装后使用：

三、组件

组件挂载。页面由组件组成。路由：动态挂载组件。创建组件，开头大写，组件=template+js+scss，所有内容要被根节点包含起来，组件必须包含根元素（一般是div）。自定义标签名不能重复。

1、组件创建、引入、挂载、使用

2、组件间的传值

组件间的传值，可以是变量（地址），也可以是对象（函数–地址），还可以是整个组件（类–地址）！

- 父组件主动获取子组件的数据和方法（子组件给父组件传值）：

父组件主动获取子组件的数据和方法：

- 子组件主动获取父组件的数据和方法（父组件给子组件传值）：

子组件主动获取父组件的数据和方法:


父组件给子组件传值：

例子： 无论是传变量、函数还是组件，父组件传值方式都是动态属性绑定，子组件接收方式有两种，一种props数组形式接收——props:[]，一种props对象形式接收，对象形式接收可以验证父组件传值的合法性！
父组件传变量：

子组件props数组接收变量：

子组件props对象接收变量并验证，验证不通过则会出现警告：

-非父子组件间的传值

广播方式

例子：

Vuex方式 – 解决（不同页面）组件间数据共享

Vuex是vue官方提供的状态管理插件，解决（不同页面）组件间同一状态的数据共享问题和组件的数据持久化。
也可以通过localstorage（缓存）实现，也可以使用SessionStorage实现！
注:小项目中，能不用Vuex就不用。

1、数据共享

---

---

2、数据持久化
直观体现：在控制台的network中，多次请求数据时，如果用缓存则会多次请求，若用Vuex则可以达到一次请求，多次使用（并且动态改变、共享）。

---

四、生命周期(钩子)函数

五、请求数据的三种方式

1、vue-resource

2、Axios

3、fetch-jsonp

4、tips

• Axios不支持jsonp请求。而fetch-jsonp可以支持，可以在vue、react中使用，fetch-jsonp用法和Axios很像。
• vue-resource是vue的官方插件，在man.js引入并使用后，全局组件都可以直接使用，这是一个被推荐的重要原因；而Axios则是在哪里需要在哪引入，Axios可以在vue、react中使用。
• 要用箭头函数替代function，避免指向被改变。
• 安装依赖包时一定要加 --save，这样会在package.json中声明版本，下次install才能被找到。
• vue-resource、Axios、fetch-jsonp都可以在git上找到源码和安装使用方法

六、路由（自动挂载组件以及加载数据）

1、配置路由

补充：第五步：设置路由出口（即在哪个作用域下渲染这些路由下的组件）

2、实际使用

1、配置

2、 ‘/’ 路由出口（放在根组件）：

3、router-link 路由出口（类似a标签）：

4、Js编程式路由（编程式导航）：由js代码主动发起路由

其实 点击 router-link组件，内部调用的也是 router.push()方法

5、vue路由的hash模式（默认，有#）和history模式（无#）

6、路由的嵌套

3、路由传参

get传参

post传参

4、路由模块化

路由模块化 —— 单独开一个js文件放路由配置，然后export暴露，在main.js中引入并挂载