1. 模版语言

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

1.1 插值表达式和文本渲染

插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{{}}

• 插值表达式是将数据渲染到元素的指定位置的手段之一

• 插值表达式不绝对依赖标签,其位置相对自由

• 插值表达式中支持javascript的运算表达式

• 插值表达式中也支持函数的调用

  
    
{{ msg }}
    msg的值为: {{ msg }} 

    getMsg返回的值为:{{ getMsg() }}  

    是否成年: {{ age>=18?'true':'false' }} 

    反转: {{ bee.split(' ').reverse().join('-') }} 

    购物车总金额: {{ compute() }} 

    购物车总金额: {{carts[0].price*carts[0].number + carts[1].price*carts[1].number}} 

  

 为了渲染双标中的文本,我们也可以选择使用 v-text 和 v-html 命令

• v-text：可以将数据然然成双标签中间的文本，但是不识别html元素结构文本（类似于innerText）
• v-html：可以将数据渲染成双标签中间的文本,识别html元素结构的文本（innerHTML）
• v-*** 写法的特点：
  • 使用的是vue的命令
  • 命令必须依赖标签，再开始标签中使用
  • 支持使用字符串模版
  • 支持常见的运算符
  • 支持常见对象的API的调用
  • 支持函数的调用

  
     

     

     

    18?"成年":"未成年"'> 

     

     

     

     

    <span v-html="`${msg}`"> 

  

1.2 Attribute属性渲染

想要渲染一个元素的 attribute，应该使用 v-bind指令

• 由于插值表达式不能直接放在标签的属性中,所有要渲染元素的属性就应该使用v-bind

• v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

1.3 事件的绑定

我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

• 用法：v-on:click="handler" 或简写为 @click="handler"

• vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click

• handler的值可以是方法事件处理器,也可以是内联事件处理器

• 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下

  • .once：只触发一次事件。[重点]

  • .prevent：阻止默认事件。[重点]

  • .stop：阻止事件冒泡。

  • .capture：使用事件捕获模式而不是冒泡模式。

  • .self：只在事件发送者自身触发时才触发事件。

  
    
count的值是:{{ count }}
    
    addCount 

    
    incrCount 

    
    addOnce 

    
    prevent 

    
    prevent 

  

2. 响应式基础

响应式是指 : 数据模型发生变化时,自动更新DOM树内容,页面上显示的内容会进行同步变化,vue3的数据模型不是自动响应式的,需要我们做一些特殊的处理

示例：

  
    - 
    {{ counter }} 
    +
    

    
    显示counter值
   
 

2.1 响应式实现关键字ref

ref 可以将一个基本类型的数据（如字符串，数字等）转换为一个响应式对象。ref 只能包裹单一元素

  
    - 
    - 
    {{ counter }} 
    +
    + 
    

    显示counter值
   
 

2.2 响应式实现关键字reactive

通过使用 reactive（） 函数创建一个响应式对象或数组：

  
    - 
    - 
    {{ data.counter }} 
    +
    + 
    

    显示counter值
   
 

ref 与reactive 的不同：

• 1、ref函数：更适合单个变量
  • 在Script标签中操作 ref 响应式数据要通过 .value
  • 在template中操作 ref 响应式则无需 .value
• 2、reactive函数：更适合对象
  • 在Script/template 操作reactive响应式数据都直接使用 对象名.属性名 的方法即可

2.3 toRef 函数和 reactive 函数（了解）

toRef函数：将reactive响应式数据中的某个属性转换为ref数据

toRefs函数：同时将reactive响应式数据中的多个属性转换为ref响应式数据

3. 条件和列表渲染

3.1 条件渲染 

v-if = “表达式/数据” 数据为true，则当前元素会渲染进入dom树

v-else：自动和前一个 v-if 做取反操作

代码示例：

  
    
Vue
    
Vite
    Toggle
  
 

v-show = “表达式/数据” 数据为true，元素则展示子啊页面上，否则不展示

  
    
Vue
    
Vue
    
Vite
    Toggle
  
 

v-if 与 v-show的比较

• v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

• v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

• 相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

3.2 列表渲染

 v-for：指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

  
    

      
      

        {{ item.message }}
      
    

    

      
      

        {{ parentMessage }} - {{ index }} - {{ item.message }}
      
    
   
  
 

4. 双向绑定

单项绑定和双向绑定

• 单向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据

• 双向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变会同步更新到响应式数据

  • 用户通过表单标签才能够输入数据,所以双向绑定都是应用到表单标签上的,其他标签不行

  • v-model专门用于双向绑定表单标签的value属性,语法为 v-model:value='',可以简写为 v-model=''

  • v-model还可以用于各种不同类型的输入，</code>、<code></code> 元素。</p></li></ul></li></ul><p>代码示例：</p><pre><code class="language-html"> 账号： <br> 密码： <br> 爱好： 吃 喝 玩 乐 <br> 简介:<textarea>
籍贯: 黑龙江 吉林 上海 北京 天津 深圳
登录 重置

    ---

    显示爱好:{{ hbs }}

    ---

    显示用户信息:{{ user }}

    ---

    5. 属性计算

    模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象：

    
    
    
      
        
    {{author.name}} Has published books?:
        {{ author.books.length > 0 ? 'Yes' : 'No' }}
      
     
    
    
    

    使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

    
    
    
      
        
    {{author.name}} Has published books?:
        {{ author.books.length > 0 ? 'Yes' : 'No' }}
        {{ hasBooks() }}
        {{ hasBooks() }}
    
        
    {{author.name}} Has published books?:
        {{ publishedBooksMessage }}
        {{ publishedBooksMessage }}
      
     
    
    
    
    

    ---

    6. 数据监听器

    计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。我们可以使用 在每次响应式状态发生变化时触发回调函数：

    • watch主要用于以下场景：

      • 当数据发生变化时需要执行相应的操作

      • 监听数据变化，当满足一定条件时触发相应操作

      • 在异步操作前或操作后需要执行相应的操作

    监控响应式数据（watch）：