vue3 回顾

项目仓库： https://github.com/chenfenbgin/vue3code
vue3 官网学习地址：https://staging-cn.vuejs.org

一、vue3基础 1、vue3改变

2、vue引入

2.1、CDN引入



  
    
    
    
    Document

2.2、下载 - 本地引入



  
    
    
    
    Document

3、计数器 3.1、原生实现

3.2、vue实现

4、声明式和命令式 5、MVVM

6、template 6.1、template写法一：



  
    
    
    
    Document
  

  
    哈哈哈

6.2、template写法2：



  
    
    
    
    Document
  

  
    哈哈哈

7、data

8、method

注：this绑定是就是我们组件对应的代理对象了

9、语法

9.1、Mustche 9.2、v-once



  
    
    
    
    Document

9.3、v-html



  
    
    
    
    Document

9.4、v-pre

9.5、v-bind 9.5.1、基本使用



  
    
    
    
    Document

9.5.2、v-bind绑定class - 对象语法



  
    
    
    
    Document

9.5.3、v-bind绑定class - 数组语法



  
    
    
    
    Document

9.5.4、v-bind绑定style- 对象语法



  
    
    
    
    Document

9.5.5、 v-bind绑定style- 数组语法



  
    
    
    
    Document

9.5.6、v-bind 动态绑定属性名称



  
    
    
    
    Document

9.5.7、v-bind 属性直接绑定一个对象



  
    
    
    
    Document

9.6、v-on绑定事件 9.6.1、v-on基本使用



  
    
    
    
    Document

9.6.2、v-on 传递参数



  
    
    
    
    Document

9.6.3、v-on 修饰符



  
    
    
    
    Document

9.7、条件渲染

9.7.1、v-if多条件渲染



  
    
    
    
    Document

9.7.2、v-if结合template



  
    
    
    
    Document

9.7.3、v-show



  
    
    
    
    Document

9.8、v-for



  
    
    
    
    Document

9.8.1 v-for与template结合使用



  
    
    
    
    Document

9.8.2、 v-for中key的作用

没有key的算法，源码如下

有key的算法，源码如下

10、method 和计算属性（对于任何包含响应式的数据）



  
    
    
    
    Document

10.1、计算属性的setter/getter



  
    
    
    
    Document

源码computed 对传入函数和对象两种情况的判断：NOOP是空的函数实现

11、侦听器watch



  
    
    
    
    Document

12、v-model



  
    
    
    
    Document



  
    
    
    
    Document

12.1 v-model修饰符



  
    
    
    
    Document

二、vue组件 1、组件树 2、注册局部组件



  
    
    
    
    Document

vue3 回顾

{{message}}

{{counter}} +1 -1

{{counter}} {{counter}} {{message}} +1

{{counter}}

{{message}}

优秀

良好

不及格

哈哈哈

哈哈哈

哈哈哈

呵呵呵

呵呵呵

呵呵呵

哈哈哈哈

哈哈哈哈

动漫列表 {{index + 1}}.{{item}}

个人中心 {{value}} {{value}}-{{key}} {{value}}-{{key}}-{{index}} {{num}}-{{index}}

{{ fullName}}

{{ fullName}}

{{ fullName}}

{{ getFullName() }}

{{ getFullName() }}

{{ getFullName() }}

{{ fullname }}

{{ info.name}} { info.nba.name}} --> 改变info { info.name}}是可以发送改变的，但是watch中没侦听到 --> 改变info中的name 改变info.nba.中的name

{{message}}

intro: {{ intro }} 同意协议 isAgree: {{isAgree}} 你的爱好： 篮球 足球 网球 hobbies: {{hobbies}} 你的性别： 男 女 gender: {{gender}} 喜欢的水果： {{item.value}} 苹果 橘子 香蕉 fruit: {{fruit}}

isAgree: {{isAgree}} 你的爱好： 篮球 足球 网球

hobbies: {{hobbies}} 你的性别： 男 女

gender: {{gender}} 喜欢的水果： {{item.value}} 苹果 橘子 香蕉

fruit: {{fruit}}

{{message}} 查看数据类型

{{message}}

我是组件a 我是内容

Java相关栏目本月热门文章

{{counter}}

{{counter}}

{{counter}}
{{message}}

动漫列表

{{index + 1}}.{{item}}

个人中心

{{value}}

{{value}}-{{key}}

{{value}}-{{key}}-{{index}}

{{num}}-{{index}}

{{ info.name}} { info.nba.name}} --> { info.name}}是可以发送改变的，但是watch中没侦听到 -->

intro: {{ intro }} 同意协议
isAgree: {{isAgree}} 你的爱好：篮球足球网球
hobbies: {{hobbies}} 你的性别：男女
gender: {{gender}} 喜欢的水果：
fruit: {{fruit}}

isAgree: {{isAgree}} 你的爱好：篮球足球网球

hobbies: {{hobbies}} 你的性别：男女

gender: {{gender}} 喜欢的水果：

{{message}}

我是组件a
我是内容