格鲁的斯图尔特

Vue3基础知识1

1.传统的网页开发弊端

2.渐进式框架

解决问题

3.引用Vue框架的方式

1.安装插件

Volar

Prettier

编辑

出现报错

2.VUE安装方法

1.CDN-下载js

2.使用Vite安装项目

4.Vue基础语法

1.声明式渲染

2.应用 & 组件实例

3.模板语法

5.Data Property 和方法

6.计算属性

1.计算属性缓存vs方法

2.计算属性 VS watch属性

3.方法 VS watch属性

4.侦听器（监听器）

深度监听

7.Class 与 Style 绑定

1.绑定内联样式

8.条件渲染

1.v-if

2.在template元素上使用v-if条件渲染分组

3.v-show

4.v-if vs v-show

9.列表渲染v-for

1.用v-for把一个数组映射为一组元素

2.在v-for里使用对象

3.维护状态

4.数组更新检测

变更方法

10.事件处理

1.监听事件

2.事件处理方法

3.内联处理器中的方法

4.多事件处理器

5.事件修饰符

6.按键修饰符

11.表单输入绑定

1.值绑定

2.修饰符

.lazy

.number

.trim

12.组件基础

1.组件的组织

2.组件数据的存放

3.通过 Prop 向子组件传递数据（父传子）

13.Props

1.Prop 验证

2.单向数据流

14.监听子组件事件

(子组件通过自定义事件向父组件传值)子传父

1.使用事件抛出一个值

15.父组件访问子组件（$ref）

16.通过插槽分发内容

1.具名插槽

2.渲染作用域

3.备用内容

4.作用域插槽

17.组件之间的跨级通信Provide / Inject

1.处理响应性

18.生命周期

1.传统的网页开发弊端

编写HTML，指定ID-->编写CSS-->编写JavaScript交互（获取DOM->添加事件监听->维护数据（手动添加新元素））

    
      列表项1
      列表项2
      列表项3

顺序

2.直接引入CDN


    
    {{num}}
    {{uname}}

let app = Vue.createApp(Couter).mount('#counter') //创建应用，将配置对象传入
    console.log(app)//Proxy代理对象
    // app.num->修改num的值，页面上的num也会随之修改，数据的双向绑定
    app.num = 4

2.使用Vite安装项目

使用npm，需要在电脑上安装node

查看node版本

npm -v

下载对应版本

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <自己项目的名称> -- --template vue

 cd vue-begin
  npm install
  npm run dev

安装 | Vue.js

4.Vue基础语法

看起来跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

1.声明式渲染

介绍 | Vue.js

2.应用 & 组件实例

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

组件实例（data）的所有 property，无论如何定义，都可以在组件的模板（template）中访问。

链接

 data() {
    return {
      link: "https://zxuqian.cn",
    };
  },

应用 & 组件实例 | Vue.js

3.模板语法

1.v-once

v-once：当数据改变时，插值处的内容不会更新。

data () {
    return {
      uname: 'zz'
    }
  },
  methods: {
    //给vue定义方法
    changeUname: function () {
      // this指向vue实例（data）
      this.uname = 'nihao'
    }
  },

//点击后会更新
{{ uname }}
//点击后不会更新
{{ uname }}

2.v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html。

 data () {
    return {
      msg: '标题'
    }
  },

 {{ msg }}
  //标题

 
  //标题

在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

3.v-bind

  data () {
    return {
      id: 'd1',
      url: 'https://v3.cn.vuejs.org/logo.png'
    }
  },


    v-bind绑定
    
    

#d1 {
  color: aqua;
}
#d2 {
  color: blueviolet;
}

4.使用 JavaScript 表达式

    
 
    {{ num + 1 }} //1
    {{ uname.split("").reverse().join("") }} //zz
    v-bind绑定
 //id="d11"

5.指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 和 v-on 是例外情况)。

指令的职责：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

6.参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

 ... 
//href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

7.v-on

用于监听 DOM 事件。

语法糖

 
    v-bind绑定

8.动态参数

在指令参数中使用 JavaScript 表达式，方法是用方括号[ ]括起来。

attributeName会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

eg：组件实例有一个 data property attributeName，其值为 "id"，那么这个绑定将等价于v-bind:id。

 data () {
    return { 
      attributeName: 'id',
    }
  },



等价于：
    v-bind绑定

    
    ...

5.Data Property 和方法

组件的data选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

用 methods 选项向组件实例添加方法，它应该是一个包含所需方法的对象

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数（指向是静态的），因为这会阻止 Vue 绑定恰当的 this 指向。

这些 methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用

Data Property 和方法 | Vue.js

6.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

data () {
    return {
      message: 'hello'
    }
},
computed: {//计算属性：只要依赖值不变，就不会重新计算
    reverseMsg: function () {
      return this.message.split("").reverse().join("")
    }
},

{{ message }}  /hello
{{ message.split("").reverse().join("") }}  //olleh
{{ reverseMsg }}
  //olleh

使用computed配置项定义计算属性，每个计算属性都是一个函数，函数里可以使用this访问data或其他配置项中的值。

案例（与下方事件处理案例做对比）

 data() {
    return {
      showAnswer: false,
    };
  },
  computed: {
    label() {
      return this.showAnswer ? "隐藏答案" : "显示答案";
    },
  },

 
        问：Vue 是一个什么样的框架？
        
          答：Vue 是一套用于构建用户界面的渐进式框架。

1.计算属性缓存vs方法

不同：

计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要message还没有发生改变，多次访问 reverseMsg时计算属性会立即返回之前的计算结果，而不必再次执行函数。（提高性能）

计算属性缓存计算结果，方法不缓存计算结果
计算属性依赖的data属性变化时，就会重新执行
methods可以传递参数，可以在其他配置项中使用（eg.使用this访问methods中定义的方法）,结果仍然缓存
计算属性适合做一些简单的操作（数组排序等），计算属性结果会缓存，计算属性可以直接在HTML中，像Data中属性一样使用
方法适合做复杂的操作，方法通常作为事件监听或者公共业务逻辑，方法也可以当作普通的js使用

//computed计算属性：只要依赖值不变，就不会重新计算，计算属性将基于它们的响应依赖关系缓存，提高性能。
//简写
 reverseMsg: function () {
      console.log('计算属性')
      return this.message.split("").reverse().join("")
    }
// 每一个计算属性中都有一个getter和setter
    
 reverseMsg: {
      // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
 // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter(一般没有set方法)，计算属性是只读属性
      set: function (newValue) {//在设置或者更改计算属性的时候调用
        console.log(newValue)//改变reverseMsg
        this.message = newValue//页面显示也会发生改变，显示 改变reverseMsg
      },
// 完整写法
      get: function () {
      return this.message.split("").reverse().join("")
      }
    }

//methods
 reverseMessage: function () {
      console.log('methods')
      return this.message.split("").reverse().join("")
    } 

 
    {{ message.split("").reverse().join("") }}
    {{ message.split("").reverse().join("") }}
    
    
    {{ reverseMsg }}
    {{ reverseMsg }}
    
    {{ reverseMessage() }}
    {{ reverseMessage() }}

实例

 data() {
    return {
      showAnswer: false,
    };
  },
  computed: {
    label() {
      return this.showAnswer ? "隐藏答案" : "显示答案";
    },
  },
  methods: {
    toggleAnswer() {
      this.showAnswer = !this.showAnswer;
    },
  },


    问：Vue 是一个什么样的框架？
    
       答：Vue 是一套用于构建用户界面的渐进式框架。

2.计算属性 VS watch属性

计算属性通常不修改data属性，（计算属性也可以修改data属性，一般不用）但是只对与计算属性有关的属性负责，否则会产生副作用
计算属性可以像data属性一样使用
watch监听器直接修改data，没有返回值
watch中的代码时命令式的

添加新文章到列表中

案例：计算属性


  {{ blog }}

  共（{{ count }}）篇博客
   

blogPosts: [
        "Vue 3.0x 入门实战",
        "Vue 3.x 完全指南",
        "React 18 新特性介绍",
        "JavaScript 基础语法概览",
],

computed: {
    count() {
      return this.blogPosts.length;
    },
}

案例：watch监听器

count: 4, // 使用 watch 的方式

watch: {
    blogPosts: {
      handler (newVal) {
        this.count = newVal.length
      },
//监听数组元素的变量，要加deep
      deep: true,
    },
}

添加新添加的文章的标题，过两秒钟才添加到列表中

watch方式

 
  {{ newBlog }}

newBlog: "",

watch: {
    blogPosts: {
      handler (newVal) {
        this.count = newVal.length
      },
      deep: true,
    },
    newBlog (newVal) {
      // 模拟耗时操作
      setTimeout(() => {
        this.blogPosts.push(newVal)
      }, 2000)
    },
  },

计算方式

newBlogPost: "", // 使用 computed 的方式

 computed: {
    count () {
      return this.blogPosts.length
    },
    newBlog: {
      get () {
        return this.newBlogPost
      },
      set (value) {
        this.newBlogPost = value // 需要手动赋值，无法访问之前的值，烦琐
        setTimeout(() => {
          this.blogPosts.push(value) // 虽然代码中可以修改其它属性，但推荐只对它所计算的属性进行修改，并且不要进行异步的修改。
        }, 2000)
      },
    },
  },

总结：

computed	watch
简单的业务逻辑计算	耗时的操作和远程API加载
可以直接在HTML模板中使用	不能在HTML模板中使用
响应data数据变化	响应数据变化
有返回值/getter	没有返回值
也可以使用setters修改data中的数据	可以修改data中的数据

3.方法 VS watch属性

类似于计算属性和监听器的区别。

watch监听器直接修改data，没有返回值
watch可以调用methods中的函数


    {{ blog }}


      {{ newBlog }}

blogPosts: [
        "Vue 3.0x 入门实战",
        "Vue 3.x 完全指南",
        "React 18 新特性介绍",
        "JavaScript 基础语法概览",
],
newBlog: "",

 methods: {
    addANewBlog() {
      // 模拟耗时操作
      setTimeout(() => {
        this.blogPosts.push(this.newBlog);
      }, 2000);
    },
    handleButtonClick() {
      this.newBlog = "Vue 3.x 计算属性和监听器的区别";
    },
  },
  watch: {
    newBlog(newVal) {
      this.addANewBlog();
    },
  },

methods	watch
可以在watch中调用	不能调用
可以直接在HTML模板中使用	不能在HTML模板中使用
响应data数据变化	响应data数据变化
可以有返回值，也可以没有	没有返回值

4.侦听器（监听器）

使用watch选项允许我们执行异步操作 (访问一个 API)，并设置一个执行该操作的条件。这些都是计算属性无法做到的。（定时器，请求API等耗时操作）

data属性-->watch监听器（与data属性名相同）-->修改其它data属性-->反应到模板上

 data () {
    return {
      message: 'hello',
      age: 0
    }
  },

watch: {//监听数据的变化
  // 每当message发生变化时，就会调用这个函数；相当于一个数据影响多个数据
    message: function (newValue, oldValue) {
      console.log(newValue)  //nihao
      console.log(oldValue)  //hello
      // 执行异步操作，或者复杂逻辑代码
      if (newValue.length < 5 || newValue.length > 10) {
        console.log('输入框中的内容不能小于5或者大于10')
      }
    }
  }

{{ message }}

  message: {
      immediate: true,//初始化的时候调用函数
      handler: function (newValue) {
        console.log(newValue)
        if (newValue.length < 5 || newValue.length > 10) {
          console.log('输入框中的内容不能小于5或者大于10')
        }
      }
    }

案例：五秒后答案消失，反复点击按钮，定时器清空，重新及时

 data() {
    return {
      showAnswer: false,
      countDown: 5,
      timer: null,
    };
  },
 
watch: {
    showAnswer(newVal, oldVal) {
      if (newVal) {//newVal=true时
        this.countDown = 5;//计时器为5
        if (this.timer) {//如果timer有值，先清除，可能倒计时还没有结束，用户就反复点击了
          clearInterval(this.timer);
          this.timer = null;
        }
        // 5秒后关闭答案
        this.timer = setInterval(() => {
          this.countDown -= 1;
          if (this.countDown === 0) {//隐藏答案
            this.showAnswer = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
  },

深度监听

user: {
        name: 'zz',
        age:11
}

watch: {
 // 监听不到对象中的属性变化，需要使用到深度监听
    // user: function (newValue) {
    //   console.log(newValue)//打印不出来
    // }
    "user.name": {//使用字符串的形式进行优化,只会单独监听对象中对应的属性
      handler: function (newValue) {
         console.log(newValue)//Proxy {name: 'change'} -> 改为字符串后( "user.name")->change
      },
      deep: true//表示是否深度监听,侦听器会一层层的向下遍历,给对象每个属性都加上侦听器
    }
}

{{ user.name }}

计算属性和侦听器 | Vue.js

7.Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理：只需要通过表达式计算出字符串结果即可。

字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue做了专门的增强。

表达式结果的类型除了字符串之外，还可以是对象或数组。
可以在对象中传入更多字段来动态切换多个 class。
:class 指令也可以与普通的 class attribute 共存。

 data () {
    return {
      message: 'helloWorld',
      isActive: true,
      // error: null,//无错误情况
      error: {},//有错(有值)
      classObj: {
        active: true,
        helloWorld: true
      },
      activeClass: 'active'
    }
  },
  computed: {
    classObjCom: function () {
      return {
        // 没有报错展示active这个样式
        active: this.isActive && !this.error,
        // 报错显示helloWorld样式
        helloWorld: this.error
      }
    }
  }


    hello
    
    
    hello1
    hello2
    
    
    hello3
    hello4
    
    hello5
    
    hello6
    
    hello7

.active {
  color: rgb(102, 47, 164);
}
.helloWorld {
  font-size: 30px;
  background-color: skyblue;
}

1.绑定内联样式

:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

 data () {
    return {
      activeColor: 'red',
      fontSize: '50px',
      bgcColor: 'pink',
      styleObj: {
        color: 'red',
        fontSize: '30px',
        'background-color': 'pink',
      }
    }
  },

 
    hello
    
    
    
      hello1
    
    helllo2
    helllo2

Class 与 Style 绑定 | Vue.js

8.条件渲染

1.v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

A
B
C
Not A/B/C

2.在template元素上使用v-if条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个

Vue3基础知识1

1.传统的网页开发弊端

2.使用Vite安装项目

4.Vue基础语法

1.声明式渲染

2.应用 & 组件实例

3.模板语法

标题

标题

5.Data Property 和方法

6.计算属性

1.计算属性缓存vs方法

2.计算属性 VS watch属性

共（{{ count }}）篇博客

3.方法 VS watch属性

4.侦听器（监听器）

深度监听

7.Class 与 Style 绑定

1.绑定内联样式

8.条件渲染

1.v-if

2.在template元素上使用v-if条件渲染分组

Title

3.v-show

4.v-if vs v-show

标签内容1v-if

标签内容2v-show

9.列表渲染v-for

1.用v-for把一个数组映射为一组元素

2.在v-for里使用对象

3.维护状态

4.数组更新检测

变更方法

10.事件处理

1.监听事件

2.事件处理方法

{{ counter }}

{{ counter }}

{{ counter }}

3.内联处理器中的方法

{{ counter }}

4.多事件处理器

{{ counter }}--{{ age }}

5.事件修饰符

6.按键修饰符

11.表单输入绑定