一、 1、el:元素挂载的地方 data:数据模型 二、模板语法概述 1、 差值表达式 2、指令 1、什么是自定义属性 2、指令本身就是属性 3、指令的格式 如 v-clock 4、数据绑定指令 v-text 填充文本 比差值表达式简洁 v-pre:显示原始信息,跳过编译 5、数据响应式 (1)、如何理解数据响应式 html5响应式 根据屏幕尺寸的变化而变化 数据响应式: 数据的变化导致页面的变化 (2)、什么是数据绑定 ,将数据绑定在标签中 (3)、v-once 绑定一次
3、事件绑定 v-on指令用法 <input type="boutton" v-on:click="num++"> 简易<input type="bouttn" @click="num++"> 参数传递 如果直接绑定函数名,默认传递事件 如果事件绑定函数调用,那么事件对象必须是最后一个参数 事件修饰符 stop阻止冒泡 <a v-on:click.stop = "handle"></a> prevent <a v-on:click.prevent = "handle"></a>
按键修饰符 enter <input v-on:key.enter='submit> delte <input v-on:key.enter='delete'> 自定义修饰符 全局config.keCodes对象 Vue.config.keyCodes.f1 = 122
4、属性绑定 v-bind <a rel="nofollow" v-bind:href="url"> 简写<a rel="nofollow" :href="url"> 5、样式绑定 对象 <div v-bind:class={"active:isActive"}></div> 数组 <div v-bind:class=["activeRerror","error"]>
6、分支循环 v-if / v-else /v-else-if v-show 原理就是控制i元素的样式是否显示 display:none

基础步骤: 1、实例静态UI效果 2、基于数据重构UI

常用特性 1、表单操作 2、自定义指令 3、计算属性偏差 4、过滤器 5、监听器 6、生命周期