1、
一、el:元素挂载的地方
data:数据模型
2、模板语法概述
一、 差值表达式
二、指令
一、什么是自定义属性
二、指令自己就是属性
三、指令的格式 如 v-clock
四、数据绑定指令
v-text 填充文本 比差值表达式简洁
v-pre:显示原始信息,跳过编译
五、数据响应式
(1)、如何理解数据响应式
html5响应式 根据屏幕尺寸的变化而变化
数据响应式: 数据的变化致使页面的变化
(2)、什么是数据绑定 ,将数据绑定在标签中
(3)、v-once 绑定一次
三、事件绑定
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
四、属性绑定
v-bind
<a v-bind:href="url">
简写<a :href="url">
五、样式绑定
对象
<div v-bind:class={"active:isActive"}></div>
数组
<div v-bind:class=["activeRerror","error"]>
六、分支循环
v-if / v-else /v-else-if
v-show 原理就是控制i元素的样式是否显示 display:nonehtml
基础步骤:
一、实例静态UI效果
二、基于数据重构UIhtml5
经常使用特性
一、表单操做
二、自定义指令
三、计算属性误差
四、过滤器
五、监听器
六、生命周期数组