【尚硅谷】Vue.js从入门到精通笔记（每日更新）

目录

• 第1章：Vue核心
• • 1-1.Vue简介
  • 1-2.Vue官网使用指南
  • 1-3.搭建Vue开发环境
  • 1-4.初识Vue
  • 1-5.模板语法
  • 1-6.数据绑定
  • 1-7.el和data的两种写法
  • 1-8.MVVM模型
  • 1-9.数据代理
  • • 1-9-1.回顾Object.defineProperty方法
    • 1-9-2.何为数据代理
    • 1-9-3.Vue中的数据代理
  • 1-10.事件处理
  • • 1-10-1.事件的基本使用
    • 1-10-2.事件修饰符
    • 1-10-3.键盘事件
    • 1-10-4.事件总结
  • 1-11.计算属性与监视
  • • 1-11-1.姓名案例
    • 1-11-2.计算属性
    • 1-11-3.天气案例
    • 1-11-4.监视属性
  • 1-12.class与style绑定
  • 1-13.条件渲染
  • 1-14.列表渲染
  • • 1-14-1.基本列表
    • 1-14-2.key的原理
    • 1-14-3.列表过滤
    • 1-14-4.列表排序
    • 1-14-5.更新时的一个问题
    • 1-14-6.Vue检测数据改变的原理
    • 1-14-7.模拟一个数据监测
    • 1-14-8.Vue.set的使用
    • 1-14-9.Vue监测数据改变的原理_数组
    • 1-14-10.总结Vue数据监测
  • 1-15.收集表单数据
  • 1-16.Vue实例声明周期
  • 1-17.过度&动画
  • 1-18.过滤器
  • 1-19.内置指令与自定义指令
  • 1-20.自定义插件
• 第2章：Vue组件化编程
• 第3章：使用Vue脚手架
• 第4章 ：Vue中的ajax
• 第5章：Vuex
• 第6章：Vue-router
• 第7章：Vue UI组件库

第1章：Vue核心

1-1.Vue简介

构建用户界面： 把拿到的数据通过某种办法变成用户可以看到的界面
渐进式： 渐即逐渐，进即递进，也就是说从一个轻量小巧的核心库逐渐递进到各式各样的Vue插件库

如果你的应用很简单，你只需要引入一个轻量小巧的核心库(压缩只有100kb)就可以了；如果比较复杂，就引入各式各样的插件库

命令式编码：一步一步得去执行命令，每一步都要去命令
声明式编码：给一个声明，它就自己去完成所有命令

diff算法：节点复用的一种算法，如果有节点已经出现过，那么就会复用它，大大提升了性能

1-2.Vue官网使用指南

API：就相当于Vue的字典，遇到不会的方法就可以去找API
Awesome：Vue 官方整理的比较好用的包

1-3.搭建Vue开发环境

关掉Vue控制台的提示:
1.安装Vue开发工具（安装开发工具的提示）
2.Vue.config.productionTip = false; 阻止 vue 在启东市生成生产提示

1-4.初识Vue

按shift强刷报错：

原因是没有找到页签图标，在根目录放一个页签图标就可以了

Hello小案例：

    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 差值：即插入值，用{
  {}}表示，可直接访问data数据 -->
        <h1>Hello，{
  {name}}</h1>
        <h1>我的年龄是：18</h1>
    </div>
    
    <script>
        // 创建Vue实例
        new Vue({
            // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            // 也可以是节点（document.getElementById('root')
            el: '#root',
            // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象（函数）
            data: {
                name: '尚硅谷',
                age: 18
            }
        });
    </script>

总结：

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

Vue模板的解析流程：
先有的容器，再有Vue实例，通过el把容器获取过来进行解析，扫描有没有自己涉及的特殊语法，比如{ { {name}}}就把data里的name值替换过去，解析完成后替换旧容器

注意区分：JS表达式和JS代码（语句）：

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
   （1）a
   （2）a+b
   （3）demo(1)
   （4）x === y ‘a’ : ‘b’

2. js代码（语句）
   （1）if(){}
   （2）for(){}

表达式就是特殊的JS语句，能控制代码能否执行的就是JS语句

1-5.模板语法

概念： 容器里面的代码就是模板语法

模板语法分为两大类：

1. 差值语法：
   功能：用于解析标签体内容。
   写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
   功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
   备注：Vue中有很多的指令，且形式都是：v-。
   举例：v-bind:hred="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

错误示例：

<a href="url"></a>   <!-- 此时的url只是一个字符串 -->
<a href={
  {url}}></a> <!-- 差值写在属性的写法已经被Vue弃用 -->
<a :href="url"></a>  <!-- 正确用法 -->

1-6.数据绑定

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

1. 单向绑定（v-bind）：数据只能从data流向页面。
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
   备注：
   1.双向绑定一般都应用在表单元素上（如：input、select等）
   2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

演示：

<!-- 单向数据绑定 !-->
<input type="text" :value="name">
<!-- 双向数据绑定 !-->
<input type="text" v-model="name">

错误示例：
以下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上

<h2 v-model:x="name">hello</h2>