vue框架基础学习

Posted 2020-12-17

一、
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 v-bind:href="url">
简写<a :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、生命周期