Vue 2.X+ Router + Cli + VueX ( 六角课程笔记 )

1. 双向绑定 v-model

小技巧：不会让使用者点选到第一个option

2.渲染 v-for、v-if、v-else、v-show

3. 渲染 v-bind

4. 渲染 v-style 可用物件或阵列陈述

:class

5. 事件绑定 v-on

6. computed

只读不写无法直接this.xxx = xxx
差异：computed function名称无需使用 data
使用：内部的变数若变更，会直接触发computed
变数通常为data并且绑v-model
ex: get set

* computed 可抓 computed 来使用 (@{}@!!)

    // 取得各状态总笔数
    filteredPage() {
      if (this.visibility === "all") {
        console.log("this.toDos", this.toDos);
        return this.toDos;
      }
      if (this.visibility === "active") {
        let activeFilter = this.toDos.filter((item) => {
          return item.completed === false;
        });
        console.log("activeFilter", activeFilter);
        return activeFilter;
      }
      if (this.visibility === "completed") {
        let completedFilter = this.toDos.filter((item) => {
          return item.completed === true;
        });
        console.log("completedFilter", completedFilter);
        return completedFilter;
      }
      return "";
    },
    // 藉由总笔数取得分页
    filterGetPage() {
      let filterPage = [];
      this.filteredPage.forEach((item, index) => {
        if (index % 5 === 0) {
          // 0/0 === 0 =_=
          filterPage.push([]);
        }
      });
      return filterPage;
    },

7.watch

差异：直接将v-model所绑的data 命名function
使用：监听data资料，改变直接触发
通常只能一次监听一个变数
若要一次监听多个需使用深度监听 > deep+物件

watch 监听阵列或物件中其一属性

8.Vue 生命周期

ex:v-if
(1) DOM生成

(2) Updated + destroyed

(3) 保留资料 keep-alive

9.Vue Component

注意html标签不能大写、元件data记得return

根元件

子元件

全域注册元件

10.Props (外传内)

Props 注意事项

(1) 子元件拿取根元件资料，改根元件资料时会跳错

解决：另给子元件一个data装下该值，就不会直接更改到跟元件资料

(2) ajax抓资料速度不同，使用v-if判断有无抓到资料而後显示该元素

(3) 维持状态与生命周期

11. Emit 内传外 or 触发(传递)事件

12. slot 使用他人套件，欲套用自己的内容时

一次全换

抽换

13. is 动态切换元件

效果同下v-if

14. Vue Cli

(1) 安装 node + Vue cli 并建立专案

vue create new-projext(专案名称)

a. 上课教学

b. 打完指令後选最下面的，自订安装
prettier 不熟悉语法用

(2) 专案建立完成

npm run build
npm run serve

(3) 架构

15. Vue Router

(1) 虚拟路径配置

(2) 虚新增路径及连结

(3) 巢状路由

(4) 动态路由 npm install axios

抓取网址列後段进行操作

(5) 同一个路径载两个元件

(6) router方法

15. VueX

禁止於Vue各元件档案直接抓底层资料 ( this.$store.state.XXX )
解决：getter 先抓资料 ( 详见(1) )
同前 ( this.$store.commit ) 禁止
解决：action 先抓资料给 mutation变更，action才可用commit ( 详见(2) )