vue 模版引擎空格_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:

计算

计算结果:

var vm = new Vue({

el: '#app',

data: {

a: '',

b: '',

result: ''

},

methods: {

handle: function(){

// 实现计算逻辑

this.result = parseInt(this.a) + parseInt(this.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遍历对象