Vue模板语法

3.1 模板语法概述

3.1.1如何理解前端渲染？

把数据填充到HTML标签中

 

 

3.1.2前端渲染方式

• 原生js拼接字符串

• 使用前端模板引擎

• 使用vue特有的模板语法

3.1.3原生js拼接字符串

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

var d = data.weather;
var info = document.getElementById('info');
info.innerHTML = '';
for(var i=0;i<d.length;i++){
var date = d[i].date;
var day = d[i].info.day;
var night = d[i].info.night;
var tag = '';
tag += '<span>日期：'+date+'</sapn><ul>';
tag += '<li>白每天气：'+day[1]+'</li>'
tag += '<li>白天温度：'+day[2]+'</li>'
tag += '<li>白天风向：'+day[3]+'</li>'
tag += '<li>白天风速：'+day[4]+'</li>'
tag += '</ul>';
var div = document.createElement('div');
div.innerHTML = tag;
info.appendChild(div);
}
​

缺点：不一样开发人员的代码风格差异很大，随着业 务的复杂，后期的维护变得逐渐困难起来。

3.1.4使用前端模板引擎

右侧代码是基于模板引擎art-template的一段代 码，与拼接字符串相比，代码明显规范了不少， 它拥有本身的一套模板语法规则。

<script id="abc" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>

优势：你们都遵循一样的规则写代码，代码可读性 明显提升了，方便后期的维护。

缺点：没有专门提供事件机制。

3.1.5 模板语法概览

• 差值表达式

• 指令

• 事件绑定

• 属性绑定

• 样式绑定

• 分支循环结构

3.2 指令

3.2.1什么是指令？

• 什么是自定义属性

• 指令的本质就是自定义属性

• 指令的格式：以v-开始（好比：v-cloak）

3.2.2 v-cloak指令用法

• 插值表达式存在的问题：“闪动”

• 如何解决该问题：使用v-cloak指令

• 解决该问题的原理：先隐藏，替换好值以后再显示最终的值

3.2.3数据绑定指令

• v-text 填充纯文本

  ① 相比插值表达式更加简洁

• v-html 填充HTML片断

  ① 存在安全问题

  ② 本网站内部数据可使用，来自第三方的数据不能够用

• v-pre 填充原始信息

  ① 显示原始信息，跳过编译过程（分析编译过程）

3.2.4数据响应式

• 如何理解响应式

  ① html5中的响应式（屏幕尺寸的变化致使样式的变化）

  ② 数据的响应式（数据的变化致使页面内容的变化）

• 什么是数据绑定

  ① 数据绑定：将数据填充到标签中

• v-once 只编译一次

  ① 显示内容以后再也不具备响应式功能

3.3 双向数据绑定指令

3.3.1 什么是双向数据绑定？

 

 

3.3.2双向数据绑定分析

• v-model指令用法

3.3.3 MVVM设计思想

M、V、VM 分别表明什么？

m model

数据层 Vue 中 数据层 都放在 data 里面

v view 视图

Vue 中 view 即 咱们的HTML页面

vm （view-model） 控制器 将数据和视图层创建联系

vm 即 Vue 的实例 就是 vm

3.4 事件绑定

3.4.1Vue如何处理事件？

• v-on指令用法

  <input type=‘button' v-on:click='num++'/>

   

• v-on简写形式

<input type=‘button' @click='num++'/>
​

3.4.2事件函数的调用方式

• 直接绑定函数名称

  <button v-on:click='say'>Hello</button>

   

• 调用函数

<button v-on:click='say()'>Say hi</button>
​
​

3.4.3事件函数参数传递

• 普通参数和事件对象

  <button v-on:click='say("hi",$event)'>Say hi</button>

   

3.4 .4事件修饰符

• .stop 阻止冒泡

  <a v-on:click.stop="handle">跳转</a>

   

• .prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>
​
​

3.4.5 按键修饰符

• .enter 回车键

  <input v-on:keyup.enter='submit'>
  ​

   

• .esc 退出键

<input v-on:keyup.delete='handle'>
​

3.4.6. 自定义按键修饰符

• 全局 config.keyCodes 对象

  Vue.config.keyCodes.f1 = 112