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的绑定
② 给计算按钮绑定事件，实现计算逻辑
③ 将计算结果绑定到对应位置

参考代码

<body>
 <div id="app">
   <h1>简单计算器</h1>
   <div>
     <span>数值A:</span>
     <span>
       <input type="text" v-model='a'>
     </span>
   </div>
   <div>
     <span>数值B:</span>
     <span>
       <input type="text" v-model='b'>
     </span>
   </div>
   <div>
     <button v-on:click='handle'>计算</button>
   </div>
   <div>
     <span>计算结果:</span>
     <span v-text='result'></span>
   </div>
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
   var vm = new Vue({
     el: '#app',
     data: {
       a: '',
       b: '',
       result: ''
     },
     methods: {
       handle: function(){
         // 实现计算逻辑
         this.result = parseInt(this.a) + parseInt(this.b);
       }
     }
   });
 </script>
</body>