vue做项目 - 必备知识

快速入门vue

1、 vue基本介绍

• mvc
• mvvm
• Vuejs特点
• 使用方式（cdn/npm）
• 双向数据绑定的初体验

2、基础指令

2.1、moustache** 闪烁问题

• v-text 识别文本 innerText
• v-html 识别文本+标签 innerHTML
• 案例：~~ 计数器~~

2.2、v-for 循环**

• 数组 对象 数字 字符串
• 案例：~~文件标题目录~~

2.3、v-show**

• v-if v-else-if v-else
• 案例：~~ 猜数字游戏 ~~

2.4、v-on**

• 语法糖 @
• $event解释
• 案例：~~ 显示隐藏 ~~
• ref的引出

2.5、综合案例**

• 登录注册切换
• key的引出

2.6、v-bind**

• 语法糖 :
• a href=""
• 动态属性class的解释
  • 字符串
  • 数组 【变量1，变量2】
  • 对象 {active:true,b:false}
• 动态属性style的解释
  • 字符串
  • 数组 【变量1，变量2】
  • 对象 {active:true,b:false}
• 案例： ~~ tab切换核心 高亮显示核心 ~~

2.7、v-model 结合表单使用**

• 1、结合input
• 案例：~~ todoList add-del~~
  -2、 结合radio
• 案例： ~~ 选男选女~~
• 3、结合checkbox
• @change @click比较
• 案例： ~~ 全选反选~~
• 4、v-model的原理
  • ：value =“msg”
  • @input=“change()” this.msg=ev.target.value

2.8、v-slot v-pre v-cloak v-once

• 参照官网了解即可

2.9、综合案例 购物车

• 涉及知识点：
• filters 过滤器 管道符
• computed 计算属性 算总价 全选反选
• watch 实现模糊搜索 生命周期钩子函数

2.10、修饰符

• 事件修饰符
• 按键修饰符
• 系统修饰符
• 表单修饰符
• sync
• native

2.11、生命周期（钩子函数8+2=10个）

• https://cn.vuejs.org/v2/guide/instance.htm

3、组件

3.1、组件的介绍和特点

• 模块 组件对比的介绍
• 展示型组件
• 功能型组件
  • 全局组件
  • 局部组件

3.2、组件的使用

• 1、定义组件
• 2、注册组件
• 3、使用组件

3.3、组件传参

• 1、父传子 自定义属性

  • App.vue 父组件 :list=“list”
  • list.vue 子组件 props:[“list”]

• 2、子传父 自定义事件

  • list.vue 子组件 @click=“change” this.$emit(发射事件名change,传递所需参数)
  • App.vue 父组件 @change=“change”

• 3 兄弟/隔代 组件传参 EventBus 了解

  • count.vue 孙子组件 this.$bus.$emit(发射事件add,type,index)
  • App.vue 父组件 this.$bus.$on(“add”,(type,index)=>{this.add()})

• 4 动态组件

  • component :is=“nowComponent”’
  • keep-alive
  • 补充剩下的生命周期
    • activated
    • deactivated

• 5 transition动画

• 6 递归组件

  • 多级菜单
  • 树形菜单

4、 脚手架 @vue/cli

4.1、脚手架的安装

• npm i @vue/cli -g
• vue create tab
  • 解释=>tab是(项目名称)
• cd tab
• npm run serve 启动项目的命令

4.2、综合案例（脚手架+组件）

• 京东 - tab切换
• 鲜花网 m.hua.com - tab切换 引出动态组件
• 城市列表 - tab切换 记录点击过的城市 引出$set
• 引出 vue.config.js的使用
• lintOnSave:false 禁用lint

4.3、插槽的使用

• 京东导航案例

5、 路由

• 访问不同的路径 返回不同视图
• spa单页面开发 单页web应用 single page web application
  就是只有一张web页面的应用
• 基于vuejs+vue-router
• 所有的插件 都需要安装 并且使用

5.1 跳转方式(百度路由按钮 )

• hash模式 开发时候使用 不会导致404 不支持seo
• h5的history模式 上线采用history

5.2 vue-router安装

• npm i vue-router -S

• import 导入

• Vue.use() 使用插件

• 实例化

5.3 基础路由

1. 配置路由表 => 地址和组件对应关系
2. 路由出口 展示路由表组件
   标签式跳转
   
   

5.4 编程式导航 this.$router.push()

• 通过js代码跳转路由
  js跳转
  • this.$router.push(路由表path)
  • this.$router.replace(路由表path)

5.5 路由的嵌套

• children 中的路径永远不带/ 如果带/表示是1级路由

5.6 路由参数变化 发送ajax请求

• 路径参数发生变化 监控参数的变化 来发送ajax watch:{$route(){alert(“ajax”)}}

5.7 动态路由

• /detail/:id
• $router $route

5.8 路由传参

// 传值
get
post

this.push({name: ‘路径名称’, query: {参数名称: 参数值}})
this.push({name: ‘路径名称’, params: {参数名称: 参数值}})

// 获取

• this.$route.query.参数名
• this.$route.params.参数名

5.9 路由案例

• 猫眼案例 =》
  • 配路由（一级二级）
  • 跳转详情（路由传参）
  • 我的 （导航守卫）
• 4399案例
• 书架 =》 动态路由 vuex
• 多点案例 =》 vue全家桶

6、vuex

6.1 Vuex 是什么

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
• 

6.2 Vuex的使用

• 在vue-cli以安装Vuex的情况下，直接引用。

• 1，安装Vuex，npm install vuex --save 或 cnpm install vuex --save进行安装

• 2，在src下新建一个名为vuex的文件夹

• 3，vuex文件夹里面新建一个store.js
  

6.3 vuex的核心

• State 存储数据 相当于 data
• Getter 计算数据 相当于 computed
• Mutation 修改数据 相当于 methods 同步操作
• Action 修改数据 相当于 methods 异步操作
• Module 可以引入不同组件对应的仓库

6.4 从源码上深刻理解 vuex工作原理