网络知识 娱乐 Vue学习笔记(尚硅谷天禹老师)

Vue学习笔记(尚硅谷天禹老师)

Vue学习笔记

文章目录

  • Vue学习笔记
    • 1. Vue核心
      • 1.1. Vue简介
        • 1.1.1. 官网
        • 1.1.2. 介绍与描述
        • 1.1.3. Vue的特点
        • 1.1.4.与其他JS框架的关联
        • 1.1.5. Vue周边库
      • 1.2. 初识Vue
      • 1.3. 模板语法
      • 1.4. 数据绑定
      • 1.5. el与data的两种写法
      • 1.6. MVVM模型
      • 1.7. Vue中的数据代理
      • 1.8. 事件处理
        • 1.8.1. 事件的基本用法
        • 1.8.2. 事件修饰符
        • 1.8.3. 键盘事件
      • 1.9. 计算属性
      • 1.10. 监视属性
        • 1.10.1. 监视属性基本用法
        • 1.10.2. 深度监视
        • 1.10.3. 监视属性简写
        • 1.10.4. 监听属性 VS 计算属性
      • 1.11. 绑定样式
      • 1.12. 条件渲染
      • 1.13. 列表渲染
        • 1.13.1. 基本列表
        • 1.13.2. key的作用与原理
        • 1.13.3. 列表过滤
        • 1.13.4. 列表排序
        • 1.13.5. Vue数据监视
      • 1.14. 收集表单数据
      • 1.15. 过滤器
      • 1.16. 内置指令
        • 1.16.1. v-text指令
        • 1.16.2. v-html指令
        • 1.16.3. v-cloak指令
        • 1.16.4. v-once指令
        • 1.16.5. v-pre指令
      • 1.17. 自定义指令
      • 1.18. Vue生命周期
        • 1.18.1. 引出生命周期
        • 1.18.2. 分析生命周期
        • 1.18.3. 总结生命周期
    • 2. Vue组件化编程
      • 2.1. 模块与组件、模块化与组件化
        • 2.1.1. 模块
        • 2.1.2. 组件
        • 2.1.3. 模块化
        • 2.1.4. 组件化
      • 2.2. 非单文件组件
        • 2.2.1. 基本使用
        • 2.2.2. 组件注意事项
        • 2.2.3. 组件的嵌套
        • 2.2.4. VueComponent
        • 2.2.5. 一个重要的内置关系
      • 2.3. 单文件组件
    • 3. 使用Vue CLI脚手架
      • 3.1. 初始化脚手架
        • 3.1.1. 说明
        • 3.1.2. 具体步骤
        • 3.1.3. 分析脚手架结构
        • 3.1.4. render函数
        • 3.1.5. 修改默认配置
      • 3.2. ref属性
      • 3.3. props配置项
      • 3.4. mixin混入
      • 3.5. plugin插件
      • 3.6. scoped样式
      • 3.7. Todo-List案例
      • 3.8. WebStorage
      • 3.9. 自定义事件
        • 3.9.1. 绑定
        • 3.9.2. 解绑
      • 3.10. 全局事件总线
      • 3.11. 消息的订阅与发布
      • 3.12. $nextTick
      • 3.13. 过渡与动画
    • 4. Vue中的Ajax
      • 4.1. Vue脚手架配置代理
      • 4.2. GitHub用户搜索案例
      • 4.3. vue-resource
      • 4.4. slot插槽
        • 4.4.1. 默认插槽
        • 4.4.2. 具名插槽
        • 4.4.3. 作用域插槽
    • 5. Vuex
      • 5.1. 理解Vuex
        • 5.1.1. Vuex是什么
        • 5.1.2. 什么时候使用Vuex
        • 5.1.3. Vuex工作原理图
      • 5.2. 求和案例
        • 5.2.1. 使用纯vue编写
        • 5.2.2. 搭建Vuex环境
        • 5.2.3. 使用Vuex编写
      • 5.3. getters配置项
      • 5.4. 四个map方法的使用
        • 5.4.1. mapState与mapGetters
        • 5.4.2. mapActions与mapMutations
      • 5.5. 多组件共享数据
      • 5.6. 模块化+命名空间
    • 6. Vue Router路由管理器
      • 6.1 相关理解
        • 6.1.1 vue-router的理解
        • 6.1.2 对SPA应用的理解
        • 6.1.3 路由的理解
      • 6.2 基本路由
      • 6.3. 几个注意事项
      • 6.4. 多级路由
      • 6.5. 路由的query参数
      • 6.6. 命名路由
      • 6.7. 路由的params参数
      • 6.8. 路由的props配置
      • 6.9. 路由跳转的replace方法
      • 6.10. 编程式路由导航
      • 6.11. 缓存路由组件
      • 6.12. activated和deactivated
      • 6.13. 路由守卫
        • 6.13.1. 全局路由守卫
        • 6.13.2. 独享路由守卫
        • 6.13.3. 组件内路由守卫
      • 6.14. 路由器的两种工作模式
    • 7. Vue UI组件库
      • 7.1 常用UI组件库
        • 7.1.1 移动端常用UI组件库
        • 7.1.2. PC端常用UI组件库
      • 7.2. element-ui基本使用
      • 7.3. element-ui按需引入
    • 8. Vue 3

1. Vue核心

1.1. Vue简介

1.1.1. 官网

  • 英文官网

  • 中文官网

1.1.2. 介绍与描述

  • 动态构建用户界面的渐进式JavaScript框架

  • 作者:尤雨溪

1.1.3. Vue的特点

  1. 遵循MVVM模式

  2. 编码简洁,体积小,运行效率高,适合移动/PC端开发

  3. 它本身只关注UI,可以引入其它第三方库开发项目

1.1.4.与其他JS框架的关联

  1. 借鉴 Angular 的模板数据绑定技术
  2. 借鉴 React 的组件化虚拟DOM技术

1.1.5. Vue周边库

  • vue-cli:vue脚手架
  • vue-resource
  • axios
  • vue-router:路由
  • vuex:状态管理
  • element-ui:基于vue的UI组件库(PC端)

1.2. 初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    
    <script src="../js/vue.js"></script>
</head>
<body>
    
    <div id="root">
        <h1>Hello!{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data:{ //data用于存储数据,数据共el所指定的容器去使用
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

效果:

注意:

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
  3. root容器里的代码被称为Vue模板
  4. Vue实例与容器是一一对应
  5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用
  6. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
  7. 一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新

1.3. 模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}!</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">快去看新番!</a><br>
        <a :href="url">快去看新番!</a>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{ 
                name:'JOJO',
                url:'https://www.bilibili.com/'
            }
        })
    </script>
</body>
</html>

效果:

总结:

Vue模板语法包括两大类:

  1. 插值语法:

    • 功能:用于解析标签体内容
    • 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有区域
  2. 指令语法:

1.4. 数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定:<input type="text" v-bind:value="name"><br>
        双向数据绑定:<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

效果:

总结:

  • Vue中有2种数据绑定的方式:

    1. 单向绑定(v-bind):数据只能从data流向页面
    2. 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
  • 备注:

    1. 双向绑定一般都应用在表单类元素上(如: