2.Vue模板语法
1.模板语法的概述
(1)如何理解前端渲染
将数据填充到HTML标签中，生成静态的HTML内容
2.前端渲染方式
(1)原生JS拼接字符串
(2)使用前端模板引擎
(3)使用Vue特有的模板语法
3.Vue模板语法
(1)插值表达式
(2)指令
(3)事件绑定
(4)属性绑定
(5)样式绑定
(6)分支循环结构
4.指令
(1)什么是自定义属性?
(2)指令的本质就是自定义属性
(3)指令的格式:以v-开头
5.指令介绍
(1)v-cloak指令用法
插值表达式存在的问题:当浏览器卡顿时，刷新页面，会出现双大括号问题
解决对策:使用v-cloak指令
解决该问题的原理:先隐藏样式的内容，之后在内存中进行值的替换，替换好之后再显示最终效果
(2)数据绑定指令
(2.1)v-text 填充纯文本
相比插值表达式更加简洁
(2.2)v-html
本身存在问题，会遭到XSS攻击
本网站内部数据可以使用，来自第三方的数据不可使用
(2.3)v-pre填充原始信息
跳过编译过程，显示原始信息
(3)数据响应式
(3.1)如何理解数据响应式?
HTML5中的数据响应式: 由于屏幕尺寸的变化导致样式的变化
数据的响应式: (数据的变化导致页面内容的变化)
(3.2)什么是数据绑定?
将数据填充到标签中
(3.3)v-once 只编译一次
显示内容之后不再具有响应式的功能
(4)双向数据绑定指令
(4.1)什么是双向数据绑定
页面内容的变化引起模型数据的变化
模型数据的变化引起页面内容的变化
(4.2)双向数据绑定指令v-model
1 <input type="text" v-model='msg'>
其中的v-model的值是模型数据的值
(4.3)MVVM设计思想
M(Model)、V(View)、VM(View-Model)
View(DOM) ---(DOM Listener)---> Model（JavaScript Object)
<---(Data Bindings)---
2022年01月14日08:35:02
(5)事件绑定
（5.1)Vue如何处理事件?
v-on指令用法
1 <button v-on:click='num++'>点击button>
v-on简写形式
1 <button @click='num++'>点击1button>
(5.2)事件函数的调用方式
在定义的Vue实例中使用methods在其中写事件函数
直接绑定函数名称
1 <button v-on:click='handle'>点击2button>
调用函数
1 <button v-on:click='handle()'>点击3button>
(5.3)事件函数参数传递
普通参数和事件对象
1 <button v-on:click='handle2(123,456,$event)'>点击2button>事件绑定-参数传递 1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event event.target.tagName 输出标签名 event.target.innerHTML 输出标签中的内容 (5.4)事件修饰符 .stop 阻止冒泡 传统的原生JS通过事件对象.stopPropagation()来阻止冒泡
1 <button v-on:click.stop='handle1'>点击1button>.prevent 阻止默认行为 传统的原生JS通过事件对象.preventDefault()来阻止默认行为
1 <a href="https://www.baidu.com" v-on:click.prevent='handle2'>百度a>
(5.5)按键修饰符
.enter 回车键
1 <input type="text" v-model='pwd' v-on:keyup.enter='handleSubmit'>
.delete 删除键
1 <input type="text" v-model='uname' v-on:keyup.delete='clearContent'>
(5.6)自定义按键修饰符
全局 config.keyCodes对象
1 Vue.config.keyCodes.aaa = 65;
(5.7)属性绑定
v-bind指令用法
1 <a v-bind:href="url">百度a>
缩写形式
1 <a :href="url">百度1a>
v-model底层原理实现分析
1
(5.8) 样式绑定
class样式处理
对象语法
1 <div v-bind:class="{active:isActive,error:isError}">测试样式div>
数组语法
1 <div v-bind:class="[activeClass,errorClass]">测试样式div>
style样式处理
对象语法
1 <div v-bind:style='{border:borderStyle, width:widthStyle, height:heightStyle}'>div>
数组语法
1 <div v-bind:style='[objStyles,overrideStyles]'>div>
(5.9) 分支结构
v-if
v-else
v-else-if
v-show: v-show的原理:控制元素样式是否显示 display:none
1 <div v-if='score>=90'>优秀div> 2 <div v-else-if='score<90 && score >=80'>良好div> 3 <div v-else-if='score<80 && score >60'>一般div> 4 <div v-else>不及格div>
v-show与v-if的区别
(1)v-if控制元素是否渲染到页面
(2)v-show控制元素是否显示(已经渲染到页面)
(5.10)循环结构
v-for遍历数组
1 <li v-for='item in fruits'>{{item}}li> 2 <li v-for='(item,index) in fruits'>{{item + '-------' + index}}li>
key的作用：帮助vue区分不同的元素，从而提高性能
1 <li :key='item.id' v-for='(item,index) in fruits'>{{item + '-------' + index}}li>
v-for遍历对象
<div v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}div>
v-for和v-if结合使用
1 <div v-if='value==12' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}div>声明式编程:模板的结构与最终显示的效果基本一致