Vue 模板语法

模板语法概述

• 如何理解前端渲染？
  把数据填充到HTML标签中。

  
  

• 前端渲染方式
  （1）原生js拼接字符串
  （2）使用前端模板引擎
  （3）使用vue特有的模板语法

• 原生js拼接字符串
  基本上就是将数据以字符串的方式拼接到 HTML 标签中，前端代码风格大体上如图所示。

  
  

• 使用前端模板引擎
  右侧代码是基于模板引擎 art-template 的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
  
  
  优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
  缺点：没有专门提供事件机制。

• 模板语法概览
  （1）差值表达式
  （2）指令
  （3）事件绑定
  （4）属性绑定
  （5）样式绑定
  （6）分支循环结构

指令

• 什么是指令？
  （1）什么是自定义属性
           HTML规范也允许我们自定义一些属性。（最新规范中，推荐以data-开头）注意，如果设置元素自定义属性，不会显示在标签里，想要显示在标签里，请使用 setAttribute 方法。
  （2）指令的本质就是自定义属性
  （3）指令的格式：以v-开始（比如：v-cloak）

• v-cloak 指令用法
  （1）插值表达式存在的问题：“闪动”
  （2）如何解决该问题：使用v-cloak指令
  （3）解决该问题的原理：先隐藏，替换好值之后再显示最终的值

  
  
  
  

• 数据绑定指令
  （1）v-text 填充纯文本
           ① 相比插值表达式更加简洁
  （2）v-html 填充HTML片段
           ① 存在安全问题
           ② 本网站内部数据可以使用，来自第三方的数据不可以用
  （3）v-pre 填充原始信息
           ① 显示原始信息，跳过编译过程（分析编译过程）

  
  

• 数据响应式
  （1）如何理解响应式
           ① html5中的响应式（屏幕尺寸的变化导致样式的变化）
           ② 数据的响应式（数据的变化导致页面内容的变化）
  （2）什么是数据绑定
           ① 数据绑定：将数据填充到标签中
  （3）v-once 只编译一次
           ① 显示内容之后不再具有响应式功能

  
  

双向数据绑定指令

• 什么是双向数据绑定？

  
  

• 双向数据绑定分析
  （1）v-model 指令用法

  
  

• MVVM设计思想

  
  
  
  

  ① M(model)
  ② V(view)
  ③ VM(View-Model)

事件绑定

• Vue 如何处理事件？
  ① v-on 指令用法

  
  
  
  

  ② v-on 简写形式

  
  

• 事件函数的调用方式
  ① 直接绑定函数名称

  
  
  
  

  ② 调用函数

  
  

• 事件函数参数传递
  ① 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
  ② 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是 $event。

  
  

• 事件修饰符
  ① .stop 阻止冒泡
  ② .prevent 阻止默认行为

  
  
  
  

• 按键修饰符
  ① .enter 回车键
  ② .esc 退出键

  
  
  
  

• 自定义按键修饰符
  ① 全局 config.keyCodes 对象
  规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值。

  
  

练习：简单计算器

需求：实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面。

• 需求分析
  ① 通过 v-model 指令实现数值a和数值b的绑定
  ② 给计算按钮绑定事件，实现计算逻辑
  ③ 将计算结果绑定到对应位置

• 参考代码

 

   
简单计算器
   

     数值A:
     
       
     
   
   

     数值B:
     
       
     
   
   

     计算
   
   

     计算结果:
     
   
 
 
 

属性绑定

• Vue 如何动态处理属性？
  ① v-bind指令用法
  ② 缩写形式

  
  
  
  

• v-model 的低层实现原理分析

  
  
  
  

样式绑定

• class 样式处理
  ① 对象语法

  
  
  
  
  
  
  
  

  ② 数组语法

  
  
  
  
  
  
  
  ③ 样式绑定相关语法细节：
  （1）对象绑定和数组绑定可以结合使用
  （2）class绑定的值可以简化操作
  

  （3）默认的class如何处理？默认的class会保留

  
  
  
  
  
  

• style 样式处理
  ① 对象语法
  ② 数组语法

  
  
  
  

分支循环结构

• 分支结构
  ① v-if
  ② v-else
  ③ v-else-if
  ④ v-show
     控制元素样式是否显示 display:none。

  
  
  
  

• v-if 与 v-show 的区别
  v-if控制元素是否渲染到页面
  v-show控制元素是否显示（已经渲染到了页面）

• 循环结构
  ① v-for 遍历数组
  key的作用：帮助Vue区分不同的元素，从而提高性能

  
  
  
  
  
  

  ② v-for 遍历对象
  ③ v-if 和 v-for 结合使用

  
  
  原生JS遍历对象
  
  
  v-for遍历对象