Vue基础指令
1. Vue概述
Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
官网:https://cn.vuejs.org/v2/guide/
⚫ 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
⚫ 灵活:在一个库和一套完整框架之间自如伸缩
⚫ 高效:20kB运行大小,超快虚拟 DOM
2. Vue基本使用
2.1 传统开发模式对比
2.2 Vue.js之HelloWorld基本步骤
2.3 Vue.js之HelloWorld细节分析
1. 实例参数分析
⚫ el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
⚫ data:模型数据(值是一个对象)
2. 插值表达式用法
⚫ 将数据填充到HTML标签中
⚫ 插值表达式支持基本的计算操作
3. Vue代码运行原理分析
⚫ 概述编译过程的概念(Vue语法→原生语法)
3. Vue模板语法
3.1 模板语法概述
1. 如何理解前端渲染?
把数据填充到HTML标签中
2. 前端渲染方式
⚫ 原生js拼接字符串
⚫ 使用前端模板引擎
⚫ 使用vue特有的模板语法
3. 原生js拼接字符串
缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来。
4. 使用前端模板引擎
优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。
缺点:没有专门提供事件机制。
5. 模板语法概览
⚫ 差值表达式
⚫ 指令
⚫ 事件绑定
⚫ 属性绑定
⚫ 样式绑定
⚫ 分支循环结构
3.2 指令
1. 什么是指令?
⚫ 什么是自定义属性
⚫ 指令的本质就是自定义属性
⚫ 指令的格式:以v-开始(比如:v-cloak) ⚫ 插值表达式存在的问题:“闪动”
⚫ 如何解决该问题:使用v-cloak指令
⚫ 解决该问题的原理:先隐藏,替换好值之后再显示最终的值
2. v-cloak指令用法
3. 数据绑定指令
⚫ v-text 填充纯文本
① 相比插值表达式更加简洁
⚫ v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用,来自第三方的数据不可以用
⚫ v-pre 填充原始信息
① 显示原始信息,跳过编译过程(分析编译过程)
4. 数据响应式
⚫ 如何理解响应式
① html5中的响应式(屏幕尺寸的变化导致样式的变化)
② 数据的响应式(数据的变化导致页面内容的变化)
⚫ 什么是数据绑定
① 数据绑定:将数据填充到标签中
⚫ v-once 只编译一次
① 显示内容之后不再具有响应式功能
3.3 双向数据绑定指令
1. 什么是双向数据绑定?
2. 双向数据绑定分析
3. MVVM设计思想
① M(model)
② V(view)
③ VM(View-Model)
3.4 事件绑定
1. Vue如何处理事件?
⚫ v-on指令用法
⚫ v-on简写形式
<input type=‘button' v-on:click='num++'/>
<input type=‘button' @click='num++'/>
2. 事件函数的调用方式
⚫ 直接绑定函数名称
⚫ 调用函数
<button v-on:click='say'>Hello</button>
<button v-on:click='say()'>Say hi</button>
3. 事件函数参数传递
⚫ 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
事件绑定-参数传递
1.如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
3.4 事件绑定
4. 事件修饰符
⚫ .stop 阻止冒泡
⚫ .prevent 阻止默认行为
<a v-on:click.stop="handle">跳转</a>
<a v-on:click.prevent="handle">跳转</a>
5. 按键修饰符
⚫ .enter 回车键
⚫ .esc 退出键
<input v-on:keyup.enter='submit'>
<input v-on:keyup.delete='handle'>
6. 自定义按键修饰符
⚫ 全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应的even.keyCode的值
3.5 属性绑定
1. Vue如何动态处理属性?
⚫ v-bind指令用法
⚫ 缩写形式
<a v-bind:href='url'>跳转</a>
<a :href='url'>跳转</a>
2. v-model的低层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
3.6 样式绑定
1. class样式处理
⚫ 对象语法
<div v-bind:class="{ active: isActive }"></div>
⚫ 数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
2. style样式处理
⚫ 对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
⚫ 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
3.7 分支循环结构
1. 分支结构
⚫ v-if
⚫ v-else
⚫ v-else-if
⚫ v-show
2. v-if与v-show的区别
⚫ v-if控制元素是否渲染到页面
⚫ v-show控制元素是否显示(已经渲染到了页面)
3. 循环结构
⚫ v-for遍历数组
<li v-for='item in list'>{{item}}</li>
⚫ key的作用:帮助Vue区分不同的元素,从而提高性能
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
4. 循环结构
⚫ v-for遍历对象
<div v-for='(value, key, index) in object'></div>
⚫ v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>