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

<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指令用法

<button v-on:click='num++'>点击</button>

　　　　　　　v-on简写形式

<button @click='num++'>点击1</button>

 

　　　　(5.2)事件函数的调用方式

　　　　　　在定义的Vue实例中使用methods在其中写事件函数

　　　　　　直接绑定函数名称

<button v-on:click='handle'>点击2</button>

　　　　　　调用函数

<button v-on:click='handle()'>点击3</button>

 

　　　　(5.3)事件函数参数传递

　　　　　　普通参数和事件对象

<button v-on:click='handle2(123,456,$event)'>点击2</button>　　　　　

　　　　　　事件绑定-参数传递

　　　　　　　　1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

　　　　　　　　2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

　　　　　　

　　　　　　　　event.target.tagName　　　　输出标签名

　　　　　　　　event.target.innerHTML　　　　输出标签中的内容

 

　　　　(5.4)事件修饰符

　　　　　　.stop　　    阻止冒泡

　　　　　　传统的原生JS通过事件对象.stopPropagation()来阻止冒泡

<button v-on:click.stop='handle1'>点击1</button>

　　　　　　.prevent　　阻止默认行为

　　　　　　传统的原生JS通过事件对象.preventDefault()来阻止默认行为

<a href="https://www.baidu.com" v-on:click.prevent='handle2'>百度</a>

 

　　　　(5.5)按键修饰符

　　　　　　.enter 回车键　　

<input type="text" v-model='pwd' v-on:keyup.enter='handleSubmit'>

　　　　　　.delete 删除键

<input type="text" v-model='uname' v-on:keyup.delete='clearContent'>

　　

　　　　(5.6)自定义按键修饰符

　　　　　　全局 config.keyCodes对象

Vue.config.keyCodes.aaa = 65;

 

　　　　(5.7)属性绑定

　　　　　　v-bind指令用法

<a v-bind:href="url">百度</a>

　　　　　　缩写形式

<a :href="url">百度1</a>

 

　　　　　　v-model底层原理实现分析

1 <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>

 

　　　　(5.8) 样式绑定

　　　　　　class样式处理

　　　　　　　　对象语法

<div v-bind:class="{active:isActive,error:isError}">测试样式</div>

　　　　　　　　数组语法

<div v-bind:class="[activeClass,errorClass]">测试样式</div>

　　　　　　

　　　　　　style样式处理

　　　　　　　　对象语法

<div v-bind:style='{border:borderStyle, width:widthStyle, height:heightStyle}'></div>

　　　　　　　　数组语法

<div v-bind:style='[objStyles,overrideStyles]'></div>

　　　　

　　　　(5.9) 分支结构

　　　　　　　v-if

　　　　　　　v-else

　　　　　　　v-else-if

　　　　　　　v-show: v-show的原理:控制元素样式是否显示 display:none

　　　　　　

<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90 && score >=80'>良好</div>
3 <div v-else-if='score<80 && score >60'>一般</div>
<div v-else>不及格</div>

 

　　　　　　　v-show与v-if的区别

　　　　　　　　　(1)v-if控制元素是否渲染到页面

　　　　　　　　　(2)v-show控制元素是否显示(已经渲染到页面)

　　　　　　　

　　　　(5.10)循环结构

　　　　　　v-for遍历数组

<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item,index) in fruits'>{{item + '-------' + index}}</li>

　　　　　　key的作用：帮助vue区分不同的元素，从而提高性能　　　　　　　　

<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结合使用

<div v-if='value==12' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</div>

 

　　

　　声明式编程:模板的结构与最终显示的效果基本一致